tor-browser

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

scroll-timeline-nearest-with-absolute-positioned-element.html (2165B)

      1 <!DOCTYPE html>
      2 <title>The animation-timeline: scroll-timeline-name</title>
      3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
      4 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timelines-named">
      5 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6674">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/web-animations/testcommon.js"></script>
      9 <script src="support/testcommon.js"></script>
     10 <style>
     11  @keyframes grow-progress {
     12    to { width: 300px; }
     13  }
     14 
     15  .scrollcontainer {
     16    overflow-x: scroll;
     17    display: flex;
     18    flex-direction: row;
     19    scroll-timeline:  --timeline inline;
     20  }
     21 
     22  .progress {
     23    position: absolute;
     24    z-index: 10;
     25    left: 0;
     26    top: 0;
     27    width: 100px;
     28    height: 1em;
     29    background: red;
     30    animation: auto grow-progress linear forwards;
     31    animation-timeline: scroll(inline nearest);
     32  }
     33 
     34  .entry {
     35    min-height:  90vh;
     36    min-width: 100vw;
     37  }
     38 
     39  .entry:nth-child(even) {
     40    background-color:  #eee;
     41  }
     42 
     43  .entry:nth-child(odd) {
     44   background-color:  #ddd;
     45  }
     46 </style>
     47 <body>
     48  <div class = "scrollcontainer" id = "scroller">
     49    <div class = "progress" id = "target"></div>
     50    <div class = "entry"></div>
     51    <div class = "entry"></div>
     52    <div class = "entry"></div>
     53  </div>
     54 </body>
     55 <script>
     56 "use strict";
     57 
     58 setup(assert_implements_animation_timeline);
     59 
     60 promise_test(async t => {
     61  const maxScroll = scroller.scrollWidth - scroller.clientWidth;
     62  scroller.scrollLeft = maxScroll;
     63 
     64  // Advance to next frame so that scroll-timeline has a valid time.
     65  await waitForNextFrame();
     66 
     67  // Flex container is not position relative and therefore not the container for
     68  // the progress element.
     69  assert_equals(getComputedStyle(target).width, "100px");
     70 
     71  // Once the scroller is position relative, it becomes the container block for
     72  // the progress element.
     73  scroller.style.position = 'relative';
     74  await waitForNextFrame();
     75 
     76  assert_equals(getComputedStyle(target).width, "300px");
     77 }, 'Resolving scroll(nearest) for an absolutely positioned element');
     78 
     79 </script>