animation-timeline-ignored.tentative.html (5058B)
1 <!DOCTYPE html> 2 <link rel="help" src="https://github.com/w3c/csswg-drafts/pull/5666"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/web-animations/testcommon.js"></script> 6 <style> 7 main { 8 overflow: hidden; 9 height: 0px; 10 timeline-scope: --timeline1, --timeline2, --timeline3; 11 } 12 .scroller { 13 overflow: hidden; 14 width: 100px; 15 height: 100px; 16 } 17 .scroller > div { 18 height: 200px; 19 } 20 @keyframes expand { 21 from { width: 100px; } 22 to { width: 200px; } 23 } 24 #scroller1 { 25 scroll-timeline-name: --timeline1; 26 } 27 #scroller2 { 28 scroll-timeline-name: --timeline2; 29 } 30 #scroller3 { 31 scroll-timeline-name: --timeline3; 32 } 33 #element { 34 width: 0px; 35 height: 20px; 36 animation-name: expand; 37 animation-duration: 1000s; 38 animation-timing-function: linear; 39 animation-timeline: --timeline1; 40 } 41 /* Ensure stable expectations if feature is not supported */ 42 @supports not (animation-timeline:--foo) { 43 #element { animation-play-state: paused; } 44 } 45 </style> 46 <main> 47 <div class=scroller id=scroller1><div></div></div> 48 <div class=scroller id=scroller2><div></div></div> 49 <div class=scroller id=scroller3><div></div></div> 50 <div class=scroller id=scroller4><div></div></div> 51 <div id=container></div> 52 </main> 53 <script> 54 scroller1.scrollTop = 20; 55 scroller2.scrollTop = 40; 56 scroller3.scrollTop = 60; 57 scroller4.scrollTop = 80; 58 59 // Create #element in #container, run |func|, then clean up afterwards. 60 function test_animation_timeline(func, description) { 61 promise_test(async () => { 62 try { 63 await runAndWaitForFrameUpdate(() => { 64 let element = document.createElement('element'); 65 element.setAttribute('id', 'element'); 66 container.append(element); 67 }); 68 await func(); 69 } finally { 70 while (container.firstChild) 71 container.firstChild.remove(); 72 } 73 }, description); 74 } 75 76 test_animation_timeline(async () => { 77 let animation = element.getAnimations()[0]; 78 assert_equals(getComputedStyle(element).width, '120px'); 79 element.style = 'animation-timeline:--timeline2'; 80 await animation.ready; 81 82 assert_equals(getComputedStyle(element).width, '140px'); 83 }, 'Changing animation-timeline changes the timeline (sanity check)'); 84 85 test_animation_timeline(async () => { 86 let animation = element.getAnimations()[0]; 87 assert_equals(getComputedStyle(element).width, '120px'); 88 89 // Set a (non-CSS) ScrollTimeline on the CSSAnimation. 90 let timeline4 = new ScrollTimeline({ source: scroller4 }); 91 92 animation.timeline = timeline4; 93 await animation.ready; 94 assert_equals(getComputedStyle(element).width, '180px'); 95 96 // Changing the animation-timeline property should have no effect. 97 element.style = 'animation-timeline:--timeline2'; 98 await animation.ready; 99 100 assert_equals(getComputedStyle(element).width, '180px'); 101 }, 'animation-timeline ignored after setting timeline with JS ' + 102 '(ScrollTimeline from JS)'); 103 104 test_animation_timeline(async () => { 105 let animation = element.getAnimations()[0]; 106 assert_equals(getComputedStyle(element).width, '120px'); 107 108 let timeline1 = animation.timeline; 109 element.style = 'animation-timeline:--timeline2'; 110 await animation.ready; 111 assert_equals(getComputedStyle(element).width, '140px'); 112 113 animation.timeline = timeline1; 114 await animation.ready; 115 116 assert_equals(getComputedStyle(element).width, '120px'); 117 118 // Should have no effect. 119 element.style = 'animation-timeline:--timeline3'; 120 await animation.ready; 121 122 assert_equals(getComputedStyle(element).width, '120px'); 123 }, 'animation-timeline ignored after setting timeline with JS ' + 124 '(ScrollTimeline from CSS)'); 125 126 test_animation_timeline(async () => { 127 let animation = element.getAnimations()[0]; 128 assert_equals(getComputedStyle(element).width, '120px'); 129 animation.timeline = document.timeline; 130 await animation.ready; 131 132 // (The animation continues from where the previous timeline left it). 133 assert_equals(getComputedStyle(element).width, '120px'); 134 135 // Changing the animation-timeline property should have no effect. 136 element.style = 'animation-timeline:--timeline2'; 137 await animation.ready; 138 assert_equals(getComputedStyle(element).width, '120px'); 139 }, 'animation-timeline ignored after setting timeline with JS (document timeline)'); 140 141 test_animation_timeline(async () => { 142 let animation = element.getAnimations()[0]; 143 assert_equals(getComputedStyle(element).width, '120px'); 144 animation.timeline = null; 145 assert_false(animation.pending); 146 assert_equals(getComputedStyle(element).width, '120px'); 147 148 // Changing the animation-timeline property should have no effect. 149 element.style = 'animation-timeline:--timeline2'; 150 assert_false(animation.pending); 151 assert_equals(getComputedStyle(element).width, '120px'); 152 }, 'animation-timeline ignored after setting timeline with JS (null)'); 153 </script>