view-transition-types-matches.html | Explore in Territory

<!DOCTYPE html>
<html class="reftest-wait">
<title>View transitions: active-view-transition various matches</title>
<link rel="help" href="https://www.w3.org/TR/css-transitions-2/">
<link rel="author" href="mailto:[email protected]">
<link rel="match" href="view-transition-types-matches-ref.html">

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

html:active-view-transition #positive1 { background: green; }
html:active-view-transition-type(foo) #positive2 { background: green; }
html:active-view-transition-type(foo, bar) #positive3 { background: green; }
html:active-view-transition-type(bar, baz, ba0) #positive4 { background: green; }
html:active-view-transition:active-view-transition-type(foo) #positive5 { background: green; }

/* specificity checks, both a-v-t and a-v-t-t are equal */
html:active-view-transition-type(foo, bar) #positive6 { background: red; }
html:active-view-transition #positive6 { background: green; }

html:active-view-transition #positive7 { background: red; }
html:active-view-transition-type(foo, bar) #positive7 { background: green; }

/* negative checks */
html:active-view-transition-type(fooo) #negative1 { background: red; }
html:active-view-transition-type(foo1, bar2) #negative2 { background: red; }
/* invalid syntax */
html:active-view-transition-type(*) #negative3 { background: red; }
html:active-view-transition(foo) #negative4 { background: red; }
html:active-view-transition-type(foo,) #negative5 { background: red; }
html:active-view-transition-type() #negative6 { background: red; }
html:active-view-transition-type(,) #negative7 { background: red; }
html:has(:active-view-transition-type(bar)) #negative8 { background: red; }

.test {
  width: 100px;
  height: 100px;
}
#positive1 { view-transition-name: positive1; background: red }
#positive2 { view-transition-name: positive2; background: red }
#positive3 { view-transition-name: positive3; background: red }
#positive4 { view-transition-name: positive4; background: red }
#positive5 { view-transition-name: positive5; background: red }
#positive6 { view-transition-name: positive6; background: yellow }
#positive7 { view-transition-name: positive7; background: yellow }
#negative1 { view-transition-name: negative1; background: green }
#negative2 { view-transition-name: negative2; background: green }
#negative3 { view-transition-name: negative3; background: green }
#negative4 { view-transition-name: negative4; background: green }
#negative5 { view-transition-name: negative5; background: green }
#negative6 { view-transition-name: negative6; background: green }
#negative7 { view-transition-name: negative7; background: green }
#negative8 { view-transition-name: negative8; background: green }

#container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-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: red; }
/* also test this type of construct */
html:active-view-transition::view-transition { background: lightpink }
</style>

<div id="container">
  <div class="test" id="positive1"></div>
  <div class="test" id="positive2"></div>
  <div class="test" id="positive3"></div>
  <div class="test" id="positive4"></div>
  <div class="test" id="positive5"></div>
  <div class="test" id="positive6"></div>
  <div class="test" id="positive7"></div>
  <div class="test" id="negative1"></div>
  <div class="test" id="negative2"></div>
  <div class="test" id="negative3"></div>
  <div class="test" id="negative4"></div>
  <div class="test" id="negative5"></div>
  <div class="test" id="negative6"></div>
  <div class="test" id="negative7"></div>
  <div class="test" id="negative8"></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>
chromium/third_party/blink/web_tests/external/wpt/css/css-view-transitions/view-transition-types-matches.html
