Blitz - WPT: view-transition-types-matches-case-sensitive.html

wpt / css / css-view-transitions / view-transition-types-matches-case-sensitive.html

/css/css-view-transitions/view-transition-types-matches-case-sensitive.html

<!DOCTYPE html>

<html class="reftest-wait">

<title>View transitions: active-view-transition-type should treat types as case-sensitive</title>

<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/#the-active-view-transition-type-pseudo">
<link rel="author" href="mailto:kiet.ho@apple.com">
<link rel="match" href="view-transition-types-matches-case-sensitive-ref.html">

<script src="/common/reftest-wait.js"></script>

<style>
html:active-view-transition-type(foo) #positive1 { background: green; }
html:active-view-transition-type(Foo) #positive1 { background: red; }
html:active-view-transition-type(FoO) #positive1 { background: magenta; }
html:active-view-transition-type(FOo) #positive1 { background: black; }

html:active-view-transition-type(Bar) #positive2 { background: green; }
html:active-view-transition-type(bar) #positive2 { background: red; }
html:active-view-transition-type(bAr) #positive2 { background: magenta; }
html:active-view-transition-type(baR) #positive2 { background: black; }

#positive1 { view-transition-name: positive1; background: yellow; }
#positive2 { view-transition-name: positive2; background: yellow; }

.test {
  width: 100px;
  height: 100px;
}

#container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

html::view-transition-group(*) {
  animation-play-state: paused;
}

html::view-transition-new(*) {
  animation: unset;
  opacity: 0;
}

html::view-transition-old(*) {
  animation: unset;
  opacity: 1;
}

html::view-transition-group(root) {
  display: none;
}

html::view-transition { background: lightpink; }
</style>

<div id="container">
  <div class="test" id="positive1"></div>
  <div class="test" id="positive2"></div>
</div>

<script>
failIfNot(document.startViewTransition, "Missing document.startViewTransition");

function runTest() {
  let transition = document.startViewTransition({
    types: ["foo", "Bar"]
  });
  transition.ready.then(takeScreenshot);
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
</script>

</html>

/css/css-view-transitions/view-transition-types-matches-case-sensitive-ref.html

<!DOCTYPE html>

<style>
.test {
  width: 100px;
  height: 100px;
  background: green;
}

#container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

body { background: lightpink; }
</style>

<div id="container">
  <div class="test"></div>
  <div class="test"></div>
</div>