current-time-writing-modes.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /scroll-animations/scroll-timelines/current-time-writing-modes.html - WPT Dashboard Interop Dashboard

<!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: 'x'});

  const verticalScrollTimeline = new ScrollTimeline(

      {source: scroller, axis: 'y'});

  // 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: 'x'});

  const verticalScrollTimeline = new ScrollTimeline(

      {source: scroller, axis: 'y'});

  // 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: 'x'});

  const verticalScrollTimeline = new ScrollTimeline(

      {source: scroller, axis: 'y'});

  // 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>