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..8a2db03eea27b4e30a51e61fe299a0633b28dae5 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,39 @@ bool Element::shouldIgnoreAttributeCase() const {
   return isHTMLElement() && document().isHTMLDocument();
 }
 
-void Element::scrollIntoView(bool alignToTop) {
+void Element::scrollIntoView(ExceptionState& exception) {
+  ScrollIntoViewOptions options;
+  options.setBlock("start");

[bokan, 2017/02/02 22:51:49]

according to the spec we should also initialize the |inline| member to "nearest"

[sunyunjia, 2017/02/10 23:25:20]

Done.

+  scrollIntoViewWithOptions(options);
+}
+
+void Element::scrollIntoView(ScrollIntoViewOptionsOrBoolean arg,
+                             ExceptionState& exception) {
+  ScrollIntoViewOptions options;
+  if (arg.isBoolean()) {
+    if (arg.getAsBoolean())
+      options.setBlock("end");

[bokan, 2017/02/02 22:51:49]

Similarly, we need to set |inline| here too.

[sunyunjia, 2017/02/10 23:25:20]

Done.

+    else
+      options.setBlock("start");
+    scrollIntoViewWithOptions(options);
+  } else if (arg.isScrollIntoViewOptions()) {
+    options = arg.getAsScrollIntoViewOptions();
+    if (!RuntimeEnabledFeatures::cssomSmoothScrollEnabled() &&
+        options.behavior() == "smooth") {
+      exception.throwTypeError(
+          "Smooth ScrollIntoView is an Experimental Web"
+          " Platform Feature, go to chrome://flags to enable it.");
+      return;
+    }
+    scrollIntoViewWithOptions(options);

[bokan, 2017/02/02 22:51:49]

move this below the if statement, make the "else" block return.

[sunyunjia, 2017/02/10 23:25:20]

Done.

+  } else {
+    exception.throwTypeError(
+        "ScrollIntoView only supports bool or"
+        " ScrollIntoViewOptions as argument.");
+  }
+}
+
+void Element::scrollIntoViewWithOptions(const ScrollIntoViewOptions& options) {
   document().updateStyleAndLayoutIgnorePendingStylesheetsForNode(this);
 
   if (!layoutObject())
@@ -437,18 +473,29 @@ void Element::scrollIntoView(bool alignToTop) {
   bool makeVisibleInVisualViewport =
       !document().page()->settings().getInertVisualViewport();
 
-  LayoutRect bounds = boundingBox();
+  ScrollBehavior behavior = ScrollBehaviorAuto;
+  if (options.behavior() == "smooth") {
+    behavior = ScrollBehaviorSmooth;
+  }
   // 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);
+  ScrollAlignment alignment = ScrollAlignment::alignCenterAlways;
+  if (options.block() == "start")
+    alignment = ScrollAlignment::alignTopAlways;
+  if (options.block() == "end")

[bokan, 2017/02/02 22:51:49]

use |else if|

[sunyunjia, 2017/02/10 23:25:20]

Done.

+    alignment = ScrollAlignment::alignBottomAlways;
+  if (options.block() == "nearest")

[bokan, 2017/02/02 22:51:49]

should this be "center"? "nearest" from the spec appears to be closer to
"alignToEdgeIfNeeded"

[sunyunjia, 2017/02/10 23:25:20]

Done.

+    alignment = ScrollAlignment::alignCenterAlways;
+
+  LayoutRect bounds = boundingBox();
+  layoutObject()->scrollRectToVisible(
+      bounds, ScrollAlignment::alignToEdgeIfNeeded, alignment,

[bokan, 2017/02/02 22:51:49]

How come we don't do anything for the inline direction?

[sunyunjia, 2017/02/10 23:25:20]

Done. I'm simply using x as inline direction and y as block direction. Is there
any chance that it's the other way?

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

For western languages that's right, x is inline and y is block. But in a context
where we're using "logical" directions like here, it's more precise to use
inline and block.

+      ProgrammaticScroll, makeVisibleInVisualViewport, behavior);
+
+  document()
+      .page()
+      ->scrollingCoordinator()
+      ->programmaticScrollCoordinator()
+      ->runQueuedAnimations();
 
   document().setSequentialFocusNavigationStartingPoint(this);
 }