1 files changed, 148 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/scroll-timelines/current-time-writing-modes.html b/testing/web-platform/tests/scroll-animations/scroll-timelines/current-time-writing-modes.html
new file mode 100644
index 0000000000..d18abcd48f
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/scroll-timelines/current-time-writing-modes.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>ScrollTimeline current time algorithm - interaction with writing modes</title>
+<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="./testcommon.js"></script>
+
+<body></body>
+
+<script>
+'use strict';
+
+promise_test(async t => {
+  const scrollerOverrides = new Map([['direction', 'rtl']]);
+  const scroller = setupScrollTimelineTest(scrollerOverrides);
+  const verticalScrollRange = scroller.scrollHeight - scroller.clientHeight;
+  const horizontalScrollRange = scroller.scrollWidth - scroller.clientWidth;
+
+  const blockScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'block'});
+  const inlineScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'inline'});
+  const horizontalScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'horizontal'});
+  const verticalScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'vertical'});
+
+  // Unscrolled, all timelines should read a current time of 0 even though the
+  // X-axis will have started at the right hand side for rtl.
+  assert_percents_equal(blockScrollTimeline.currentTime, 0,
+                        'Unscrolled block timeline');
+  assert_percents_equal(inlineScrollTimeline.currentTime, 0,
+                        'Unscrolled inline timeline');
+  assert_percents_equal(horizontalScrollTimeline.currentTime, 0,
+                        'Unscrolled horizontal timeline');
+  assert_percents_equal(verticalScrollTimeline.currentTime, 0,
+                        'Unscrolled vertical timeline');
+
+  // The offset in the inline/horizontal direction should be inverted. The
+  // block/vertical direction should be unaffected.
+  scroller.scrollTop = 0.1 * verticalScrollRange;
+  scroller.scrollLeft = -0.8 * horizontalScrollRange;
+  // Wait for new animation frame  which allows the timeline to compute new
+  // current time.
+  await waitForNextFrame();
+
+  assert_percents_equal(blockScrollTimeline.currentTime, 10,
+                        'Scrolled block timeline');
+  assert_percents_equal(inlineScrollTimeline.currentTime, 80,
+                        'Scrolled inline timeline');
+  assert_percents_equal(horizontalScrollTimeline.currentTime, 80,
+                        'Scrolled horizontal timeline');
+  assert_percents_equal(verticalScrollTimeline.currentTime, 10,
+                        'Scrolled vertical timeline');
+}, 'currentTime handles direction: rtl correctly');
+
+promise_test(async t => {
+  const scrollerOverrides = new Map([['writing-mode', 'vertical-rl']]);
+  const scroller = setupScrollTimelineTest(scrollerOverrides);
+  const verticalScrollRange = scroller.scrollHeight - scroller.clientHeight;
+  const horizontalScrollRange = scroller.scrollWidth - scroller.clientWidth;
+
+  const blockScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'block'});
+  const inlineScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'inline'});
+  const horizontalScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'horizontal'});
+  const verticalScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'vertical'});
+
+  // Unscrolled, all timelines should read a current time of 0 even though the
+  // X-axis will have started at the right hand side for vertical-rl.
+  assert_percents_equal(blockScrollTimeline.currentTime, 0,
+                        'Unscrolled block timeline');
+  assert_percents_equal(inlineScrollTimeline.currentTime, 0,
+                        'Unscrolled inline timeline');
+  assert_percents_equal(horizontalScrollTimeline.currentTime, 0,
+                        'Unscrolled horizontal timeline');
+  assert_percents_equal(verticalScrollTimeline.currentTime, 0,
+                        'Unscrolled vertical timeline');
+
+  // For vertical-rl, the X-axis starts on the right-hand-side and is the block
+  // axis. The Y-axis is normal but is the inline axis. For the
+  // horizontal/vertical cases, horizontal starts on the right-hand-side and
+  // vertical is normal.
+  scroller.scrollTop = 0.1 * verticalScrollRange;
+  scroller.scrollLeft = -0.8 * horizontalScrollRange;
+  // Wait for new animation frame  which allows the timeline to compute new
+  // current time.
+  await waitForNextFrame();
+
+  assert_percents_equal(blockScrollTimeline.currentTime, 80,
+                        'Scrolled block timeline');
+  assert_percents_equal(inlineScrollTimeline.currentTime, 10,
+                        'Scrolled inline timeline');
+  assert_percents_equal(horizontalScrollTimeline.currentTime, 80,
+                        'Scrolled horizontal timeline');
+  assert_percents_equal(verticalScrollTimeline.currentTime, 10,
+                        'Scrolled vertical timeline');
+}, 'currentTime handles writing-mode: vertical-rl correctly');
+
+promise_test(async t => {
+  const scrollerOverrides = new Map([['writing-mode', 'vertical-lr']]);
+  const scroller = setupScrollTimelineTest(scrollerOverrides);
+  const verticalScrollRange = scroller.scrollHeight - scroller.clientHeight;
+  const horizontalScrollRange = scroller.scrollWidth - scroller.clientWidth;
+
+  const blockScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'block'});
+  const inlineScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'inline'});
+  const horizontalScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'horizontal'});
+  const verticalScrollTimeline = new ScrollTimeline(
+      {source: scroller, axis: 'vertical'});
+
+  // Unscrolled, all timelines should read a current time of 0.
+  assert_percents_equal(blockScrollTimeline.currentTime, 0,
+                        'Unscrolled block timeline');
+  assert_percents_equal(inlineScrollTimeline.currentTime, 0,
+                        'Unscrolled inline timeline');
+  assert_percents_equal(horizontalScrollTimeline.currentTime, 0,
+                        'Unscrolled horizontal timeline');
+  assert_percents_equal(verticalScrollTimeline.currentTime, 0,
+                        'Unscrolled vertical timeline');
+
+  // For vertical-lr, both axes start at their 'normal' positions but the X-axis
+  // is the block direction and the Y-axis is the inline direction. This does
+  // not affect horizontal/vertical.
+  scroller.scrollTop = 0.1 * verticalScrollRange;
+  scroller.scrollLeft = 0.2 * horizontalScrollRange;
+  // Wait for new animation frame  which allows the timeline to compute new
+  // current time.
+  await waitForNextFrame();
+
+  assert_percents_equal(blockScrollTimeline.currentTime, 20,
+                        'Scrolled block timeline');
+  assert_percents_equal(inlineScrollTimeline.currentTime, 10,
+                        'Scrolled inline timeline');
+  assert_percents_equal(horizontalScrollTimeline.currentTime, 20,
+                        'Scrolled horizontal timeline');
+  assert_percents_equal(verticalScrollTimeline.currentTime, 10,
+                        'Scrolled vertical timeline');
+}, 'currentTime handles writing-mode: vertical-lr correctly');
+</script>