tor-browser

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

massive-element-right-of-viewport-offscreen-old.html (2446B)

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