tor-browser

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

animating-new-content-subset.html (1849B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: animations in the new element show up in the images if it partially changes</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 <link rel="match" href="animating-new-content-subset-ref.html">
      7 
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="/common/rendering-utils.js"></script>
     10 <style>
     11 #target {
     12  width:100px;
     13  height:100px;
     14  background: blue;
     15  view-transition-name: target;
     16  will-change: transform;
     17 }
     18 
     19 .child {
     20  width: 50px;
     21  height: 50px;
     22  will-change: transform;
     23  background: green;
     24 }
     25 
     26 .hidden {
     27  width: 10px;
     28  height: 10px;
     29  background: grey;
     30  view-transition-name: hidden;
     31 }
     32 
     33 html::view-transition-group(hidden) { animation-duration: 300s; visibility: hidden;}
     34 
     35 html::view-transition-group(target) {
     36  animation: unset;
     37 }
     38 
     39 html::view-transition-image-pair(target) {
     40  isolation: unset;
     41 }
     42 html::view-transition-old(target), html::view-transition-new(target) {
     43  animation: unset;
     44  mix-blend-mode: normal;
     45 }
     46 
     47 html::view-transition-old(target) {
     48  opacity: 0;
     49 }
     50 
     51 html::view-transition-new(target) {
     52  opacity: 1;
     53 }
     54 </style>
     55 
     56 <div id="target">
     57  <div class="child" id="child">
     58    I'm the inner composited child.
     59  </div>
     60 </div>
     61 <div class="hidden"></div>
     62 
     63 <script>
     64 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     65 
     66 async function runTest() {
     67  let transition = document.startViewTransition();
     68  transition.ready.then(async () => {
     69    await waitForAtLeastOneFrame();
     70    await waitForAtLeastOneFrame();
     71    child.style.background = "grey";
     72 
     73    await waitForAtLeastOneFrame();
     74    await waitForAtLeastOneFrame();
     75    takeScreenshot();
     76  });
     77 }
     78 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     79 </script>