tor-browser

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

element-is-grouping-during-animation.html (1618B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: view transition element remains grouping during animation</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
      5 <link rel="author" href="mailto:vmpstr@chromium.org">
      6 <link rel="match" href="element-is-grouping-during-animation-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 
      9 <style>
     10 .parent {
     11  top: 0;
     12  width: 100px;
     13  height: 100px;
     14  position: absolute;
     15  background: red;
     16  transform-style: preserve-3d;
     17 }
     18 .named {
     19  view-transition-name: target;
     20 }
     21 
     22 .child {
     23  background: green;
     24  width: 100px;
     25  height: 100px;
     26  top: 0;
     27  left: 0;
     28  position: absolute;
     29  transform: translateZ(-500px);
     30 }
     31 
     32 body {
     33  perspective: 1000px;
     34  height: 500px;
     35 }
     36 
     37 ::view-transition-group(root) {
     38  animation-duration: 500s;
     39  opacity: 0;
     40 }
     41 ::view-transition-image-pair(root) {
     42  display: none;
     43 }
     44 ::view-transition-group(target) {
     45  animation-duration: 0s;
     46 }
     47 ::view-transition-new(target) {
     48  animation: unset;
     49  opacity: 1;
     50 }
     51 ::view-transition-old(target) {
     52  animation: unset;
     53  opacity: 0;
     54 }
     55 
     56 ::view-transition {
     57  background: pink;
     58 }
     59 </style>
     60 
     61 <div id=target class="parent named"><div class=child></div></div>
     62 
     63 <script>
     64 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     65 
     66 function runTest() {
     67  let transition = document.startViewTransition();
     68  transition.ready.then(() => {
     69    requestAnimationFrame(() => {
     70      target.classList.remove("named");
     71      requestAnimationFrame(takeScreenshot);
     72    });
     73  });
     74 }
     75 
     76 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     77 </script>