tor-browser

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

column-span-during-transition-doesnt-skip.html (1238B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: column-span elements in a fragmented container aren't skipped</title>
      4 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-100000">
      5 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
      6 <link rel="author" href="mailto:mattwoodrow@apple.com">
      7 <link rel="match" href="column-span-during-transition-doesnt-skip-ref.html">
      8 
      9 <script src="/common/reftest-wait.js"></script>
     10 <style>
     11 #container {
     12  width: 500px;
     13  height: 500px;
     14 }
     15 .fragment {
     16  columns: 2;
     17 }
     18 #target {
     19  height: 200px;
     20  background: green;
     21  view-transition-name: target;
     22  column-span: all;
     23 }
     24 
     25 ::view-transition {
     26  background: pink;
     27 }
     28 ::view-transition-group(root) {
     29  animation-duration: 500s;
     30  visibility: hidden;
     31 }
     32 </style>
     33 <div id=container>
     34  <div id=target></div>
     35 </div>
     36 
     37 <script>
     38 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     39 
     40 function runTransition() {
     41  let t = document.startViewTransition(() => {
     42    container.classList.add("fragment")
     43  });
     44  t.ready.then(() => {
     45    requestAnimationFrame(() => {
     46      requestAnimationFrame(takeScreenshot);
     47    });
     48  });
     49 }
     50 
     51 requestAnimationFrame(() => requestAnimationFrame(runTransition))
     52 </script>