Implement Element.scrollIntoView for scroll-behavior: smooth.

third_party/WebKit/Source/core/dom/Element.cpp

Index: third_party/WebKit/Source/core/dom/Element.cpp
diff --git a/third_party/WebKit/Source/core/dom/Element.cpp b/third_party/WebKit/Source/core/dom/Element.cpp
index dde22c864e3e8c69e3a0d326fb5b214babe2bcc5..a8aab711bb12ebb593eaf92aa3886d0ebc13acb1 100644
--- a/third_party/WebKit/Source/core/dom/Element.cpp
+++ b/third_party/WebKit/Source/core/dom/Element.cpp
@@ -30,6 +30,7 @@
 #include "bindings/core/v8/Dictionary.h"
 #include "bindings/core/v8/ExceptionMessages.h"
 #include "bindings/core/v8/ExceptionState.h"
+#include "bindings/core/v8/ScrollIntoViewOptionsOrBoolean.h"
 #include "bindings/core/v8/V8DOMActivityLogger.h"
 #include "bindings/core/v8/V8DOMWrapper.h"
 #include "bindings/core/v8/V8PerContextData.h"
@@ -97,6 +98,7 @@
 #include "core/frame/HostsUsingFeatures.h"
 #include "core/frame/LocalDOMWindow.h"
 #include "core/frame/LocalFrame.h"
+#include "core/frame/ScrollIntoViewOptions.h"
 #include "core/frame/ScrollToOptions.h"
 #include "core/frame/Settings.h"
 #include "core/frame/UseCounter.h"
@@ -131,6 +133,7 @@
 #include "core/page/scrolling/ScrollCustomizationCallbacks.h"
 #include "core/page/scrolling/ScrollState.h"
 #include "core/page/scrolling/ScrollStateCallback.h"
+#include "core/page/scrolling/ScrollingCoordinator.h"
 #include "core/page/scrolling/TopDocumentRootScrollerController.h"
 #include "core/paint/PaintLayer.h"
 #include "core/svg/SVGAElement.h"
@@ -140,6 +143,7 @@
 #include "platform/RuntimeEnabledFeatures.h"
 #include "platform/graphics/CompositorMutableProperties.h"
 #include "platform/graphics/CompositorMutation.h"
+#include "platform/scroll/ProgrammaticScrollCoordinator.h"
 #include "platform/scroll/ScrollableArea.h"
 #include "wtf/BitVector.h"
 #include "wtf/HashFunctions.h"
@@ -428,7 +432,43 @@ bool Element::shouldIgnoreAttributeCase() const {
   return isHTMLElement() && document().isHTMLDocument();
 }
 
-void Element::scrollIntoView(bool alignToTop) {
+void Element::scrollIntoView(ExceptionState& exception) {
+  ScrollIntoViewOptions options;
+  options.setBlock("start");
+  options.setInlinePosition("nearest");
+  scrollIntoViewWithOptions(options);
+}
+
+void Element::scrollIntoView(ScrollIntoViewOptionsOrBoolean arg,
+                             ExceptionState& exception) {
+  ScrollIntoViewOptions options;
+  if (arg.isBoolean()) {
+    if (arg.getAsBoolean())
+      options.setBlock("start");
+    else
+      options.setBlock("end");
+    options.setInlinePosition("nearest");
+    scrollIntoViewWithOptions(options);
+  } else if (arg.isScrollIntoViewOptions()) {
+    options = arg.getAsScrollIntoViewOptions();
+    if (RuntimeEnabledFeatures::cssomSmoothScrollEnabled() ||
+        options.behavior() != "smooth") {
+      scrollIntoViewWithOptions(options);

[bokan, 2017/02/21 21:33:00]

This scrollIntoViewWithOptions and the one above can still be moved down to the
bottom of the function. It's more clear that way that we're always calling it
unless we've hit an error condition.

[sunyunjia, 2017/02/24 19:11:48]

Done.

+    } else {
+      exception.throwTypeError(
+          "Smooth ScrollIntoView is an Experimental Web"
+          " Platform Feature, go to chrome://flags to enable it.");
+      return;
+    }
+  } else {
+    exception.throwTypeError(
+        "ScrollIntoView only supports bool or"
+        " ScrollIntoViewOptions as argument.");
+    return;
+  }
+}
+
+void Element::scrollIntoViewWithOptions(const ScrollIntoViewOptions& options) {
   document().updateStyleAndLayoutIgnorePendingStylesheetsForNode(this);
 
   if (!layoutObject())
@@ -437,18 +477,38 @@ void Element::scrollIntoView(bool alignToTop) {
   bool makeVisibleInVisualViewport =
       !document().page()->settings().getInertVisualViewport();
 
+  ScrollBehavior behavior = ScrollBehaviorAuto;
+  if (options.behavior() == "smooth") {
+    behavior = ScrollBehaviorSmooth;
+  }
+  // Block Alignment to the top / bottom and to the closest edge.
+  ScrollAlignment blockAlignment = ScrollAlignment::alignCenterAlways;
+  if (options.block() == "start")
+    blockAlignment = ScrollAlignment::alignTopAlways;
+  else if (options.block() == "end")
+    blockAlignment = ScrollAlignment::alignBottomAlways;
+  else if (options.block() == "nearest")
+    blockAlignment = ScrollAlignment::alignClosestEdgeAlways;
+
+  // Inline Alignment to the top / bottom and to the closest edge.
+  ScrollAlignment inlineAlignment = ScrollAlignment::alignCenterAlways;
+  if (options.inlinePosition() == "start")
+    inlineAlignment = ScrollAlignment::alignLeftAlways;
+  else if (options.inlinePosition() == "end")
+    inlineAlignment = ScrollAlignment::alignRightAlways;
+  else if (options.inlinePosition() == "nearest")
+    inlineAlignment = ScrollAlignment::alignClosestEdgeAlways;

[bokan, 2017/02/21 21:33:00]

Hmm, this used to have "IfNeeded" but now everything is "Always" and I don't
really see why that's changing with smoothness. I also see in the spec steps
that there are some cases where we don't do anything. I don't really know the
details here, could you confirm what we should actually be doing and that the
ScrollAlignment enums match the we define in the spec.

This will presumably become more clear with tests.

[sunyunjia, 2017/02/24 19:11:48]

Done. My bad， I should've checked the spec closer.

+
   LayoutRect bounds = boundingBox();
-  // Align to the top / bottom and to the closest edge.
-  if (alignToTop)
-    layoutObject()->scrollRectToVisible(
-        bounds, ScrollAlignment::alignToEdgeIfNeeded,
-        ScrollAlignment::alignTopAlways, ProgrammaticScroll,
-        makeVisibleInVisualViewport);
-  else
-    layoutObject()->scrollRectToVisible(
-        bounds, ScrollAlignment::alignToEdgeIfNeeded,
-        ScrollAlignment::alignBottomAlways, ProgrammaticScroll,
-        makeVisibleInVisualViewport);
+  layoutObject()->scrollRectToVisible(bounds, inlineAlignment, blockAlignment,
+                                      ProgrammaticScroll,
+                                      makeVisibleInVisualViewport, behavior);
+
+  document()
+      .page()
+      ->scrollingCoordinator()
+      ->programmaticScrollCoordinator()
+      ->runQueuedAnimations();
 
   document().setSequentialFocusNavigationStartingPoint(this);
 }