Implement Element.scrollIntoView for scroll-behavior: smooth.

third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp

Index: third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp
diff --git a/third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp b/third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..39d4d7ae5714031e5ca159cd5152517e580090ad
--- /dev/null
+++ b/third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp
@@ -0,0 +1,199 @@
+// 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 "public/web/WebScriptSource.h"
+#include "testing/gtest/include/gtest/gtest.h"
+#include "web/WebLocalFrameImpl.h"
+#include "web/tests/sim/SimCompositor.h"
+#include "web/tests/sim/SimDisplayItemList.h"
+#include "web/tests/sim/SimRequest.h"
+#include "web/tests/sim/SimTest.h"
+
+namespace blink {
+
+namespace {
+
+class SmoothScrollTest : public SimTest {};
+
+TEST_F(SmoothScrollTest, InstantScroll) {
+  v8::HandleScope HandleScope(v8::Isolate::GetCurrent());
+  WebView().Resize(WebSize(800, 600));
+  SimRequest request("https://example.com/test.html", "text/html");
+  LoadURL("https://example.com/test.html");
+  request.Complete(
+      "<div id='space' style='height: 1000px'></div>"
+      "<div id='content' style='height: 1000px'></div>");
+
+  Compositor().BeginFrame();
+  ASSERT_EQ(Window().scrollY(), 0);
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content').scrollIntoView();"));
+
+  Compositor().BeginFrame();
+  Element* content = GetDocument().getElementById("content");
+  ASSERT_EQ(Window().scrollY(), content->OffsetTop());
+}
+
+TEST_F(SmoothScrollTest, SmoothScroll) {
+  v8::HandleScope HandleScope(v8::Isolate::GetCurrent());
+  WebView().Resize(WebSize(800, 600));
+  SimRequest request("https://example.com/test.html", "text/html");
+  LoadURL("https://example.com/test.html");
+  request.Complete(
+      "<div id='space' style='height: 1000px'></div>"
+      "<div id='content' style='height: 1000px'></div>");
+
+  Compositor().BeginFrame();
+  ASSERT_EQ(Window().scrollY(), 0);
+
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content').scrollIntoView("
+                      "{block: 'start', behavior: 'smooth'});"));
+
+  // Scrolling the container
+  Compositor().BeginFrame();  // update run_state_.
+  Compositor().BeginFrame();  // Set start_time = now.
+  Compositor().BeginFrame(0.2);
+  ASSERT_GT(Window().scrollY(), 250);

[bokan, 2017/05/15 17:15:28]

These tests should be deterministic since we control time now - make all these
an ASSERT_EQ (or ASSERT_NEAR if floats are getting in the way)

[sunyunjia, 2017/05/19 16:24:29]

Done.

+  ASSERT_LT(Window().scrollY(), 350);
+
+  // Finish scrolling the container
+  Compositor().BeginFrame(1);
+  Element* content = GetDocument().getElementById("content");
+  ASSERT_EQ(Window().scrollY(), content->OffsetTop());
+}
+
+TEST_F(SmoothScrollTest, NestedContainer) {
+  v8::HandleScope HandleScope(v8::Isolate::GetCurrent());
+  WebView().Resize(WebSize(800, 600));
+  SimRequest request("https://example.com/test.html", "text/html");
+  LoadURL("https://example.com/test.html");
+  request.Complete(
+      "<div id='space' style='height: 1000px'></div>"
+      "<div id='container' style='height: 600px; overflow: scroll'>"
+      "  <div id='space1' style='height: 1000px'></div>"
+      "  <div id='content' style='height: 1000px'></div>"
+      "</div>");
+
+  Compositor().BeginFrame();
+  Element* container = GetDocument().getElementById("container");
+
+  ASSERT_EQ(Window().scrollY(), 0);
+  ASSERT_EQ(container->scrollTop(), 0);
+
+  MainFrame().ExecuteScriptAndReturnValue(

[bokan, 2017/05/15 17:15:28]

Elliott's suggestion was to avoid calling things via JS in SimTests. Prefer to
make these calls via C++ unless there's a reason not to.

[sunyunjia, 2017/05/19 16:24:29]

Done.

+      WebScriptSource("document.getElementById('content').scrollIntoView("
+                      "{block: 'start', behavior: 'smooth'});"));
+
+  // Scrolling the outer container
+  Compositor().BeginFrame();  // update run_state_.
+  Compositor().BeginFrame();  // Set start_time = now.
+  Compositor().BeginFrame(0.2);
+  ASSERT_GT(Window().scrollY(), 250);
+  ASSERT_LT(Window().scrollY(), 350);
+  ASSERT_EQ(container->scrollTop(), 0);
+
+  // Finish scrolling the outer container
+  Compositor().BeginFrame(1);
+  ASSERT_EQ(Window().scrollY(), container->OffsetTop());
+  ASSERT_LE(container->scrollTop(), 20);
+
+  // Scrolling the inner container
+  Compositor().BeginFrame();  // Set start_time = now.
+  Compositor().BeginFrame(0.2);
+  ASSERT_GE(container->scrollTop(), 250);
+  ASSERT_LE(container->scrollTop(), 350);
+
+  // Finish scrolling the inner container
+  Compositor().BeginFrame(1);
+  Element* content = GetDocument().getElementById("content");
+  ASSERT_EQ(container->scrollTop(),
+            content->OffsetTop() - container->OffsetTop());
+}
+
+TEST_F(SmoothScrollTest, NewScrollIntoViewAbortsCurrentAnimation) {

[bokan, 2017/05/15 17:15:28]

The test I'm most interested in is one that has some nested scrollers and mid
scroll aborts and scrollintoview's a new nested scroller. I'd like to make sure
the ScrollSequencer's queue is correctly cleared in those cases.

Also, a test that's like this but uses window.scrollTo or something that's not
scrollIntoView.

[sunyunjia, 2017/05/19 16:24:29]

Done.

+  v8::HandleScope HandleScope(v8::Isolate::GetCurrent());
+  WebView().Resize(WebSize(800, 600));
+  SimRequest request("https://example.com/test.html", "text/html");
+  LoadURL("https://example.com/test.html");
+  request.Complete(
+      "<div id='content1' style='height: 1000px'></div>"
+      "<div id='content2' style='height: 1000px'></div>");
+
+  Compositor().BeginFrame();
+  ASSERT_EQ(Window().scrollY(), 0);
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content2').scrollIntoView("
+                      "{block: 'start', behavior: 'smooth'});"));
+
+  Compositor().BeginFrame();  // update run_state_.
+  Compositor().BeginFrame();  // Set start_time = now.
+  Compositor().BeginFrame(0.2);
+  ASSERT_GT(Window().scrollY(), 250);
+  ASSERT_LT(Window().scrollY(), 350);
+
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content1').scrollIntoView();"));
+  Compositor().BeginFrame();
+  Element* content1 = GetDocument().getElementById("content1");
+  ASSERT_EQ(Window().scrollY(), content1->OffsetTop());
+}
+
+TEST_F(SmoothScrollTest, BlockAndInlineSettings) {
+  v8::HandleScope HandleScope(v8::Isolate::GetCurrent());
+  WebView().Resize(WebSize(800, 600));
+  SimRequest request("https://example.com/test.html", "text/html");
+  LoadURL("https://example.com/test.html");
+  request.Complete(
+      "<div id='container' style='height: 2500px; width: 2500px;'>"
+      "<div id='content' style='height: 500px; width: 500px;"
+      "margin-left: 1000px; margin-right: 1000px; margin-top: 1000px;"
+      "margin-bottom: 1000px'></div></div>");
+
+  int content_height = 500;
+  int content_width = 500;
+  int window_height = 600;
+  int window_width = 800;
+
+  Compositor().BeginFrame();
+  Element* content = GetDocument().getElementById("content");
+  ASSERT_EQ(Window().scrollY(), 0);
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content').scrollIntoView("
+                      "{block: 'nearest', inlinePosition: 'nearest'});"));
+  Compositor().BeginFrame();
+  ASSERT_EQ(Window().scrollX(),
+            content->OffsetLeft() + content_width - window_width);
+  ASSERT_EQ(Window().scrollY(),
+            content->OffsetTop() + content_height - window_height);
+
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content').scrollIntoView("
+                      "{block: 'start', inlinePosition: 'start'});"));
+  Compositor().BeginFrame();
+  ASSERT_EQ(Window().scrollX(), content->OffsetLeft());
+  ASSERT_EQ(Window().scrollY(), content->OffsetTop());
+
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content').scrollIntoView("
+                      "{block: 'center', inlinePosition: 'center'});"));
+  Compositor().BeginFrame();
+  ASSERT_EQ(Window().scrollX(),
+            content->OffsetLeft() + (content_width - window_width) / 2);
+  ASSERT_EQ(Window().scrollY(),
+            content->OffsetTop() + (content_height - window_height) / 2);
+
+  MainFrame().ExecuteScriptAndReturnValue(
+      WebScriptSource("document.getElementById('content').scrollIntoView("
+                      "{block: 'end', inlinePosition: 'end'});"));
+  Compositor().BeginFrame();
+  ASSERT_EQ(Window().scrollX(),
+            content->OffsetLeft() + content_width - window_width);
+  ASSERT_EQ(Window().scrollY(),
+            content->OffsetTop() + content_height - window_height);
+}
+
+}  // namespace
+
+}  // namespace blink