Implement Element.scrollIntoView for scroll-behavior: smooth.

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

 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 1999 Antti Koivisto (koivisto@kde.org)
  *           (C) 2001 Peter Kelly (pmk@post.com)
  *           (C) 2001 Dirk Mueller (mueller@kde.org)
  *           (C) 2007 David Smith (catfish.man@gmail.com)
  * Copyright (C) 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2012, 2013 Apple Inc.
  * All rights reserved.
  *           (C) 2007 Eric Seidel (eric@webkit.org)
  *
@@ skipping 12 matching lines @@
  * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
  * Boston, MA 02110-1301, USA.
  */
 
 #include "core/dom/Element.h"
 
 #include "bindings/core/v8/DOMDataStore.h"
 #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"
 #include "core/CSSValueKeywords.h"
 #include "core/SVGNames.h"
 #include "core/XMLNames.h"
 #include "core/animation/AnimationTimeline.h"
 #include "core/animation/CustomCompositorAnimations.h"
 #include "core/animation/css/CSSAnimations.h"
 #include "core/css/CSSIdentifierValue.h"
@@ skipping 47 matching lines @@
 #include "core/editing/FrameSelection.h"
 #include "core/editing/iterators/TextIterator.h"
 #include "core/editing/serializers/Serialization.h"
 #include "core/events/EventDispatcher.h"
 #include "core/events/FocusEvent.h"
 #include "core/frame/FrameHost.h"
 #include "core/frame/FrameView.h"
 #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"
 #include "core/frame/VisualViewport.h"
 #include "core/frame/csp/ContentSecurityPolicy.h"
 #include "core/html/ClassList.h"
 #include "core/html/HTMLCanvasElement.h"
 #include "core/html/HTMLCollection.h"
 #include "core/html/HTMLDocument.h"
 #include "core/html/HTMLElement.h"
@@ skipping 14 matching lines @@
 #include "core/loader/DocumentLoader.h"
 #include "core/page/ChromeClient.h"
 #include "core/page/FocusController.h"
 #include "core/page/Page.h"
 #include "core/page/PointerLockController.h"
 #include "core/page/SpatialNavigation.h"
 #include "core/page/scrolling/RootScrollerController.h"
 #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"
 #include "core/svg/SVGElement.h"
 #include "core/svg/SVGTreeScopeResources.h"
 #include "platform/EventDispatchForbiddenScope.h"
 #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"
 #include "wtf/text/CString.h"
 #include "wtf/text/StringBuilder.h"
 #include "wtf/text/TextPosition.h"
 #include <memory>
 
 namespace blink {
 
@@ skipping 268 matching lines @@
   synchronizeAttribute(name);
   if (const Attribute* attribute = elementData()->attributes().find(name))
     return attribute->value();
   return nullAtom;
 }
 
 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())
     return;
 
   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);
 }
 
 void Element::scrollIntoViewIfNeeded(bool centerIfNeeded) {
   document().updateStyleAndLayoutIgnorePendingStylesheetsForNode(this);
 
   if (!layoutObject())
     return;
 
@@ skipping 3666 matching lines @@
 }
 
 DEFINE_TRACE_WRAPPERS(Element) {
   if (hasRareData()) {
     visitor->traceWrappers(elementRareData());
   }
   ContainerNode::traceWrappers(visitor);
 }
 
 }  // namespace blink