testing/web-platform/tests/scroll-animations/css/timeline-offset-in-keyframe-change-timeline.tentative.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       opacity: 0;
  17       margin-left:  0px;
  18     }
  19     cover 100% {
  20       opacity: 1;
  21       margin-right: 0px;
  22     }
  23   }
  24   #scroller {
  25     border:  10px solid lightgray;
  26     overflow-y: scroll;
  27     overflow-x: hidden;
  28     width: 300px;
  29     height: 200px;
  30     timeline-scope: --sibling;
  31   }
  32   #sibling {
  33     margin-top: 800px;
  34     margin-left:  10px;
  35     margin-right:  10px;
  36     width:  100px;
  37     height:  50px;
  38     background-color:  blue;
  39     view-timeline: --sibling block;
  40   }
  41   #target {
  42     margin-bottom: 800px;
  43     margin-left:  10px;
  44     margin-right:  10px;
  45     width: 100px;
  46     height: 100px;
  47     z-index: -1;
  48     background-color: green;
  49     animation:  anim auto both linear;
  50     /* using document timeline by default */
  51     animation-range-start:  contain 0%;
  52     animation-range-end:  contain 100%;
  53     view-timeline:  --target block;
  54   }
  55
  56   #target.with-view-timeline {
  57     animation-timeline: --target;
  58   }
  59   #target.with-view-timeline.retarget {
  60     animation-timeline: --sibling;
  61   }
  62 </style>
  63 <body>
  64   <div id="scroller">
  65     <div id="sibling"></div>
  66     <div id="target"></div>
  67   </div>
  68 </body>
  69 <script type="text/javascript">
  70   async function runTest() {
  71     promise_test(async t => {
  72       await waitForNextFrame();
  73       const anim = document.getAnimations()[0];
  74       await anim.ready;
  75       await waitForNextFrame();
  76
  77       // Initially using a document timeline, so the keyframes should be
  78       // ignored.
  79       let frames = anim.effect.getKeyframes();
  80       let expected = [
  81         { offset: { rangeName: 'cover', offset: CSS.percent(0) },
  82           computedOffset: null, easing: "linear", composite: "auto",
  83           marginLeft: "0px", opacity: "0" },
  84         { offset: { rangeName: 'cover', offset: CSS.percent(100) },
  85           computedOffset: null, easing: "linear", composite: "auto",
  86           marginRight: "0px", opacity: "1" }
  87       ];
  88       assert_frame_lists_equal(frames, expected);
  89       // Once a view-timeline is added, the kefyrames must update to reflect
  90       // the new keyframe offsets.
  91       target.classList.add('with-view-timeline');
  92       assert_equals(getComputedStyle(target).animationTimeline, '--target',
  93                     'Switch to view timeline');
  94       await waitForNextFrame();
  95
  96       frames = anim.effect.getKeyframes();
  97       expected = [
  98         { offset:  0, computedOffset: 0, easing: "linear", composite: "replace",
  99           marginRight: "10px" },
 100         { offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
 101           marginLeft: "10px" },
 102         { offset: { rangeName: 'cover', offset: CSS.percent(0) },
 103           computedOffset: -1, easing: "linear", composite: "auto",
 104           marginLeft: "0px", opacity: "0" },
 105         { offset: { rangeName: 'cover', offset: CSS.percent(100) },
 106           computedOffset: 2, easing: "linear", composite: "auto",
 107           marginRight: "0px", opacity: "1" },
 108       ];
 109       assert_frame_lists_equal(frames, expected);
 110
 111       target.classList.add('retarget');
 112       assert_equals(getComputedStyle(target).animationTimeline, '--sibling',
 113                     'Switch to another view timeline');
 114       await waitForNextFrame();
 115       frames = anim.effect.getKeyframes();
 116       expected = [
 117         { offset:  0, computedOffset: 0, easing: "linear", composite: "replace",
 118           marginRight: "10px" },
 119         { offset: 1, computedOffset: 1, easing: "linear", composite: "replace",
 120           marginLeft: "10px" },
 121         { offset: { rangeName: 'cover', offset: CSS.percent(0) },
 122           computedOffset: -1/3, easing: "linear",
 123           composite: "auto", marginLeft: "0px", opacity: "0" },
 124         { offset:  { rangeName: 'cover', offset: CSS.percent(100) },
 125           computedOffset: 4/3, easing: "linear", composite: "auto",
 126           marginRight: "0px", opacity: "1" },
 127       ];
 128       assert_frame_lists_equal(frames, expected);
 129
 130       target.classList.toggle('with-view-timeline');
 131       assert_equals(getComputedStyle(target).animationTimeline, 'auto',
 132                     'Switch back to document timeline');
 133       frames = anim.effect.getKeyframes();
 134       expected = [
 135         { offset: { rangeName: 'cover', offset: CSS.percent(0) },
 136           computedOffset: null, easing: "linear", composite: "auto",
 137           marginLeft: "0px", opacity: "0" },
 138         { offset: { rangeName: 'cover', offset: CSS.percent(100) },
 139           computedOffset: null, easing: "linear", composite: "auto",
 140           marginRight: "0px", opacity: "1" }
 141       ];
 142       assert_frame_lists_equal(frames, expected);
 143     }, 'getKeyframes with timeline-offsets');
 144   }
 145
 146   window.onload = runTest;
 147 </script>