| <!DOCTYPE html> |
| <title>Tests that ScrollTimeline works properly with writing mode and directionality</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="common.js"></script> |
| |
| |
| <script> |
| // Creates a DOM structure like: |
| // - container |
| // - box {100x100} |
| // - scroller {100x100, writing-mode, direction} |
| // - contents |
| function createTestDOM(x_scroll_axis, writing_mode, direction) { |
| const elements = {}; |
| |
| elements.container = document.createElement('div'); |
| |
| elements.box = document.createElement('div'); |
| elements.box.style.height = '100px'; |
| elements.box.style.width = '100px'; |
| |
| elements.scroller = document.createElement('div'); |
| elements.scroller.style.height = '100px'; |
| elements.scroller.style.width = '100px'; |
| if (x_scroll_axis) |
| elements.scroller.style.overflowX = 'scroll'; |
| else |
| elements.scroller.style.overflowY = 'scroll'; |
| elements.scroller.style.direction = direction; |
| elements.scroller.style.writingMode = writing_mode; |
| |
| // Callers don't need access to this. |
| const contents = document.createElement('div'); |
| contents.style.height = x_scroll_axis ? '100%' : '1000px'; |
| contents.style.width = x_scroll_axis ? '1000px' : '100%'; |
| |
| elements.scroller.appendChild(contents); |
| elements.container.appendChild(elements.box); |
| elements.container.appendChild(elements.scroller); |
| document.body.appendChild(elements.container); |
| |
| return elements; |
| } |
| |
| function createAndPlayTestAnimation(elements, timeline_orientation) { |
| const effect = new KeyframeEffect( |
| elements.box, |
| [{transform: 'translateY(0)'}, {transform: 'translateY(200px)'}], { |
| duration: 1000, |
| }); |
| |
| const timeline = new ScrollTimeline({ |
| scrollSource: elements.scroller, |
| orientation: timeline_orientation |
| }); |
| const animation = new WorkletAnimation('passthrough', effect, timeline); |
| animation.play(); |
| return animation; |
| } |
| |
| setup(setupAndRegisterTests, {explicit_done: true}); |
| |
| function setupAndRegisterTests() { |
| registerPassthroughAnimator().then(() => { |
| // Note that block horizontal-tb is tested implicitly in the basic |
| // ScrollTimeline tests (as it is the default). |
| async_test( |
| block_vertical_lr, |
| 'A block ScrollTimeline should produce the correct current time for vertical-lr'); |
| async_test( |
| block_vertical_rl, |
| 'A block ScrollTimeline should produce the correct current time for vertical-rl'); |
| // Again, inline for horizontal-tb and direction: ltr is the default |
| // inline mode and so is tested elsewhere. |
| async_test( |
| inline_horizontal_tb_rtl, |
| 'An inline ScrollTimeline should produce the correct current time for horizontal-tb and direction: rtl'); |
| async_test( |
| inline_vertical_writing_mode_ltr, |
| 'An inline ScrollTimeline should produce the correct current time for vertical writing mode'); |
| async_test( |
| inline_vertical_writing_mode_rtl, |
| 'An inline ScrollTimeline should produce the correct current time for vertical writing mode and direction: rtl'); |
| done(); |
| }); |
| } |
| |
| function block_vertical_lr(t) { |
| const elements = createTestDOM(true, 'vertical-lr', 'ltr'); |
| const animation = createAndPlayTestAnimation(elements, 'block'); |
| |
| // Move the scroller to the 25% point. |
| const maxScroll = |
| elements.scroller.scrollWidth - elements.scroller.clientWidth; |
| elements.scroller.scrollLeft = 0.25 * maxScroll; |
| |
| waitForNotNullLocalTime(animation).then(t.step_func_done(() => { |
| assert_equals( |
| getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); |
| })); |
| } |
| |
| function block_vertical_rl(t) { |
| const elements = createTestDOM(true, 'vertical-rl', 'ltr'); |
| const animation = createAndPlayTestAnimation(elements, 'block'); |
| |
| // Move the scroller to the left 25% point, since it is vertical-rl, |
| // i.e leftwards overflow direction, scrollLeft is -25% point. |
| const maxScroll = |
| elements.scroller.scrollWidth - elements.scroller.clientWidth; |
| elements.scroller.scrollLeft = -0.25 * maxScroll; |
| |
| waitForNotNullLocalTime(animation).then(t.step_func_done(() => { |
| assert_equals( |
| getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); |
| })); |
| } |
| |
| function inline_horizontal_tb_rtl(t) { |
| const elements = createTestDOM(true, 'horizontal-tb', 'rtl'); |
| const animation = createAndPlayTestAnimation(elements, 'inline'); |
| |
| // Move the scroller to the left 25% point, since it is direction: rtl, |
| // i.e leftwards overflow direction, scrollLeft is -25% point. |
| const maxScroll = |
| elements.scroller.scrollWidth - elements.scroller.clientWidth; |
| elements.scroller.scrollLeft = -0.25 * maxScroll; |
| |
| waitForNotNullLocalTime(animation).then(t.step_func_done(() => { |
| assert_equals( |
| getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); |
| })); |
| } |
| |
| function inline_vertical_writing_mode_ltr(t) { |
| const elements = createTestDOM(false, 'vertical-lr', 'ltr'); |
| const animation = createAndPlayTestAnimation(elements, 'inline'); |
| |
| // Move the scroller to the 25% point. |
| const maxScroll = |
| elements.scroller.scrollHeight - elements.scroller.clientHeight; |
| elements.scroller.scrollTop = 0.25 * maxScroll; |
| |
| waitForNotNullLocalTime(animation).then(t.step_func_done(() => { |
| assert_equals( |
| getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); |
| })); |
| } |
| |
| function inline_vertical_writing_mode_rtl(t) { |
| const elements = createTestDOM(false, 'vertical-lr', 'rtl'); |
| const animation = createAndPlayTestAnimation(elements, 'inline'); |
| |
| // Move the scroller to the top 25% point, since it is a vertical-lr writing mode |
| // and direction: rtl, i.e upwards overflow direction, scrollTop is -25% point. |
| const maxScroll = |
| elements.scroller.scrollHeight - elements.scroller.clientHeight; |
| elements.scroller.scrollTop = -0.25 * maxScroll; |
| |
| waitForNotNullLocalTime(animation).then(t.step_func_done(() => { |
| assert_equals( |
| getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)'); |
| })); |
| } |
| </script> |