<!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>
Codebase Browser
chromium