animation-timeline-multiple.html (2637B)
1 <!DOCTYPE html> 2 <title>animation-timeline with multiple timelines</title> 3 <link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 <style> 8 main { 9 timeline-scope: --top_timeline, --bottom_timeline, --left_timeline, --right_timeline; 10 } 11 12 .scroller { 13 overflow: hidden; 14 width: 100px; 15 height: 100px; 16 } 17 .scroller > div { 18 height: 200px; 19 width: 200px; 20 } 21 22 @keyframes top { 23 from { top: 100px; } 24 to { top: 200px; } 25 } 26 @keyframes bottom { 27 from { bottom: 100px; } 28 to { bottom: 200px; } 29 } 30 @keyframes left { 31 from { left: 100px; } 32 to { left: 200px; } 33 } 34 @keyframes right { 35 from { right: 100px; } 36 to { right: 200px; } 37 } 38 39 #top_scroller { 40 scroll-timeline-name: --top_timeline; 41 scroll-timeline-axis: block; 42 } 43 #bottom_scroller { 44 scroll-timeline-name: --bottom_timeline; 45 scroll-timeline-axis: inline; 46 } 47 #left_scroller { 48 scroll-timeline-name: --left_timeline; 49 scroll-timeline-axis: block; 50 } 51 #right_scroller { 52 scroll-timeline-name: --right_timeline; 53 scroll-timeline-axis: inline; 54 } 55 56 #element { 57 animation-name: top, bottom, left, right; 58 animation-duration: 10s; 59 animation-timing-function: linear; 60 animation-timeline: --top_timeline, --bottom_timeline, --left_timeline, --right_timeline; 61 } 62 /* Ensure stable expectations if feature is not supported */ 63 @supports not (animation-timeline:--foo) { 64 #element { animation-play-state: paused; } 65 } 66 </style> 67 <main> 68 <div class=scroller id=top_scroller><div></div></div> 69 <div class=scroller id=bottom_scroller><div></div></div> 70 <div class=scroller id=left_scroller><div></div></div> 71 <div class=scroller id=right_scroller><div></div></div> 72 <div id=element></div> 73 </main> 74 <script> 75 promise_test(async (t) => { 76 await runAndWaitForFrameUpdate(() => { 77 top_scroller.scrollTop = 20; 78 top_scroller.scrollLeft = 40; 79 bottom_scroller.scrollTop = 20; 80 bottom_scroller.scrollLeft = 40; 81 left_scroller.scrollTop = 60; 82 left_scroller.scrollLeft = 80; 83 right_scroller.scrollTop = 60; 84 right_scroller.scrollLeft = 80; 85 }); 86 assert_equals(getComputedStyle(element).top, '120px'); 87 assert_equals(getComputedStyle(element).bottom, '140px'); 88 assert_equals(getComputedStyle(element).left, '160px'); 89 assert_equals(getComputedStyle(element).right, '180px'); 90 }, 'animation-timeline works with multiple timelines'); 91 </script>