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 13 matching lines @@
  * Boston, MA 02110-1301, USA.
  */
 
 #include "core/dom/Element.h"
 
 #include <memory>
 #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 46 matching lines @@
 #include "core/editing/EditingUtilities.h"
 #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/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 13 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"

[bokan, 2017/04/07 15:56:52]

Unused, remove.

[sunyunjia, 2017/05/12 18:40:24]

Done.

 #include "core/page/scrolling/TopDocumentRootScrollerController.h"
 #include "core/paint/PaintLayer.h"
 #include "core/probe/CoreProbes.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/ScrollableArea.h"
+#include "platform/scroll/SmoothScrollSequencer.h"
 #include "wtf/BitVector.h"
 #include "wtf/HashFunctions.h"
 #include "wtf/text/CString.h"
 #include "wtf/text/StringBuilder.h"
 #include "wtf/text/TextPosition.h"
 
 namespace blink {
 
 namespace {
 
@@ skipping 266 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(ScrollIntoViewOptionsOrBoolean arg) {
+  ScrollIntoViewOptions options;
+  if (arg.isBoolean()) {
+    if (arg.getAsBoolean())
+      options.setBlock("start");
+    else
+      options.setBlock("end");
+    options.setInlinePosition("nearest");
+  } else if (arg.isScrollIntoViewOptions()) {
+    options = arg.getAsScrollIntoViewOptions();
+    if (!RuntimeEnabledFeatures::cssomSmoothScrollEnabled() &&
+        options.behavior() == "smooth") {
+      options.setBehavior("instant");
+    }
+  }
+  scrollIntoViewWithOptions(options);
+}
+
 void Element::scrollIntoView(bool alignToTop) {
+  ScrollIntoViewOptions options;
+  if (alignToTop)
+    options.setBlock("start");
+  else
+    options.setBlock("end");
+  options.setInlinePosition("nearest");
+  scrollIntoViewWithOptions(options);
+}
+
+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::alignTopAlways;
+  if (options.block() == "center")
+    blockAlignment = ScrollAlignment::alignCenterAlways;
+  else if (options.block() == "end")
+    blockAlignment = ScrollAlignment::alignBottomAlways;
+  else if (options.block() == "nearest")
+    blockAlignment = ScrollAlignment::alignToEdgeIfNeeded;
+
+  // Inline Alignment to the top / bottom and to the closest edge.

[bokan, 2017/04/07 15:56:52]

Should this be left / right, rather than top / bottom?

[sunyunjia, 2017/05/12 18:40:24]

Done.

+  ScrollAlignment inlineAlignment = ScrollAlignment::alignToEdgeIfNeeded;

[bokan, 2017/04/07 15:56:52]

For consistency with the above block, default to alignLeftAlways here or default
the blockAlignment to alignToEdgeIfNeeded. 

[sunyunjia, 2017/05/12 18:40:24]

I set the default value according to the spec:
https://www.w3.org/TR/cssom-view-1/#dom-element-scrollintoview

It says, If arg is not specified or is true, let the block dictionary member of
options have the value "start", and let the inline dictionary member of options
have the value "nearest"

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

Ah, thanks and sorry, I missed that that was specified.

+  if (options.inlinePosition() == "start")
+    inlineAlignment = ScrollAlignment::alignLeftAlways;
+  else if (options.inlinePosition() == "center")
+    inlineAlignment = ScrollAlignment::alignCenterAlways;
+  else if (options.inlinePosition() == "end")
+    inlineAlignment = ScrollAlignment::alignRightAlways;
+
   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);
+
+  if (document().page()) {

[bokan, 2017/04/07 15:56:52]

nit: remove braces

[sunyunjia, 2017/05/12 18:40:24]

Done.

+    document().page()->smoothScrollSequencer()->runQueuedAnimations();
+  }
 
   document().setSequentialFocusNavigationStartingPoint(this);
 }
 
 void Element::scrollIntoViewIfNeeded(bool centerIfNeeded) {
   document().updateStyleAndLayoutIgnorePendingStylesheetsForNode(this);
 
   if (!layoutObject())
     return;
 
@@ skipping 3828 matching lines @@
 }
 
 DEFINE_TRACE_WRAPPERS(Element) {
   if (hasRareData()) {
     visitor->traceWrappers(elementRareData());
   }
   ContainerNode::traceWrappers(visitor);
 }
 
 }  // namespace blink