tor-browser

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

massive-element-below-viewport-offscreen-new.html (2396B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: massive element below viewport and completely offscreen (new content)</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="massive-element-below-viewport-offscreen-ref.html">
      7 <meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-950">
      8 
      9 <script src="/common/reftest-wait.js"></script>
     10 <style>
     11 .target_after_bottom_edge {
     12  position: fixed;
     13  inset-block-start: 20000px;
     14  inset-inline-start: 0px;
     15 }
     16 
     17 .target {
     18  contain: paint;
     19  inline-size: 100px;
     20  block-size: 40000px;
     21  view-transition-name: target;
     22 }
     23 
     24 .top {
     25  inline-size: 100%;
     26  block-size: 100px;
     27  background: lightblue;
     28 }
     29 
     30 .middle {
     31  inline-size: 100%;
     32  block-size: 39800px;
     33  background: green;
     34 }
     35 
     36 .bottom {
     37  inline-size: 100%;
     38  block-size: 100px;
     39  background: blue;
     40 }
     41 
     42 .hidden {
     43  position: fixed;
     44  inset-block-start: 10000px;
     45  inline-size: 10px;
     46  block-size: 10px;
     47  background: grey;
     48  view-transition-name: hidden;
     49 }
     50 
     51 html::view-transition-group(hidden) { animation-duration: 300s; }
     52 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     53 
     54 html::view-transition-old(*), html::view-transition-new(*) {
     55  object-fit: none;
     56 }
     57 
     58 /* We should capture at least viewport height worth of content from the element's top edge */
     59 html::view-transition-group(target) {
     60  animation: unset;
     61  transform: unset;
     62 
     63  position: fixed;
     64  inset-block-start: 0;
     65  inset-inline-start: 0;
     66 }
     67 html::view-transition-old(target) { animation: unset; opacity: 0; }
     68 html::view-transition-new(target) { animation: unset; opacity: 1; }
     69 
     70 </style>
     71 
     72 <div class="target target_after_bottom_edge" id="target">
     73  <div class="top">This text is at the top of the box</div>
     74  <div class="middle">This text is in the middle of the box</div>
     75  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
     76 </div>
     77 <div id=hidden class=hidden></div>
     78 
     79 <script>
     80 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     81 
     82 async function runTest() {
     83  document.startViewTransition(() => {
     84    requestAnimationFrame(() => requestAnimationFrame(() =>
     85      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
     86    ));
     87  });
     88 }
     89 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     90 </script>