Basic ScrollTimeline implementation for Animation Worklet

third_party/WebKit/Source/core/animation/ScrollTimelineTest.cpp

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "core/animation/ScrollTimeline.h"
+
+#include "bindings/core/v8/ExceptionState.h"
+#include "core/animation/ScrollTimelineOptions.h"
+#include "core/dom/Document.h"
+#include "core/frame/FrameView.h"
+#include "core/layout/LayoutBoxModelObject.h"
+#include "core/paint/PaintLayerScrollableArea.h"
+#include "core/testing/DummyPageHolder.h"
+#include "platform/wtf/text/WTFString.h"
+#include "testing/gtest/include/gtest/gtest.h"
+
+namespace blink {
+
+class ScrollTimelineTest : public ::testing::Test {
+ protected:
+  void SetUp() override { page_holder_ = DummyPageHolder::Create(); }
+
+  Document& GetDocument() { return page_holder_->GetDocument(); }
+
+  void SetInnerHTML(const String& html) {
+    GetDocument().documentElement()->setInnerHTML(html);
+    GetDocument().View()->UpdateAllLifecyclePhases();
+  }
+
+  ScrollTimelineOptions CreateOptions(Element* scrollSource = nullptr,
+                                      double time_range = 0,
+                                      String orientation = "auto") {
+    ScrollTimelineOptions options;
+    options.setScrollSource(scrollSource);
+    options.setTimeRange(
+        DoubleOrScrollTimelineAutoKeyword::fromDouble(time_range));
+    options.setOrientation(orientation);
+    return options;
+  }
+
+ private:
+  std::unique_ptr<DummyPageHolder> page_holder_;
+};
+
+TEST_F(ScrollTimelineTest, CreateScrollTimeline) {
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  ASSERT_TRUE(scroller);
+
+  ScrollTimelineOptions options = CreateOptions(scroller, 100, "inline");
+  DummyExceptionStateForTesting exception_state;
+  ScrollTimeline* scroll_timeline =
+      ScrollTimeline::Create(GetDocument(), options, exception_state);
+  ASSERT_TRUE(scroll_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  EXPECT_EQ(scroller, scroll_timeline->scrollSource());
+  EXPECT_EQ("inline", scroll_timeline->orientation());
+  DoubleOrScrollTimelineAutoKeyword time_range;
+  scroll_timeline->timeRange(time_range);
+  EXPECT_TRUE(time_range.isDouble());
+  EXPECT_EQ(100, time_range.getAsDouble());
+}
+
+TEST_F(ScrollTimelineTest, CreateScrollTimelineWithoutScrollingSource) {
+  ScrollTimelineOptions options = CreateOptions(nullptr);
+  DummyExceptionStateForTesting exception_state;
+  ScrollTimeline* scroll_timeline =
+      ScrollTimeline::Create(GetDocument(), options, exception_state);
+  ASSERT_TRUE(scroll_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  EXPECT_EQ(GetDocument().scrollingElement(), scroll_timeline->scrollSource());
+}
+
+TEST_F(ScrollTimelineTest, CreateScrollTimelineWithInvalidOrientation) {
+  ScrollTimelineOptions options = CreateOptions(nullptr, 100, "invalid");
+  DummyExceptionStateForTesting exception_state;
+  EXPECT_FALSE(ScrollTimeline::Create(GetDocument(), options, exception_state));
+  EXPECT_TRUE(exception_state.HadException());
+}
+
+// TODO(smcgruer): Remove once 'auto' timeRange is supported.
+TEST_F(ScrollTimelineTest, CreateScrollTimelineWithInvalidTimeRange) {
+  ScrollTimelineOptions options;
+  options.setTimeRange(
+      DoubleOrScrollTimelineAutoKeyword::fromScrollTimelineAutoKeyword("auto"));
+  DummyExceptionStateForTesting exception_state;
+  EXPECT_FALSE(ScrollTimeline::Create(GetDocument(), options, exception_state));
+  EXPECT_TRUE(exception_state.HadException());
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeCorrect) {
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  PaintLayerScrollableArea* scrollable_area =
+      scroller->GetLayoutBoxModelObject()->GetScrollableArea();
+  ASSERT_TRUE(scroller);
+  ASSERT_TRUE(scrollable_area);
+
+  DummyExceptionStateForTesting exception_state;
+
+  // For simplicity, we set the timeRange such that currentTime maps directly to
+  // the value scrolled. We have a square scroller/contents, so can just compute
+  // one edge and use it for inline and block.
+  double scroller_size = scroller->scrollHeight() - scroller->clientHeight();
+
+  ScrollTimelineOptions block_options =
+      CreateOptions(scroller, scroller_size, "block");
+  ScrollTimeline* block_timeline =
+      ScrollTimeline::Create(GetDocument(), block_options, exception_state);
+  EXPECT_TRUE(block_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  ScrollTimelineOptions inline_options =
+      CreateOptions(scroller, scroller_size, "inline");
+  ScrollTimeline* inline_timeline =
+      ScrollTimeline::Create(GetDocument(), inline_options, exception_state);
+  EXPECT_TRUE(inline_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // Unscrolled, both timelines should read a current time of 0.
+  EXPECT_DOUBLE_EQ(0, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(0, inline_timeline->currentTime());
+
+  // Now do some scrolling and make sure that the ScrollTimelines update.
+  //
+  // As noted above, we have mapped timeRange such that currentTime should just
+  // be the scroll offset.
+  scrollable_area->ScrollToAbsolutePosition(FloatPoint(75, 50));
+  ASSERT_EQ(75.0, scrollable_area->ScrollPosition().X());
+  ASSERT_EQ(50.0, scrollable_area->ScrollPosition().Y());
+
+  EXPECT_DOUBLE_EQ(50, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(75, inline_timeline->currentTime());
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeForInlineElementIsNaN) {
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; "
+      "display: inline; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  ASSERT_TRUE(scroller);
+
+  // We should still be able to create a timeline with an inline element as the
+  // scrollSource.
+  ScrollTimelineOptions options = CreateOptions(scroller);
+  DummyExceptionStateForTesting exception_state;
+  ScrollTimeline* scroll_timeline =
+      ScrollTimeline::Create(GetDocument(), options, exception_state);
+  EXPECT_TRUE(scroll_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // However it should return NaN for the currentTime.
+  EXPECT_TRUE(std::isnan(scroll_timeline->currentTime()));
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeForDisplayNoneElementIsNaN) {
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; "
+      "display: none; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  ASSERT_TRUE(scroller);
+
+  // We should still be able to create a timeline with a display:none element as
+  // the scrollSource.
+  ScrollTimelineOptions options = CreateOptions(scroller);
+  DummyExceptionStateForTesting exception_state;
+  ScrollTimeline* scroll_timeline =
+      ScrollTimeline::Create(GetDocument(), options, exception_state);
+  EXPECT_TRUE(scroll_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // However it should return NaN for the currentTime.
+  EXPECT_TRUE(std::isnan(scroll_timeline->currentTime()));
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeForNonAttachedElementIsNaN) {
+  // We manually create an entire overflow element tree, but do not attach it to
+  // the document.
+  Element* scroller = GetDocument().createElement("div");
+  Element* content = GetDocument().createElement("div");
+  ASSERT_TRUE(scroller);
+  ASSERT_TRUE(content);
+
+  scroller->SetInlineStyleProperty(CSSPropertyOverflow, CSSValueAuto);
+  scroller->SetInlineStyleProperty(CSSPropertyHeight, 100,
+                                   CSSPrimitiveValue::UnitType::kPixels);
+  scroller->SetInlineStyleProperty(CSSPropertyWidth, 100,
+                                   CSSPrimitiveValue::UnitType::kPixels);
+  content->SetInlineStyleProperty(CSSPropertyHeight, 250,
+                                  CSSPrimitiveValue::UnitType::kPixels);
+  content->SetInlineStyleProperty(CSSPropertyWidth, 250,
+                                  CSSPrimitiveValue::UnitType::kPixels);
+  scroller->AppendChild(content);
+
+  GetDocument().View()->UpdateAllLifecyclePhases();
+
+  // We should still be able to create a timeline with an unattached element as
+  // the scrollSource.
+  ScrollTimelineOptions options = CreateOptions(scroller);
+  DummyExceptionStateForTesting exception_state;
+  ScrollTimeline* scroll_timeline =
+      ScrollTimeline::Create(GetDocument(), options, exception_state);
+  EXPECT_TRUE(scroll_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // However it should return NaN for the currentTime.
+  EXPECT_TRUE(std::isnan(scroll_timeline->currentTime()));
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeForNonScrollerIsNaN) {
+  // The so-called scroller here is deliberately overflow: visible.
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: visible; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  ASSERT_TRUE(scroller);
+
+  // We should still be able to create a timeline with a non-scroller as the
+  // scrollSource.
+  ScrollTimelineOptions options = CreateOptions(scroller);
+  DummyExceptionStateForTesting exception_state;
+  ScrollTimeline* scroll_timeline =
+      ScrollTimeline::Create(GetDocument(), options, exception_state);
+  EXPECT_TRUE(scroll_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // However it should return NaN for the currentTime.
+  EXPECT_TRUE(std::isnan(scroll_timeline->currentTime()));
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeSelectsCorrectAxisForAutoOrientation) {
+  // This tests basic block/inline selection, ignoring writing mode. There are
+  // writing-mode specific tests below for orientation.
+  SetInnerHTML(
+      "<style>#scroller1 { height: 100px; width: 100px; overflow-y: auto; }"
+      "#scroller2 { height: 100px; width: 100px; overflow-x: auto; }"
+      "#scroller3 { height: 100px; width: 100px; overflow: auto; }"
+      "#content1 { height: 250px; width: 50px; }"
+      "#content2 { height: 50px; width: 250px; }"
+      "#content3 { height: 250px; width: 250px; }</style>"
+      "<div id='scroller1'><div id='content1'></div></div>"
+      "<div id='scroller2'><div id='content2'></div></div>"
+      "<div id='scroller3'><div id='content3'></div></div>");
+
+  Element* scroller1 = GetDocument().getElementById("scroller1");
+  Element* scroller2 = GetDocument().getElementById("scroller2");
+  Element* scroller3 = GetDocument().getElementById("scroller3");
+  ASSERT_TRUE(scroller1);
+  ASSERT_TRUE(scroller2);
+  ASSERT_TRUE(scroller3);
+
+  DummyExceptionStateForTesting exception_state;
+
+  ScrollTimelineOptions options1 = CreateOptions(
+      scroller1, scroller1->scrollHeight() - scroller1->clientHeight());
+  ScrollTimeline* scroll_timeline1 =
+      ScrollTimeline::Create(GetDocument(), options1, exception_state);
+  ASSERT_TRUE(scroll_timeline1);
+
+  ScrollTimelineOptions options2 = CreateOptions(
+      scroller2, scroller2->scrollWidth() - scroller2->clientWidth());
+  ScrollTimeline* scroll_timeline2 =
+      ScrollTimeline::Create(GetDocument(), options2, exception_state);
+  ASSERT_TRUE(scroll_timeline2);
+
+  ScrollTimelineOptions options3 = CreateOptions(
+      scroller3, scroller3->scrollHeight() - scroller3->clientHeight());
+  ScrollTimeline* scroll_timeline3 =
+      ScrollTimeline::Create(GetDocument(), options3, exception_state);
+  ASSERT_TRUE(scroll_timeline3);
+
+  EXPECT_FALSE(exception_state.HadException());
+
+  PaintLayerScrollableArea* scrollable_area1 =
+      scroller1->GetLayoutBoxModelObject()->GetScrollableArea();
+  PaintLayerScrollableArea* scrollable_area2 =
+      scroller2->GetLayoutBoxModelObject()->GetScrollableArea();
+  PaintLayerScrollableArea* scrollable_area3 =
+      scroller3->GetLayoutBoxModelObject()->GetScrollableArea();
+  ASSERT_TRUE(scrollable_area1);
+  ASSERT_TRUE(scrollable_area2);
+  ASSERT_TRUE(scrollable_area3);
+
+  // The first scroller is only scrollable in the block direction so the 'auto'
+  // orientation should resolve to block.
+  scrollable_area1->ScrollToAbsolutePosition(FloatPoint(0, 50));
+  ASSERT_EQ(0.0, scrollable_area1->ScrollPosition().X());
+  ASSERT_EQ(50.0, scrollable_area1->ScrollPosition().Y());
+  EXPECT_DOUBLE_EQ(50, scroll_timeline1->currentTime());
+
+  // The second scroller is only scrollable in the inline direction so the
+  // 'auto' orientation should resolve to inline.
+  scrollable_area2->ScrollToAbsolutePosition(FloatPoint(75, 0));
+  ASSERT_EQ(75.0, scrollable_area2->ScrollPosition().X());
+  ASSERT_EQ(0.0, scrollable_area2->ScrollPosition().Y());
+  EXPECT_DOUBLE_EQ(75, scroll_timeline2->currentTime());
+
+  // The third scroller is scrollable in both axes, so the 'auto' orientation
+  // should resolve to block.
+  scrollable_area3->ScrollToAbsolutePosition(FloatPoint(75, 50));
+  ASSERT_EQ(75.0, scrollable_area3->ScrollPosition().X());
+  ASSERT_EQ(50.0, scrollable_area3->ScrollPosition().Y());
+  EXPECT_DOUBLE_EQ(50, scroll_timeline3->currentTime());
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeAdjustsForTimeRangeCorrectly) {
+  // It is unfortunately difficult to calculate what scroll offset results in an
+  // exact currentTime. Scrolling is caluclated in integers which allows for the
+  // possibility of rounding, and scrollbar widths differ between platforms
+  // which means it is not possible to ensure a divisible scroller size.
+  //
+  // Instead we make the scroller content big enough that a 1-pixel rounding
+  // difference results in a negligible difference in the output value.
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; }"
+      "#content { height: 1000px; width: 1000px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  PaintLayerScrollableArea* scrollable_area =
+      scroller->GetLayoutBoxModelObject()->GetScrollableArea();
+  ASSERT_TRUE(scroller);
+  ASSERT_TRUE(scrollable_area);
+
+  ScrollTimelineOptions options = CreateOptions(scroller, 100);
+  DummyExceptionStateForTesting exception_state;
+  ScrollTimeline* scroll_timeline =
+      ScrollTimeline::Create(GetDocument(), options, exception_state);
+  ASSERT_TRUE(scroll_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // Mapping timeRange to 100 gives a form of 'percentage scrolled', so
+  // calculate where the 50% scroll mark would be.
+  double halfway_y = (scroller->scrollHeight() - scroller->clientHeight()) / 2.;
+  scrollable_area->ScrollToAbsolutePosition(
+      FloatPoint(0, std::round(halfway_y)));
+
+  EXPECT_NEAR(50, scroll_timeline->currentTime(), 0.5);
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeHandlesRtlDirection) {
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; "
+      "direction: rtl; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  PaintLayerScrollableArea* scrollable_area =
+      scroller->GetLayoutBoxModelObject()->GetScrollableArea();
+  ASSERT_TRUE(scroller);
+  ASSERT_TRUE(scrollable_area);
+
+  DummyExceptionStateForTesting exception_state;
+
+  // For simplicity, we set the timeRange such that currentTime maps directly to
+  // the value scrolled. We have a square scroller/contents, so can just compute
+  // one edge and use it for inline and block.
+  double scroller_size = scroller->scrollHeight() - scroller->clientHeight();
+
+  ScrollTimelineOptions block_options =
+      CreateOptions(scroller, scroller_size, "block");
+  ScrollTimeline* block_timeline =
+      ScrollTimeline::Create(GetDocument(), block_options, exception_state);
+  EXPECT_TRUE(block_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  ScrollTimelineOptions inline_options =
+      CreateOptions(scroller, scroller_size, "inline");
+  ScrollTimeline* inline_timeline =
+      ScrollTimeline::Create(GetDocument(), inline_options, exception_state);
+  EXPECT_TRUE(inline_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // Unscrolled, both timelines should read a current time of 0 even though the
+  // X-axis will have started at the right hand side for rtl.
+  EXPECT_DOUBLE_EQ(0, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(0, inline_timeline->currentTime());
+
+  // Absolute position scroll ignores the writing mode, so the actual offset in
+  // the inline direction should be inverted. The block direction should be
+  // unaffected.
+  scrollable_area->ScrollToAbsolutePosition(FloatPoint(75, 50));
+  ASSERT_EQ(75.0, scrollable_area->ScrollPosition().X());
+  ASSERT_EQ(50.0, scrollable_area->ScrollPosition().Y());
+
+  EXPECT_DOUBLE_EQ(50, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(scroller_size - 75, inline_timeline->currentTime());
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeHandlesVerticalRlWritingMode) {
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; "
+      "writing-mode: vertical-rl; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  PaintLayerScrollableArea* scrollable_area =
+      scroller->GetLayoutBoxModelObject()->GetScrollableArea();
+  ASSERT_TRUE(scroller);
+  ASSERT_TRUE(scrollable_area);
+
+  DummyExceptionStateForTesting exception_state;
+
+  // For simplicity, we set the timeRange such that currentTime maps directly to
+  // the value scrolled. We have a square scroller/contents, so can just compute
+  // one edge and use it for inline and block.
+  double scroller_size = scroller->scrollHeight() - scroller->clientHeight();
+
+  ScrollTimelineOptions block_options =
+      CreateOptions(scroller, scroller_size, "block");
+  ScrollTimeline* block_timeline =
+      ScrollTimeline::Create(GetDocument(), block_options, exception_state);
+  EXPECT_TRUE(block_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  ScrollTimelineOptions inline_options =
+      CreateOptions(scroller, scroller_size, "inline");
+  ScrollTimeline* inline_timeline =
+      ScrollTimeline::Create(GetDocument(), inline_options, exception_state);
+  EXPECT_TRUE(inline_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  ScrollTimelineOptions auto_options =
+      CreateOptions(scroller, scroller_size, "auto");
+  ScrollTimeline* auto_timeline =
+      ScrollTimeline::Create(GetDocument(), auto_options, exception_state);
+  EXPECT_TRUE(auto_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // Unscrolled, all three timelines should read a current time of 0 even though
+  // the X-axis will have started at the right hand side for vertical-rl.
+  EXPECT_DOUBLE_EQ(0, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(0, inline_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(0, auto_timeline->currentTime());
+
+  // 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.
+  scrollable_area->ScrollToAbsolutePosition(FloatPoint(75, 50));
+  ASSERT_EQ(75.0, scrollable_area->ScrollPosition().X());
+  ASSERT_EQ(50.0, scrollable_area->ScrollPosition().Y());
+
+  EXPECT_DOUBLE_EQ(scroller_size - 75, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(50, inline_timeline->currentTime());
+  // As both axes are scrollable, 'auto' should select the block axis.
+  EXPECT_DOUBLE_EQ(scroller_size - 75, auto_timeline->currentTime());
+}
+
+TEST_F(ScrollTimelineTest, CurrentTimeHandlesVerticalLrWritingMode) {
+  SetInnerHTML(
+      "<style>#scroller { height: 100px; width: 100px; overflow: auto; "
+      "writing-mode: vertical-lr; }"
+      "#content { height: 250px; width: 250px; }</style>"
+      "<div id='scroller'><div id='content'></div></div>");
+
+  Element* scroller = GetDocument().getElementById("scroller");
+  PaintLayerScrollableArea* scrollable_area =
+      scroller->GetLayoutBoxModelObject()->GetScrollableArea();
+  ASSERT_TRUE(scroller);
+  ASSERT_TRUE(scrollable_area);
+
+  DummyExceptionStateForTesting exception_state;
+
+  // For simplicity, we set the timeRange such that currentTime maps directly to
+  // the value scrolled. We have a square scroller/contents, so can just compute
+  // one edge and use it for inline and block.
+  double scroller_size = scroller->scrollHeight() - scroller->clientHeight();
+
+  ScrollTimelineOptions block_options =
+      CreateOptions(scroller, scroller_size, "block");
+  ScrollTimeline* block_timeline =
+      ScrollTimeline::Create(GetDocument(), block_options, exception_state);
+  EXPECT_TRUE(block_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  ScrollTimelineOptions inline_options =
+      CreateOptions(scroller, scroller_size, "inline");
+  ScrollTimeline* inline_timeline =
+      ScrollTimeline::Create(GetDocument(), inline_options, exception_state);
+  EXPECT_TRUE(inline_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  ScrollTimelineOptions auto_options =
+      CreateOptions(scroller, scroller_size, "auto");
+  ScrollTimeline* auto_timeline =
+      ScrollTimeline::Create(GetDocument(), auto_options, exception_state);
+  EXPECT_TRUE(auto_timeline);
+  EXPECT_FALSE(exception_state.HadException());
+
+  // Unscrolled, all three timelines should read a current time of 0.
+  EXPECT_DOUBLE_EQ(0, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(0, inline_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(0, auto_timeline->currentTime());
+
+  // For vertical-rl, both axes start at their 'normal' positions but the X-axis
+  // is the block direction and the Y-axis is the inline direction.
+  scrollable_area->ScrollToAbsolutePosition(FloatPoint(75, 50));
+  ASSERT_EQ(75.0, scrollable_area->ScrollPosition().X());
+  ASSERT_EQ(50.0, scrollable_area->ScrollPosition().Y());
+
+  EXPECT_DOUBLE_EQ(75, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(50, inline_timeline->currentTime());
+  // As both axes are scrollable, 'auto' should select the block axis.
+  EXPECT_DOUBLE_EQ(75, auto_timeline->currentTime());
+}
+
+}  // namespace blink