Currently, when Element.scrollIntoView is called with scroll-behavior: smooth, we still scroll instantly.
This is a very common and practical function, Firefox has supported.
Issue 701086 has been merged into this issue.
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/bbf870d971d95af7ae1ee688a7ed100e3787d02b commit bbf870d971d95af7ae1ee688a7ed100e3787d02b Author: sunyunjia <sunyunjia@chromium.org> Date: Mon May 29 21:58:08 2017 Implement Element.scrollIntoView for scroll-behavior: smooth. Currently in Chrome, a call to Element.scrollIntoView will calculate the amount each scroller needs to scroll to align the Element as specified and instantly set the scroll position on that scroller (going from the innermost to the outermost scroller). If Element.scrollIntoView is called with scroll-behavior: smooth, instead of scrolling instantly, we should animate to the desired position. We can’t simply call setScrollPosition in PaintLayerScrollableArea and FrameView with ScrollBehaviorSmooth because of the following reasons: - We want to run the animation from the outermost scroller to the innermost scroller - We want to run the animation one after another. That is, the scroll animation on the child scroller should start after the animation on the parent scroller is finished. This patch adds a new class, ProgrammaticScrollCoordinator, that manages programmatic scroll animations. BUG= 648446 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2650343008 Cr-Commit-Position: refs/heads/master@{#475387} [add] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/bindings/core/v8/BUILD.gn [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/core_idl_files.gni [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/dom/Element.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/dom/Element.idl [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/LocalDOMWindow.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/LocalDOMWindow.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/LocalFrameView.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/LocalFrameView.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/RootFrameViewport.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/RootFrameViewport.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/RootFrameViewportTest.cpp [add] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/frame/ScrollIntoViewOptions.idl [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/layout/LayoutBox.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/layout/LayoutBox.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/layout/LayoutListBox.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/layout/LayoutObject.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/layout/LayoutObject.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/layout/ScrollAlignment.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/layout/ScrollAlignment.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/page/Page.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/page/Page.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/BUILD.gn [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/geometry/FloatSize.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/scroll/ProgrammaticScrollAnimator.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/scroll/ProgrammaticScrollAnimator.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/scroll/ScrollTypes.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/scroll/ScrollableArea.cpp [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/scroll/ScrollableArea.h [add] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/scroll/SmoothScrollSequencer.cpp [add] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/platform/scroll/SmoothScrollSequencer.h [modify] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/web/BUILD.gn [add] https://crrev.com/bbf870d971d95af7ae1ee688a7ed100e3787d02b/third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/50ad23a34ff5e7d2a041c98991ef067209a8f41f commit 50ad23a34ff5e7d2a041c98991ef067209a8f41f Author: tyoshino <tyoshino@chromium.org> Date: Tue May 30 02:09:37 2017 Revert of Implement Element.scrollIntoView for scroll-behavior: smooth. (patchset #19 id:550001 of https://codereview.chromium.org/2650343008/ ) Reason for revert: Looks this CL made the "WebKit Linux Trusty Leak" bot red. See https://codereview.chromium.org/2650343008/#msg131 Original issue's description: > Implement Element.scrollIntoView for scroll-behavior: smooth. > > Currently in Chrome, a call to Element.scrollIntoView will calculate the amount > each scroller needs to scroll to align the Element as specified and instantly > set the scroll position on that scroller (going from the innermost to the > outermost scroller). > > If Element.scrollIntoView is called with scroll-behavior: smooth, instead of > scrolling instantly, we should animate to the desired position. > > We can’t simply call setScrollPosition in PaintLayerScrollableArea and > FrameView with ScrollBehaviorSmooth because of the following reasons: > - We want to run the animation from the outermost scroller to the > innermost scroller > - We want to run the animation one after another. That is, the scroll animation > on the child scroller should start after the animation on the parent scroller > is finished. > > This patch adds a new class, ProgrammaticScrollCoordinator, that manages > programmatic scroll animations. > > BUG= 648446 > CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 > > Review-Url: https://codereview.chromium.org/2650343008 > Cr-Commit-Position: refs/heads/master@{#475387} > Committed: https://chromium.googlesource.com/chromium/src/+/bbf870d971d95af7ae1ee688a7ed100e3787d02b TBR=jbroman@chromium.org,bokan@chromium.org,ikilpatrick@chromium.org,sigbjornf@opera.com,sunyunjia@chromium.org # Skipping CQ checks because original CL landed less than 1 days ago. NOPRESUBMIT=true NOTREECHECKS=true NOTRY=true BUG= 648446 Review-Url: https://codereview.chromium.org/2911103002 Cr-Commit-Position: refs/heads/master@{#475402} [delete] https://crrev.com/d560ed865c053d87594aca8a72637593117d5d1b/third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/bindings/core/v8/BUILD.gn [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/core_idl_files.gni [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/dom/Element.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/dom/Element.idl [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/frame/LocalDOMWindow.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/frame/LocalDOMWindow.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/frame/LocalFrameView.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/frame/LocalFrameView.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/frame/RootFrameViewport.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/frame/RootFrameViewport.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/frame/RootFrameViewportTest.cpp [delete] https://crrev.com/d560ed865c053d87594aca8a72637593117d5d1b/third_party/WebKit/Source/core/frame/ScrollIntoViewOptions.idl [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/layout/LayoutBox.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/layout/LayoutBox.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/layout/LayoutListBox.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/layout/LayoutObject.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/layout/LayoutObject.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/layout/ScrollAlignment.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/layout/ScrollAlignment.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/page/Page.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/page/Page.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/platform/BUILD.gn [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/platform/geometry/FloatSize.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/platform/scroll/ProgrammaticScrollAnimator.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/platform/scroll/ProgrammaticScrollAnimator.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/platform/scroll/ScrollTypes.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/platform/scroll/ScrollableArea.cpp [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/platform/scroll/ScrollableArea.h [delete] https://crrev.com/d560ed865c053d87594aca8a72637593117d5d1b/third_party/WebKit/Source/platform/scroll/SmoothScrollSequencer.cpp [delete] https://crrev.com/d560ed865c053d87594aca8a72637593117d5d1b/third_party/WebKit/Source/platform/scroll/SmoothScrollSequencer.h [modify] https://crrev.com/50ad23a34ff5e7d2a041c98991ef067209a8f41f/third_party/WebKit/Source/web/BUILD.gn [delete] https://crrev.com/d560ed865c053d87594aca8a72637593117d5d1b/third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/61b73ca665e42dfb7953de8a4daf1d4144805fef commit 61b73ca665e42dfb7953de8a4daf1d4144805fef Author: sunyunjia <sunyunjia@chromium.org> Date: Thu Jun 08 14:00:35 2017 Implement Element.scrollIntoView for scroll-behavior: smooth. Currently in Chrome, a call to Element.scrollIntoView will calculate the amount each scroller needs to scroll to align the Element as specified and instantly set the scroll position on that scroller (going from the innermost to the outermost scroller). If Element.scrollIntoView is called with scroll-behavior: smooth, instead of scrolling instantly, we should animate to the desired position. We can’t simply call setScrollPosition in PaintLayerScrollableArea and FrameView with ScrollBehaviorSmooth because of the following reasons: - We want to run the animation from the outermost scroller to the innermost scroller - We want to run the animation one after another. That is, the scroll animation on the child scroller should start after the animation on the parent scroller is finished. This patch adds a new class, ProgrammaticScrollCoordinator, that manages programmatic scroll animations. BUG= 648446 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2650343008 Cr-Original-Commit-Position: refs/heads/master@{#475387} Committed: https://chromium.googlesource.com/chromium/src/+/bbf870d971d95af7ae1ee688a7ed100e3787d02b Review-Url: https://codereview.chromium.org/2650343008 Cr-Commit-Position: refs/heads/master@{#477953} [add] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/bindings/core/v8/BUILD.gn [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/core_idl_files.gni [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/dom/Element.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/dom/Element.idl [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/frame/LocalFrameView.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/frame/LocalFrameView.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/frame/RootFrameViewport.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/frame/RootFrameViewport.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/frame/RootFrameViewportTest.cpp [add] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/frame/ScrollIntoViewOptions.idl [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/layout/LayoutBox.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/layout/LayoutBox.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/layout/LayoutListBox.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/layout/LayoutObject.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/layout/LayoutObject.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/layout/ScrollAlignment.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/layout/ScrollAlignment.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/page/Page.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/page/Page.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/BUILD.gn [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/geometry/FloatSize.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/scroll/ProgrammaticScrollAnimator.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/scroll/ProgrammaticScrollAnimator.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/scroll/ScrollTypes.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/scroll/ScrollableArea.cpp [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/scroll/ScrollableArea.h [add] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/scroll/SmoothScrollSequencer.cpp [add] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/platform/scroll/SmoothScrollSequencer.h [modify] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/web/BUILD.gn [add] https://crrev.com/61b73ca665e42dfb7953de8a4daf1d4144805fef/third_party/WebKit/Source/web/tests/SmoothScrollTest.cpp
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/3cab89b759fb285bb1b0a5f7842e9e1f0770a910 commit 3cab89b759fb285bb1b0a5f7842e9e1f0770a910 Author: sunyunjia <sunyunjia@chromium.org> Date: Fri Jun 16 01:51:30 2017 Update CSSOM SmoothScroll Web Platform Test This patch improves the coverage of smooth scroll web platform test by including tests for shadowDom and tests of empty or undefined arguments. It reduces the frames needed for the test by checking the change in scroll position. The test is changed to be more manual-test-friendly as users can see the smooth scroll animation by opening the test in browser. It also changes the interface of Element.scrollIntoView() to match the spec. BUG= 648446 Review-Url: https://codereview.chromium.org/2936283003 Cr-Commit-Position: refs/heads/master@{#479903} [add] https://crrev.com/3cab89b759fb285bb1b0a5f7842e9e1f0770a910/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-empty-args.html [add] https://crrev.com/3cab89b759fb285bb1b0a5f7842e9e1f0770a910/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-shadow.html [add] https://crrev.com/3cab89b759fb285bb1b0a5f7842e9e1f0770a910/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-smooth.html [delete] https://crrev.com/d23ec6a9bd043274e7bf28ad00380fce930b31f2/third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html [modify] https://crrev.com/3cab89b759fb285bb1b0a5f7842e9e1f0770a910/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/3cab89b759fb285bb1b0a5f7842e9e1f0770a910/third_party/WebKit/Source/core/dom/Element.idl
Comment 1 by dtapu...@chromium.org
, Sep 29 2016