tor-browser

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

test_get_animations_on_scroll_animations.html (3026B)

      1 <!doctype html>
      2 <head>
      3 <meta charset=utf-8>
      4 <title>Test getAnimations() which doesn't return scroll animations</title>
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="../testcommon.js"></script>
      8 <style>
      9  @keyframes animWidth {
     10    from { width: 100px; }
     11    to { width: 200px }
     12  }
     13  @keyframes animTop {
     14    to { top: 100px }
     15  }
     16  .fill-vh {
     17    width: 100px;
     18    height: 100vh;
     19  }
     20 </style>
     21 </head>
     22 <body>
     23 <div id="log"></div>
     24 <script>
     25 "use strict";
     26 
     27 promise_test(async (t) => {
     28  const div = addDiv(t,
     29    { style: "width: 10px; height: 100px; " +
     30             "animation: animWidth 100s, animTop 200s; " +
     31             "animation-timeline: scroll(), auto;"});
     32 
     33  // Sanity check to make sure the scroll animation is there.
     34  addDiv(t, { class: "fill-vh" });
     35  const scroller = document.scrollingElement;
     36  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     37  scroller.scrollTop = maxScroll;
     38  // Wait for one frame to make sure getComputedStyle() works because we sample
     39  // the scroll timeline during the HTML event loop.
     40  await waitForNextFrame();
     41 
     42  assert_equals(getComputedStyle(div).width, "200px",
     43                "The scroll animation is there");
     44 
     45  const animations = div.getAnimations();
     46  assert_equals(animations.length, 2,
     47                'getAnimations() should include scroll animations');
     48  assert_equals(animations[0].animationName, "animWidth",
     49                'getAmimations() should return scroll animations');
     50  // FIXME: Bug 1676794. Support ScrollTimeline interface.
     51  assert_equals(animations[0].timeline, null,
     52                'scroll animation should not return scroll timeline');
     53 }, 'Element.getAnimation() should include scroll animations');
     54 
     55 promise_test(async (t) => {
     56  const div = addDiv(t,
     57    { style: "width: 10px; height: 100px; " +
     58             "animation: animWidth 100s, animTop 100s; " +
     59             "animation-timeline: scroll(), auto;"});
     60 
     61  // Sanity check to make sure the scroll animation is there.
     62  addDiv(t, { class: "fill-vh" });
     63  const scroller = document.scrollingElement;
     64  const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     65  scroller.scrollTop = maxScroll;
     66  // Wait for one frame to make sure getComputedStyle() works because we sample
     67  // the scroll timeline during the HTML event loop.
     68  await waitForNextFrame();
     69 
     70  assert_equals(getComputedStyle(div).width, "200px",
     71                "The scroll animation is there");
     72 
     73  const animations = document.getAnimations();
     74  assert_equals(animations.length, 2,
     75                'getAnimations() should include scroll animations');
     76  assert_equals(animations[0].animationName, "animWidth",
     77                'getAmimations() should return scroll animations');
     78  // FIXME: Bug 1676794. Support ScrollTimeline interface.
     79  assert_equals(animations[0].timeline, null,
     80                'scroll animation should not return scroll timeline');
     81 }, 'Document.getAnimation() should include scroll animations');
     82 
     83 </script>
     84 </body>