testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html

   1 <!DOCTYPE html>
   2 <meta charset=utf-8>
   3 <title>Scroll timeline with paused animations</title>
   4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation">
   5 <link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state">
   6 <script src="/resources/testharness.js"></script>
   7 <script src="/resources/testharnessreport.js"></script>
   8 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
   9 <script src="/css/css-animations/support/testcommon.js"></script>
  10 <style>
  11   @keyframes anim {
  12     from { width: 100px; }
  13     to { width: 200px; }
  14   }
  15
  16   .fill-vh {
  17     width: 100px;
  18     height: 100vh;
  19   }
  20 </style>
  21 <body>
  22 <div id="log"></div>
  23 <script>
  24 'use strict';
  25
  26 async function resetScrollPosition() {
  27   // Reset to 0 so we don't affect following tests.
  28   document.scrollingElement.scrollTop = 0;
  29   return waitForNextFrame();
  30 }
  31
  32 promise_test(async t => {
  33   const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
  34   const filling = addDiv(t, { class: 'fill-vh' });
  35   const scroller = document.scrollingElement;
  36   t.add_cleanup(resetScrollPosition);
  37
  38   div.style.animation = 'anim 100s linear paused scroll(root)';
  39   const anim = div.getAnimations()[0];
  40   await anim.ready;
  41   assert_percents_equal(anim.currentTime, 0, 'timeline time reset');
  42   assert_equals(getComputedStyle(div).width, '100px');
  43
  44   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  45   scroller.scrollTop = maxScroll;
  46   await waitForNextFrame();
  47   assert_equals(getComputedStyle(div).width, '100px');
  48
  49 }, 'Test that the scroll animation is paused');
  50
  51 promise_test(async t => {
  52   const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
  53   const filling = addDiv(t, { class: 'fill-vh' });
  54   const scroller = document.scrollingElement;
  55   await waitForNextFrame();
  56
  57   div.style.animation = 'anim 100s linear forwards scroll(root)';
  58   const anim = div.getAnimations()[0];
  59   await anim.ready;
  60   assert_percents_equal(anim.currentTime, 0, 'timeline time reset');
  61   assert_equals(getComputedStyle(div).width, '100px');
  62
  63   await waitForNextFrame();
  64   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
  65   scroller.scrollTop = maxScroll;
  66   await waitForNextFrame();
  67   assert_equals(getComputedStyle(div).width, '200px');
  68
  69   div.style.animationPlayState = 'paused';
  70   assert_equals(anim.playState, 'paused');
  71   assert_equals(getComputedStyle(div).width, '200px',
  72                 'Current time preserved when pause-pending.');
  73   assert_true(anim.pending,
  74               'Pending state after changing animationPlayState');
  75   await anim.ready;
  76   assert_equals(getComputedStyle(div).width, '200px',
  77                 'Current time preserved when paused.');
  78   assert_percents_equal(anim.timeline.currentTime, 100);
  79   document.scrollingElement.scrollTop = 0;
  80   await waitForNextFrame();
  81   assert_percents_equal(anim.timeline.currentTime, 0);
  82   assert_equals(getComputedStyle(div).width, '200px');
  83 }, 'Test that the scroll animation is paused by updating animation-play-state');
  84
  85 </script>
  86 </body>