forked from chromium/chromium
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use visual scroll offset for snapping.
Currently, snap points only consider the scroll offset of the LayoutViewport(outer viewport scroll layer in cc), ignoring the scroll offset of the VisualViewport(inner viewport scroll layer in cc). This would confuse the user as they enlarge the page. This patch makes sure that the coordinate for snapping is based on visual viewport, and the snapping behavior scrolls visual viewport when necessary. Cq-Include-Trybots: luci.chromium.try:android_optional_gpu_tests_rel;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I29ad271b04ac3fffec733f764e9168bc08150507 Bug: 839971 Cq-Include-Trybots: luci.chromium.try:android_optional_gpu_tests_rel;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I29ad271b04ac3fffec733f764e9168bc08150507 Reviewed-on: https://chromium-review.googlesource.com/1033351 Reviewed-by: Dave Tapuska <dtapuska@chromium.org> Reviewed-by: David Bokan <bokan@chromium.org> Commit-Queue: Sandra Sun <sunyunjia@chromium.org> Cr-Commit-Position: refs/heads/master@{#559729}
- Loading branch information
Showing
12 changed files
with
180 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
third_party/WebKit/LayoutTests/fast/scroll-snap/snap-scrolls-visual-viewport.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <!DOCTYPE html> | ||
| <script src="../../resources/testharness.js"></script> | ||
| <script src="../../resources/testharnessreport.js"></script> | ||
| <style> | ||
| body { | ||
| overflow: scroll; | ||
| scroll-snap-type: both proximity; | ||
| height: 300px; | ||
| width: 300px; | ||
| margin: 0px; | ||
| padding: 0px; | ||
| } | ||
| #container { | ||
| margin: 0px; | ||
| padding: 0px; | ||
| width: 600px; | ||
| height: 2000px; | ||
| } | ||
| #area { | ||
| position: relative; | ||
| left: 100px; | ||
| top: 700px; | ||
| width: 200px; | ||
| height: 200px; | ||
| scroll-snap-align: start; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <div id="container"> | ||
| <div id="area"></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| const TOUCH_SOURCE_TYPE = 1; | ||
| const WHEEL_SOURCE_TYPE = 2; | ||
| const SOURCE_TYPE = navigator.platform.indexOf('Mac') == 0 | ||
| ? WHEEL_SOURCE_TYPE | ||
| : TOUCH_SOURCE_TYPE; | ||
|
|
||
| function smoothScroll(pixels_to_scroll, start_x, start_y, gesture_source_type, direction, speed_in_pixels_s) { | ||
| return new Promise((resolve, reject) => { | ||
| chrome.gpuBenchmarking.smoothScrollBy(pixels_to_scroll, resolve, start_x, start_y, gesture_source_type, direction, speed_in_pixels_s); | ||
| }); | ||
| } | ||
|
|
||
| function waitForAnimationEnd() { | ||
| const MAX_FRAME = 500; | ||
| var last_changed_frame = 0; | ||
| var layout_viewport_y = window.scrollY; | ||
| var visual_viewport_y = window.visualViewport.offsetTop; | ||
| return new Promise((resolve, reject) => { | ||
| function tick(frames) { | ||
| // We requestAnimationFrame either for 500 frames or until 15 frames with | ||
| // no change have been observed. | ||
| if (frames >= MAX_FRAME || frames - last_changed_frame > 15) { | ||
| resolve(); | ||
| } else { | ||
| if (window.scrollY != layout_viewport_y || | ||
| window.visualViewport.offsetTop != visual_viewport_y) { | ||
| last_changed_frame = frames; | ||
| layout_viewport_y = window.scrollY; | ||
| visual_viewport_y = window.visualViewport.offsetTop; | ||
| } | ||
| requestAnimationFrame(tick.bind(this, frames + 1)); | ||
| } | ||
| } | ||
| tick(0); | ||
| }); | ||
| } | ||
|
|
||
| function set_and_scroll_and_snap( | ||
| initial_position, | ||
| scroll_delta, | ||
| scroll_direction, | ||
| layout_viewport_y, | ||
| visual_viewport_y) { | ||
| internals.setPageScaleFactor(2); | ||
| window.scrollTo(0, initial_position); | ||
| internals.setVisualViewportOffset(0, 0); | ||
| assert_equals(window.visualViewport.scale, 2); | ||
| assert_equals(window.scrollY, initial_position); | ||
| assert_equals(window.visualViewport.offsetTop, 0); | ||
|
|
||
| return smoothScroll(2 * scroll_delta, 200, 200, SOURCE_TYPE, scroll_direction, 4000) | ||
| .then(waitForAnimationEnd) | ||
| .then(() => { | ||
| assert_approx_equals(window.scrollY, layout_viewport_y, 1); | ||
| assert_approx_equals(window.visualViewport.offsetTop, visual_viewport_y, 1); | ||
| }) | ||
| } | ||
|
|
||
| promise_test(t => { | ||
| // The starting scroll position is 1000. | ||
| // We scroll upwards 400 to land on 600. | ||
| // As the visual_viewport's position is 0 and has room of 300 to scroll | ||
| // downwards, the layout_viewport can stay at 600 and only the visual_viewport | ||
| // needs to scroll to 100. | ||
| return set_and_scroll_and_snap(1000, 400, 'up', 600, 100); | ||
| }, "Snap scrolls visual viewport when it's scrollable."); | ||
|
|
||
| promise_test(t => { | ||
| // The starting scroll position is 1000. | ||
| // We scroll upwards 200 to land on 800. | ||
| // As the visual_viewport's position is 0 and has no room to scroll upwards, | ||
| // the layout_viewport is scrolled to 700 to snap to #area. | ||
| return set_and_scroll_and_snap(1000, 200, 'up', 700, 0); | ||
| }, "Snap scrolls layout viewport when visual viewport has reached its scroll extent."); | ||
|
|
||
| promise_test(t => { | ||
| // The starting scroll position is 300. | ||
| // We scroll downwards 250 to bring visual_viewport to 250, while still keeping | ||
| // layout_viewport at 300. So the total offset is 550. | ||
| // As the visual_viewport's position is 250 and only has room of 50 to scroll | ||
| // downwards, the layout_viewport needs to scroll another 100 downwards to | ||
| // make the total offset as 700. | ||
| return set_and_scroll_and_snap(300, 250, 'down', 400, 300); | ||
| }, "Snap scrolls both layout and visual viewports when visual viewport is" + | ||
| "scrollable but does not has enough room to reach the snap position."); | ||
|
|
||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters