tor-browser

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

scroll-timeline-inactive.html (2515B)

      1 <!DOCTYPE html>
      2 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines">
      3 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/web-animations/testcommon.js"></script>
      7 <style>
      8  @keyframes expand {
      9    from { width: 100px; }
     10    to { width: 200px; }
     11  }
     12  .scroller {
     13    overflow: scroll;
     14    width: 100px;
     15    height: 100px;
     16  }
     17 </style>
     18 <main id=main></main>
     19 <script>
     20  function inflate(t, template) {
     21    t.add_cleanup(() => main.replaceChildren());
     22    main.append(template.content.cloneNode(true));
     23    main.offsetTop;
     24  }
     25 </script>
     26 
     27 <template id=basic>
     28  <style>
     29    #timeline {
     30      scroll-timeline: --timeline;
     31    }
     32    #element {
     33      width: 0px;
     34      animation: expand 10s linear paused;
     35      animation-timeline: --timeline;
     36    }
     37  </style>
     38  <div id="container">
     39    <div id=timeline class=scroller><div>
     40    <div id=element></div>
     41  </div>
     42 </template>
     43 <script>
     44  promise_test(async (t) => {
     45    inflate(t, basic);
     46    await waitForNextFrame();
     47    assert_equals(getComputedStyle(element).width, '0px');
     48  }, 'Animation does not apply when the timeline is inactive because there is ' +
     49     'not scroll range');
     50 </script>
     51 
     52 <template id=dynamically_change_range>
     53  <style>
     54    #contents {
     55      height: 200px;
     56    }
     57    #element {
     58      width: 0px;
     59      animation: expand 10s linear paused;
     60      animation-timeline: --timeline;
     61    }
     62  </style>
     63  <div id="container">
     64    <div id=element></div>
     65  </div>
     66 </template>
     67 <script>
     68  promise_test(async (t) => {
     69    inflate(t, dynamically_change_range);
     70    await waitForNextFrame();
     71 
     72    let div = document.createElement('div');
     73    div.setAttribute('class', 'scroller');
     74    div.style.scrollTimeline = 'timeline';
     75    div.innerHTML = '<div id=contents></div>';
     76    try {
     77      container.insertBefore(div, element);
     78 
     79      // The source has no layout box at the time the scroll timeline is created.
     80      assert_equals(getComputedStyle(element).width, '0px');
     81      scroller.offsetTop; // Ensure a layout box for the scroller.
     82      // Wait for an update to the timeline state:
     83      await waitForNextFrame();
     84      // The timeline should now be active, and the animation should apply:
     85      assert_equals(getComputedStyle(element).width, '100px');
     86    } finally {
     87      div.remove();
     88    }
     89  }, 'Animation does not apply when timeline is initially inactive');
     90 </script>