testing/web-platform/tests/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html

   1 <!DOCTYPE html>
   2 <html>
   3 <meta charset="utf-8">
   4 <title>Timeline offset in Animation Keyframes</title>
   5 <link rel="help" href="https://w3c.github.io/csswg-drafts/scroll-animations-1/#named-range-keyframes">
   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 fade-in-out-animation {
  12     entry 0%, exit 100% { opacity: 0 }
  13     entry 100%, exit 0% { opacity: 1 }
  14   }
  15
  16   #subject {
  17     background-color:  rgba(0, 0, 255);
  18     height: 200px;
  19     width: 200px;
  20     view-timeline-name: foo;
  21     animation: linear 1s both fade-in-out-animation;
  22     animation-timeline: foo;
  23   }
  24
  25   #container {
  26     border:  5px solid black;
  27     height:  400px;
  28     width:  400px;
  29     overflow-y:  scroll;
  30     resize: both;
  31   }
  32
  33   .spacer {
  34     height: 600px;
  35     width: 100%;
  36   }
  37 </style>
  38 <body onload="runTests()">
  39   <div id="container">
  40     <div class="spacer"></div>
  41     <div id="subject"></div>
  42     <div class="spacer"></div>
  43   </div>
  44 </body>
  45
  46 <script type="text/javascript">
  47   setup(assert_implements_animation_timeline);
  48
  49   function runTests() {
  50     promise_test(async t => {
  51       // scrollTop=200 to 400 is the entry range
  52       container.scrollTop = 200;
  53       await waitForNextFrame();
  54       const anim = document.getAnimations()[0];
  55       assert_equals(getComputedStyle(subject).opacity, '0',
  56                     'Effect at entry 0%');
  57
  58       container.scrollTop = 300;
  59       await waitForNextFrame();
  60       assert_equals(getComputedStyle(subject).opacity, '0.5',
  61                     'Effect at entry 50%');
  62
  63       container.scrollTop = 400;
  64       await waitForNextFrame();
  65       assert_equals(getComputedStyle(subject).opacity, '1',
  66                     'Effect at entry 100%');
  67
  68       // scrollTop=600-800 is the exit range
  69       container.scrollTop = 600;
  70       await waitForNextFrame();
  71       assert_equals(getComputedStyle(subject).opacity, '1',
  72                     'Effect at exit 0%');
  73
  74       container.scrollTop = 700;
  75       await waitForNextFrame();
  76       assert_equals(getComputedStyle(subject).opacity, '0.5',
  77                     'Effect at exit 50%');
  78
  79       container.scrollTop = 800;
  80       await waitForNextFrame();
  81       assert_equals(getComputedStyle(subject).opacity, '0',
  82                     'Effect at exit 100%');
  83
  84       // First change scrollTop so that you are at entry 100%, then resize the
  85       // container in a way that scrollTop is the same, but now the animation is
  86       // at entry 50% and check opacity. After changing the height of container,
  87       // scrollTop=300-500 is the entry range
  88       container.scrollTop = 400;
  89       await waitForNextFrame();
  90       assert_equals(getComputedStyle(subject).opacity, '1',
  91                     'Effect at entry 100% (post resize)');
  92
  93       container.style.height = '300px';
  94       await waitForNextFrame();
  95       assert_equals(getComputedStyle(subject).opacity, '0.5',
  96                     'Effect at entry 50% (post resize)');
  97
  98       // After changing the height of container, scrollTop=600-800 is still the
  99       // exit range
 100       container.scrollTop = 700;
 101       await waitForNextFrame();
 102       assert_equals(getComputedStyle(subject).opacity, '0.5',
 103                     'Effect at exit 50% (post resize)');
 104     });
 105   }
 106 </script>
 107 </html>