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 = "block") {
+    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());

[alancutter (OOO until 2018), 2017/06/08 05:00:32]

These tests should be testharness.js tests where possible so they may contribute
to the WPT test suite to help ensure cross browser compatibility of the new
feature.

[smcgruer, 2017/06/08 14:43:47]

I believe all are covered by WPT-compatible layout tests as well. (See
scrolltimeline-creation.html, scrolltimeline-currenttime.html,
scrolltimeline-currenttime-nan.html). Do you wish the unittests removed? 

[alancutter (OOO until 2018), 2017/06/09 04:06:19]

I find unit tests to be more maintenance heavy than LayoutTests, let's avoid
having them if they're redundant.

[smcgruer, 2017/06/22 14:34:25]

Done.

+}
+
+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);
+  ASSERT_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);
+  ASSERT_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);
+  ASSERT_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);
+  ASSERT_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, 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());
+
+  // Unscrolled, both 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());
+
+  // 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());
+}
+
+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());
+
+  // Unscrolled, both timelines should read a current time of 0.
+  EXPECT_DOUBLE_EQ(0, block_timeline->currentTime());
+  EXPECT_DOUBLE_EQ(0, inline_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());
+}
+
+}  // namespace blink