current-time-writing-modes.html (9411B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>ScrollTimeline current time algorithm - interaction with writing modes</title> 4 <link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="./testcommon.js"></script> 9 10 <body></body> 11 12 <script> 13 'use strict'; 14 15 promise_test(async t => { 16 const scrollerOverrides = new Map([['direction', 'rtl']]); 17 const scroller = setupScrollTimelineTest(scrollerOverrides); 18 const verticalScrollRange = scroller.scrollHeight - scroller.clientHeight; 19 const horizontalScrollRange = scroller.scrollWidth - scroller.clientWidth; 20 21 const blockScrollTimeline = new ScrollTimeline( 22 {source: scroller, axis: 'block'}); 23 const inlineScrollTimeline = new ScrollTimeline( 24 {source: scroller, axis: 'inline'}); 25 const horizontalScrollTimeline = new ScrollTimeline( 26 {source: scroller, axis: 'x'}); 27 const verticalScrollTimeline = new ScrollTimeline( 28 {source: scroller, axis: 'y'}); 29 30 // Unscrolled, all timelines should read a current time of 0 even though the 31 // X-axis will have started at the right hand side for rtl. 32 assert_percents_equal(blockScrollTimeline.currentTime, 0, 33 'Unscrolled block timeline'); 34 assert_percents_equal(inlineScrollTimeline.currentTime, 0, 35 'Unscrolled inline timeline'); 36 assert_percents_equal(horizontalScrollTimeline.currentTime, 0, 37 'Unscrolled horizontal timeline'); 38 assert_percents_equal(verticalScrollTimeline.currentTime, 0, 39 'Unscrolled vertical timeline'); 40 41 // Wait for new animation frame which allows the timeline to compute new 42 // current time. 43 await runAndWaitForFrameUpdate(() => { 44 // The offset in the inline/horizontal direction should be inverted. The 45 // block/vertical direction should be unaffected. 46 scroller.scrollTop = 0.1 * verticalScrollRange; 47 scroller.scrollLeft = -0.8 * horizontalScrollRange; 48 }); 49 50 assert_percents_equal(blockScrollTimeline.currentTime, 10, 51 'Scrolled block timeline'); 52 assert_percents_equal(inlineScrollTimeline.currentTime, 80, 53 'Scrolled inline timeline'); 54 assert_percents_equal(horizontalScrollTimeline.currentTime, 80, 55 'Scrolled horizontal timeline'); 56 assert_percents_equal(verticalScrollTimeline.currentTime, 10, 57 'Scrolled vertical timeline'); 58 }, 'currentTime handles direction: rtl correctly'); 59 60 for (const writingMode of ['vertical-rl', 'sideways-rl']) { 61 promise_test(async t => { 62 const scrollerOverrides = new Map([['writing-mode', writingMode]]); 63 const scroller = setupScrollTimelineTest(scrollerOverrides); 64 const verticalScrollRange = scroller.scrollHeight - scroller.clientHeight; 65 const horizontalScrollRange = scroller.scrollWidth - scroller.clientWidth; 66 67 const blockScrollTimeline = new ScrollTimeline( 68 {source: scroller, axis: 'block'}); 69 const inlineScrollTimeline = new ScrollTimeline( 70 {source: scroller, axis: 'inline'}); 71 const horizontalScrollTimeline = new ScrollTimeline( 72 {source: scroller, axis: 'x'}); 73 const verticalScrollTimeline = new ScrollTimeline( 74 {source: scroller, axis: 'y'}); 75 76 // Unscrolled, all timelines should read a current time of 0 even though the 77 // X-axis will have started at the right hand side for *-rl. 78 assert_percents_equal(blockScrollTimeline.currentTime, 0, 79 'Unscrolled block timeline'); 80 assert_percents_equal(inlineScrollTimeline.currentTime, 0, 81 'Unscrolled inline timeline'); 82 assert_percents_equal(horizontalScrollTimeline.currentTime, 0, 83 'Unscrolled horizontal timeline'); 84 assert_percents_equal(verticalScrollTimeline.currentTime, 0, 85 'Unscrolled vertical timeline'); 86 87 // For *-rl, the X-axis starts on the right-hand-side and is the block 88 // axis. The Y-axis is normal but is the inline axis. For the 89 // horizontal/vertical cases, horizontal starts on the right-hand-side and 90 // vertical is normal. 91 scroller.scrollTop = 0.1 * verticalScrollRange; 92 scroller.scrollLeft = -0.8 * horizontalScrollRange; 93 // Wait for new animation frame which allows the timeline to compute new 94 // current time. 95 await waitForNextFrame(); 96 97 assert_percents_equal(blockScrollTimeline.currentTime, 80, 98 'Scrolled block timeline'); 99 assert_percents_equal(inlineScrollTimeline.currentTime, 10, 100 'Scrolled inline timeline'); 101 assert_percents_equal(horizontalScrollTimeline.currentTime, 80, 102 'Scrolled horizontal timeline'); 103 assert_percents_equal(verticalScrollTimeline.currentTime, 10, 104 'Scrolled vertical timeline'); 105 }, `currentTime handles writing-mode: ${writingMode} correctly`); 106 } 107 108 promise_test(async t => { 109 const scrollerOverrides = new Map([['writing-mode', 'vertical-lr']]); 110 const scroller = setupScrollTimelineTest(scrollerOverrides); 111 const verticalScrollRange = scroller.scrollHeight - scroller.clientHeight; 112 const horizontalScrollRange = scroller.scrollWidth - scroller.clientWidth; 113 114 const blockScrollTimeline = new ScrollTimeline( 115 {source: scroller, axis: 'block'}); 116 const inlineScrollTimeline = new ScrollTimeline( 117 {source: scroller, axis: 'inline'}); 118 const horizontalScrollTimeline = new ScrollTimeline( 119 {source: scroller, axis: 'x'}); 120 const verticalScrollTimeline = new ScrollTimeline( 121 {source: scroller, axis: 'y'}); 122 123 // Unscrolled, all timelines should read a current time of 0. 124 assert_percents_equal(blockScrollTimeline.currentTime, 0, 125 'Unscrolled block timeline'); 126 assert_percents_equal(inlineScrollTimeline.currentTime, 0, 127 'Unscrolled inline timeline'); 128 assert_percents_equal(horizontalScrollTimeline.currentTime, 0, 129 'Unscrolled horizontal timeline'); 130 assert_percents_equal(verticalScrollTimeline.currentTime, 0, 131 'Unscrolled vertical timeline'); 132 133 // For vertical-lr, both axes start at their 'normal' positions but the X-axis 134 // is the block direction and the Y-axis is the inline direction. This does 135 // not affect horizontal/vertical. 136 scroller.scrollTop = 0.1 * verticalScrollRange; 137 scroller.scrollLeft = 0.2 * horizontalScrollRange; 138 // Wait for new animation frame which allows the timeline to compute new 139 // current time. 140 await waitForNextFrame(); 141 142 assert_percents_equal(blockScrollTimeline.currentTime, 20, 143 'Scrolled block timeline'); 144 assert_percents_equal(inlineScrollTimeline.currentTime, 10, 145 'Scrolled inline timeline'); 146 assert_percents_equal(horizontalScrollTimeline.currentTime, 20, 147 'Scrolled horizontal timeline'); 148 assert_percents_equal(verticalScrollTimeline.currentTime, 10, 149 'Scrolled vertical timeline'); 150 }, 'currentTime handles writing-mode: vertical-lr correctly'); 151 152 promise_test(async t => { 153 const scrollerOverrides = new Map([['writing-mode', 'sideways-lr']]); 154 const scroller = setupScrollTimelineTest(scrollerOverrides); 155 const verticalScrollRange = scroller.scrollHeight - scroller.clientHeight; 156 const horizontalScrollRange = scroller.scrollWidth - scroller.clientWidth; 157 158 const blockScrollTimeline = new ScrollTimeline( 159 {source: scroller, axis: 'block'}); 160 const inlineScrollTimeline = new ScrollTimeline( 161 {source: scroller, axis: 'inline'}); 162 const horizontalScrollTimeline = new ScrollTimeline( 163 {source: scroller, axis: 'x'}); 164 const verticalScrollTimeline = new ScrollTimeline( 165 {source: scroller, axis: 'y'}); 166 167 // Unscrolled, all timelines should read a current time of 0. 168 assert_percents_equal(blockScrollTimeline.currentTime, 0, 169 'Unscrolled block timeline'); 170 assert_percents_equal(inlineScrollTimeline.currentTime, 0, 171 'Unscrolled inline timeline'); 172 assert_percents_equal(horizontalScrollTimeline.currentTime, 0, 173 'Unscrolled horizontal timeline'); 174 assert_percents_equal(verticalScrollTimeline.currentTime, 0, 175 'Unscrolled vertical timeline'); 176 177 // For sideways-lr, the Y-axis starts on the end side and is the inline axis. 178 // The X-axis is normal but is the block axis. 179 scroller.scrollTop = -0.8 * verticalScrollRange; 180 scroller.scrollLeft = 0.2 * horizontalScrollRange; 181 // Wait for new animation frame which allows the timeline to compute new 182 // current time. 183 await waitForNextFrame(); 184 185 assert_percents_equal(blockScrollTimeline.currentTime, 20, 186 'Scrolled block timeline'); 187 assert_percents_equal(inlineScrollTimeline.currentTime, 80, 188 'Scrolled inline timeline'); 189 assert_percents_equal(horizontalScrollTimeline.currentTime, 20, 190 'Scrolled horizontal timeline'); 191 assert_percents_equal(verticalScrollTimeline.currentTime, 80, 192 'Scrolled vertical timeline'); 193 }, 'currentTime handles writing-mode: sideways-lr correctly'); 194 </script>