testing/web-platform/tests/scroll-animations/css/timeline-offset-keyframes-with-document-timeline.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range">
   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 <script src="/web-animations/resources/keyframe-utils.js"></script>
  11 <title>Animation range and delay</title>
  12 </head>
  13 <style type="text/css">
  14   @keyframes anim {
  15     cover 0% {
  16       margin-left:  0px;
  17     }
  18     50% {
  19       opacity:  0.5;
  20     }
  21     cover 100% {
  22       margin-right: 0px;
  23     }
  24   }
  25   #scroller {
  26     border:  10px solid lightgray;
  27     overflow-y: scroll;
  28     overflow-x: hidden;
  29     width: 300px;
  30     height: 200px;
  31   }
  32   #target {
  33     margin-bottom: 800px;
  34     margin-top:  800px;
  35     margin-left:  10px;
  36     margin-right:  10px;
  37     width: 100px;
  38     height: 100px;
  39     z-index: -1;
  40     background-color: green;
  41     animation:  anim auto both linear;
  42     /* using document timeline by default */
  43   }
  44 </style>
  45 <body>
  46   <div id="scroller">
  47     <div id="target"></div>
  48   </div>
  49 </body>
  50 <script type="text/javascript">
  51   async function runTest() {
  52     promise_test(async t => {
  53       await waitForNextFrame();
  54       const anim = document.getAnimations()[0];
  55       await anim.ready;
  56       await waitForNextFrame();
  57
  58       // Using a document timeline, so only the 50% keyframe is used.
  59       let frames = anim.effect.getKeyframes();
  60       let expected = [
  61         { offset: 0, computedOffset: 0, opacity: "1", easing: "linear",
  62           composite: "replace" },
  63         { offset: 0.5, computedOffset: 0.5, opacity: "0.5", easing: "linear",
  64           composite: "auto", },
  65         { offset: 1, computedOffset: 1, opacity: "1", easing: "linear",
  66           composite: "replace" }
  67       ];
  68       assert_frame_lists_equal(frames, expected);
  69     }, 'Keyframes with timeline-offsets ignored when using document ' +
  70        'timeline');
  71   }
  72
  73   window.onload = runTest;
  74 </script>