scroll-timeline-axis-writing-mode.html (4976B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 3 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis"> 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 .scroller { 9 overflow: hidden; 10 width: 100px; 11 height: 100px; 12 } 13 .contents { 14 height: 200px; 15 width: 200px; 16 } 17 @keyframes expand { 18 from { width: 100px; } 19 to { width: 200px; } 20 } 21 #timeline_initial_axis { 22 scroll-timeline: --timeline_initial_axis; 23 } 24 #timeline_y { 25 scroll-timeline: --timeline_y y; 26 } 27 #timeline_x { 28 scroll-timeline: --timeline_x x; 29 } 30 #timeline_block_in_horizontal { 31 scroll-timeline: --timeline_block_in_horizontal block; 32 } 33 #timeline_inline_in_horizontal { 34 scroll-timeline: --timeline_inline_in_horizontal inline; 35 } 36 #timeline_block_in_vertical { 37 scroll-timeline: --timeline_block_in_vertical block; 38 writing-mode: vertical-lr; 39 } 40 #timeline_inline_in_vertical { 41 scroll-timeline: --timeline_inline_in_vertical inline; 42 writing-mode: vertical-lr; 43 } 44 .target { 45 width: 0px; 46 animation-name: expand; 47 animation-duration: 10s; 48 animation-timing-function: linear; 49 position: absolute; 50 } 51 /* Ensure stable expectations if feature is not supported */ 52 @supports not (animation-timeline:--foo) { 53 .target { animation-play-state: paused; } 54 } 55 #element_initial_axis { animation-timeline: --timeline_initial_axis; } 56 #element_y { animation-timeline: --timeline_y; } 57 #element_x { animation-timeline: --timeline_x; } 58 #element_block_in_horizontal { animation-timeline: --timeline_block_in_horizontal; } 59 #element_inline_in_horizontal { animation-timeline: --timeline_inline_in_horizontal; } 60 #element_block_in_vertical { animation-timeline: --timeline_block_in_vertical; } 61 #element_inline_in_vertical { animation-timeline: --timeline_inline_in_vertical; } 62 </style> 63 <div class=scroller id=timeline_initial_axis> 64 <div class=contents></div> 65 <div class=target id=element_initial_axis></div> 66 </div> 67 <div class=scroller id=timeline_y> 68 <div class=contents></div> 69 <div class=target id=element_y></div> 70 </div> 71 <div class=scroller id=timeline_x> 72 <div class=contents></div> 73 <div class=target id=element_x></div> 74 </div> 75 <div class=scroller id=timeline_block_in_horizontal> 76 <div class=contents></div> 77 <div class=target id=element_block_in_horizontal></div> 78 </div> 79 <div class=scroller id=timeline_inline_in_horizontal> 80 <div class=contents></div> 81 <div class=target id=element_inline_in_horizontal></div> 82 </div> 83 <div class=scroller id=timeline_block_in_vertical> 84 <div class=contents></div> 85 <div class=target id=element_block_in_vertical></div> 86 </div> 87 <div class=scroller id=timeline_inline_in_vertical> 88 <div class=contents></div> 89 <div class=target id=element_inline_in_vertical></div> 90 </div> 91 <script> 92 async function setScrollPositions() { 93 return runAndWaitForFrameUpdate(() => { 94 // Animations linked to vertical scroll-timelines are at 75% progress. 95 timeline_initial_axis.scrollTop = 75; 96 timeline_y.scrollTop = 75; 97 timeline_block_in_horizontal.scrollTop = 75; 98 timeline_inline_in_vertical.scrollTop = 75; 99 // Animations linked to horizontal scroll-timelines are at 25% progress. 100 timeline_x.scrollLeft = 25; 101 timeline_block_in_vertical.scrollLeft = 25; 102 timeline_inline_in_horizontal.scrollLeft = 25; 103 }); 104 } 105 106 promise_test(async (t) => { 107 await setScrollPositions(); 108 assert_equals(getComputedStyle(element_initial_axis).width, '175px'); 109 }, 'Initial axis'); 110 111 promise_test(async (t) => { 112 await setScrollPositions(); 113 assert_equals(getComputedStyle(element_y).width, '175px'); 114 }, 'Vertical axis'); 115 116 promise_test(async (t) => { 117 await setScrollPositions(); 118 assert_equals(getComputedStyle(element_x).width, '125px'); 119 }, 'Horizontal axis'); 120 121 promise_test(async (t) => { 122 await setScrollPositions(); 123 assert_equals(getComputedStyle(element_block_in_horizontal).width, '175px'); 124 }, 'Block axis in horizontal writing-mode'); 125 126 promise_test(async (t) => { 127 await setScrollPositions(); 128 assert_equals(getComputedStyle(element_inline_in_horizontal).width, '125px'); 129 }, 'Inline axis in horizontal writing-mode'); 130 131 promise_test(async (t) => { 132 await setScrollPositions(); 133 assert_equals(getComputedStyle(timeline_block_in_vertical).writingMode, 'vertical-lr'); 134 assert_equals(getComputedStyle(element_block_in_vertical).width, '125px'); 135 }, 'Block axis in vertical writing-mode'); 136 137 promise_test(async (t) => { 138 await setScrollPositions(); 139 assert_equals(getComputedStyle(timeline_inline_in_vertical).writingMode, 'vertical-lr'); 140 assert_equals(getComputedStyle(element_inline_in_vertical).width, '175px'); 141 }, 'Inline axis in vertical writing-mode'); 142 143 </script>