scroll-timeline-writing-modes.https.html (6230B)
1 <!DOCTYPE html> 2 <title>Tests that ScrollTimeline works properly with writing mode and directionality</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 <script src="common.js"></script> 8 9 10 <script> 11 // Creates a DOM structure like: 12 // - container 13 // - box {100x100} 14 // - scroller {100x100, writing-mode, direction} 15 // - contents 16 function createTestDOM(x_scroll_axis, writing_mode, direction) { 17 const elements = {}; 18 19 elements.container = document.createElement('div'); 20 21 elements.box = document.createElement('div'); 22 elements.box.style.height = '100px'; 23 elements.box.style.width = '100px'; 24 25 elements.scroller = document.createElement('div'); 26 elements.scroller.style.height = '100px'; 27 elements.scroller.style.width = '100px'; 28 if (x_scroll_axis) 29 elements.scroller.style.overflowX = 'scroll'; 30 else 31 elements.scroller.style.overflowY = 'scroll'; 32 elements.scroller.style.direction = direction; 33 elements.scroller.style.writingMode = writing_mode; 34 35 // Callers don't need access to this. 36 const contents = document.createElement('div'); 37 contents.style.height = x_scroll_axis ? '100%' : '1000px'; 38 contents.style.width = x_scroll_axis ? '1000px' : '100%'; 39 40 elements.scroller.appendChild(contents); 41 elements.container.appendChild(elements.box); 42 elements.container.appendChild(elements.scroller); 43 document.body.appendChild(elements.container); 44 45 return elements; 46 } 47 48 function createAndPlayTestAnimation(elements, timeline_orientation) { 49 const effect = new KeyframeEffect( 50 elements.box, 51 [{transform: 'translateY(0)'}, {transform: 'translateY(200px)'}], { 52 duration: 1000, 53 }); 54 55 const timeline = new ScrollTimeline({ 56 scrollSource: elements.scroller, 57 orientation: timeline_orientation 58 }); 59 const animation = new WorkletAnimation('passthrough', effect, timeline); 60 animation.play(); 61 return animation; 62 } 63 64 setup(setupAndRegisterTests, {explicit_done: true}); 65 66 function setupAndRegisterTests() { 67 registerPassthroughAnimator().then(() => { 68 // Note that block horizontal-tb is tested implicitly in the basic 69 // ScrollTimeline tests (as it is the default). 70 async_test( 71 block_vertical_lr, 72 'A block ScrollTimeline should produce the correct current time for vertical-lr'); 73 async_test( 74 block_vertical_rl, 75 'A block ScrollTimeline should produce the correct current time for vertical-rl'); 76 // Again, inline for horizontal-tb and direction: ltr is the default 77 // inline mode and so is tested elsewhere. 78 async_test( 79 inline_horizontal_tb_rtl, 80 'An inline ScrollTimeline should produce the correct current time for horizontal-tb and direction: rtl'); 81 async_test( 82 inline_vertical_writing_mode_ltr, 83 'An inline ScrollTimeline should produce the correct current time for vertical writing mode'); 84 async_test( 85 inline_vertical_writing_mode_rtl, 86 'An inline ScrollTimeline should produce the correct current time for vertical writing mode and direction: rtl'); 87 done(); 88 }); 89 } 90 91 function block_vertical_lr(t) { 92 const elements = createTestDOM(true, 'vertical-lr', 'ltr'); 93 const animation = createAndPlayTestAnimation(elements, 'block'); 94 95 // Move the scroller to the 25% point. 96 const maxScroll = 97 elements.scroller.scrollWidth - elements.scroller.clientWidth; 98 elements.scroller.scrollLeft = 0.25 * maxScroll; 99 100 waitForNotNullLocalTime(animation).then(t.step_func_done(() => { 101 assert_equals( 102 getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); 103 })); 104 } 105 106 function block_vertical_rl(t) { 107 const elements = createTestDOM(true, 'vertical-rl', 'ltr'); 108 const animation = createAndPlayTestAnimation(elements, 'block'); 109 110 // Move the scroller to the left 25% point, since it is vertical-rl, 111 // i.e leftwards overflow direction, scrollLeft is -25% point. 112 const maxScroll = 113 elements.scroller.scrollWidth - elements.scroller.clientWidth; 114 elements.scroller.scrollLeft = -0.25 * maxScroll; 115 116 waitForNotNullLocalTime(animation).then(t.step_func_done(() => { 117 assert_equals( 118 getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); 119 })); 120 } 121 122 function inline_horizontal_tb_rtl(t) { 123 const elements = createTestDOM(true, 'horizontal-tb', 'rtl'); 124 const animation = createAndPlayTestAnimation(elements, 'inline'); 125 126 // Move the scroller to the left 25% point, since it is direction: rtl, 127 // i.e leftwards overflow direction, scrollLeft is -25% point. 128 const maxScroll = 129 elements.scroller.scrollWidth - elements.scroller.clientWidth; 130 elements.scroller.scrollLeft = -0.25 * maxScroll; 131 132 waitForNotNullLocalTime(animation).then(t.step_func_done(() => { 133 assert_equals( 134 getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); 135 })); 136 } 137 138 function inline_vertical_writing_mode_ltr(t) { 139 const elements = createTestDOM(false, 'vertical-lr', 'ltr'); 140 const animation = createAndPlayTestAnimation(elements, 'inline'); 141 142 // Move the scroller to the 25% point. 143 const maxScroll = 144 elements.scroller.scrollHeight - elements.scroller.clientHeight; 145 elements.scroller.scrollTop = 0.25 * maxScroll; 146 147 waitForNotNullLocalTime(animation).then(t.step_func_done(() => { 148 assert_equals( 149 getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); 150 })); 151 } 152 153 function inline_vertical_writing_mode_rtl(t) { 154 const elements = createTestDOM(false, 'vertical-lr', 'rtl'); 155 const animation = createAndPlayTestAnimation(elements, 'inline'); 156 157 // Move the scroller to the top 25% point, since it is a vertical-lr writing mode 158 // and direction: rtl, i.e upwards overflow direction, scrollTop is -25% point. 159 const maxScroll = 160 elements.scroller.scrollHeight - elements.scroller.clientHeight; 161 elements.scroller.scrollTop = -0.25 * maxScroll; 162 163 waitForNotNullLocalTime(animation).then(t.step_func_done(() => { 164 assert_equals( 165 getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); 166 })); 167 } 168 </script>