tor-browser

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

snapshot-containing-block-absolute.html (1889B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: use snapshot containing block for absolute position</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:bokan@chromium.org">
      6 <link rel="match" href="snapshot-containing-block-absolute-ref.html">
      7 <meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
      8 
      9 <script src="/common/reftest-wait.js"></script>
     10 <style>
     11 :root {
     12  view-transition-name: none;
     13  background-color: red;
     14 }
     15 
     16 body {
     17  height: 400vh;
     18 }
     19 
     20 #target {
     21  position: absolute;
     22  left: 0px;
     23  top: 600px;
     24  width: 100px;
     25  height: 100px;
     26 
     27  display: flex;
     28  justify-content: center;
     29  flex-direction: column;
     30  align-items: center;
     31 
     32  background: darkseagreen;
     33  view-transition-name: target;
     34 }
     35 
     36 ::view-transition-group(target) {
     37  animation-duration: 50s;
     38  animation-play-state: paused;
     39  top: unset;
     40  left: unset;
     41  right: 0px;
     42  bottom: 0px;
     43 }
     44 
     45 ::view-transition {
     46  position: absolute;
     47  left: 20px;
     48  top: 40px;
     49  width: 700px;
     50  height: 500px;
     51  background-color: limegreen;
     52 }
     53 
     54 ::view-transition-old(*) {
     55  animation: unset;
     56  opacity: 1;
     57 }
     58 
     59 ::view-transition-new(*) {
     60  animation: unset;
     61  opacity: 0;
     62 }
     63 
     64 </style>
     65 
     66 <div id="target">TARGET</div>
     67 
     68 <script>
     69 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     70 
     71 async function runTest() {
     72  // Start the view transition at a scroll offset so that the snapshot
     73  // containing block differs from the initial containing block. Scroll so that
     74  // the target is at 0,0 so its transition group has an identity transform.
     75  const scrollTargetY = document.getElementById('target').offsetTop;
     76  window.scrollTo(0, scrollTargetY);
     77  let transition = document.startViewTransition();
     78  await transition.ready;
     79  takeScreenshot();
     80 }
     81 
     82 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     83 </script>