tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

pseudo-with-classes-view-transition-group.html (1061B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transition classes: group selectors should respect classes</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
      5 <link rel="author" href="mailto:nrosenthal@chromium.org">
      6 <link rel="match" href="pseudo-with-classes-ref.html">
      7 <script src="/common/rendering-utils.js"></script>
      8 <script src="/common/reftest-wait.js"></script>
      9 
     10 <style>
     11 #target {
     12  width: 100px;
     13  height: 100px;
     14  position: absolute;
     15  background: green;
     16  view-transition-name: target;
     17  view-transition-class: cls;
     18 }
     19 
     20 :root::view-transition-group(*),
     21 :root::view-transition-image-pair(*),
     22 :root::view-transition-new(*),
     23 :root::view-transition-old(*) {
     24  animation-play-state: paused;
     25 }
     26 
     27 :root::view-transition-group(target.cls) {
     28  left: 100px;
     29 }
     30 
     31 </style>
     32 <div id=target></div>
     33 
     34 <script>
     35 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     36 
     37 window.addEventListener("load", () => {
     38  document.startViewTransition().ready.then(requestAnimationFrame(() => takeScreenshot()));
     39 });
     40 </script>