Blitz - WPT: active-pseudo.html

wpt / css / css-view-transitions / scoped / active-pseudo.html

/css/css-view-transitions/scoped/active-pseudo.html

<!DOCTYPE html>
<html class=reftest-wait>
<head>
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
<link rel="match" href="content-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>

body { margin: 20px }
#scope {
  position: relative; z-index: 0; background: pink;
  border: 5px dashed purple; padding: 5px;
  width: 180px; height: 120px; view-transition-name: none;
}
#part {
  position: relative; z-index: 0; background: lightgrey;
  border: 5px solid blue; padding: 5px;
  width: 120px; height: 60px;
  left: 20px; top: 20px;
}

body:has(> #scope:active-view-transition-type(baz)) #part {
  view-transition-name: foo;
}
#scope:active-view-transition::view-transition { background: yellow; }
#scope:active-view-transition-type(notme)::view-transition { background: red; }

#scope::view-transition-group(foo) { animation-play-state: paused; }
#scope::view-transition-new(foo) { animation: unset; opacity: 0; }
#scope::view-transition-old(foo) { animation: unset; opacity: 1; }

</style>
</head>
<body>
<div id=scope>
  <div id=part>
    PARTICIPANT
  </div>
</div>
<script>

const scope = document.querySelector("#scope");
failIfNot(scope.startViewTransition, "Missing element.startViewTransition");

async function runTest() {
  await waitForCompositorReady();
  scope.startViewTransition({
    update: () => requestAnimationFrame(takeScreenshot),
    types: ["baz"]
  });
}
onload = () => runTest();

</script>
</body>
</html>

/css/css-view-transitions/scoped/content-ref.html

<!DOCTYPE html>
<html>
<head>
<style>

body { margin: 20px }
#scope {
  position: relative; z-index: 0; background: pink;
  border: 5px dashed purple; padding: 5px;
  width: 180px; height: 120px;
}
#part {
  position: relative; z-index: 0; background: lightgrey;
  border: 5px solid blue; padding: 5px;
  width: 120px; height: 60px;
  left: 20px; top: 20px;
  view-transition-name: foo;
}

#scope-client-area {
  position: absolute; inset: 0; padding: 5px;
  background: yellow;
}

</style>
</head>
<body>
<div id=scope>
  <div id=scope-client-area>
    <div id=part>
      PARTICIPANT
    </div>
  </div>
</div>
</body>
</html>