Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(703)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html

Issue 2769793002: Implement CSS: scroll-boundary-behavior (Closed)
Patch Set: Update promises tests and Scroll Manager Created 3 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« cc/trees/layer_tree_host_impl.cc ('K') | « cc/trees/scroll_node.cc ('k') | third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt » ('j') | third_party/WebKit/Source/core/input/ScrollManager.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html
diff --git a/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html b/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html
new file mode 100644
index 0000000000000000000000000000000000000000..362074d74ef0d48ef1e4266d21aaa3aa521e4f2a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+.outer {
+ height: 400px;
+ width: 1000px;
+ overflow: scroll;
+}
+#content {
+ height: 1000px;
+ width: 1200px;
+}
+</style>
+
+<div id='space' class='outer'></div>
+<div id='container' class='outer'>
+ <div id='content'></div>
+</div>
+
+<script>
+const TOUCH_SOURCE_TYPE = 1; // TOUCH_INPUT from synthetic_gesture_params.h
+const WHEEL_SOURCE_TYPE = 2; // TOUCH_INPUT from synthetic_gesture_params.h
+const MAX_FRAME = 500;
+const IS_MAC = navigator.platform.indexOf('Mac') == 0;
majidvp 2017/07/14 14:29:43 nit: probably best to move these values closer to
sunyunjia 2017/07/14 22:07:24 Done.
+var container = document.getElementById('container');
majidvp 2017/07/14 14:29:43 nit: Since container value is never changed it can
sunyunjia 2017/07/14 22:07:24 Done.
+
+function setUpForWindow() {
+ window.scrollTo(100, 100);
+ container.scrollTo(0, 0);
+ assert_equals(window.scrollY, 100);
+ assert_equals(window.scrollX, 100);
+}
+
+function setUpForContainer() {
+ window.scrollTo(0, 0);
+ container.scrollTo(100, 100);
+ assert_equals(container.scrollTop, 100);
+ assert_equals(container.scrollLeft, 100);
+}
+
+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() {
+ var last_changed_frame = 0;
+ var last_window_x = window.scrollX;
+ var last_window_y = window.scrollY;
+ var last_container_x = container.scrollLeft;
+ var last_container_y = container.scrollTop;
+ return new Promise((resolve, reject) => {
+ function tick(frames) {
+ // We requestAnimationFrame either for 500 frames or until 20 frames with
+ // no change have been observed.
+ if (frames >= MAX_FRAME || frames - last_changed_frame > 20) {
majidvp 2017/07/14 14:29:43 20 frames seems a bit arbitrary, why do you need m
sunyunjia 2017/07/14 22:07:24 I deducted to 5 now.
+ resolve();
+ } else {
+ if (window.scrollX != last_window_x ||
+ window.scrollY != last_window_y ||
+ container.scrollLeft != last_container_x ||
+ container.scrollTop != last_container_y) {
+ last_changed_frame = frames;
+ last_window_x = window.scrollX;
+ last_window_y = window.scrollY;
+ last_container_x = container.scrollLeft;
+ last_container_y = container.scrollTop;
+ }
+ requestAnimationFrame(tick.bind(this, frames + 1));
+ }
+ }
+ tick(0);
+ });
+}
+
+function test_boundary_prevents_y(source_type) {
+ container.style.scrollBoundaryBehaviorX = 'auto';
+ container.style.scrollBoundaryBehaviorY = 'none';
+ setUpForWindow();
+ return smoothScroll(200, 200, 500, source_type, "up", 4000)
+ .then(waitForAnimationEnd)
+ .then(() => {
+ assert_equals(window.scrollY, 100);})
+ .then(
+ smoothScroll.bind(this, 200, 200, 500, source_type, "left", 4000))
+ .then(waitForAnimationEnd)
+ .then(() => {
+ assert_equals(window.scrollX, 0);
+ });
+}
+
+function test_boundary_prevents_x(source_type) {
+ container.style.scrollBoundaryBehaviorX = 'none';
+ container.style.scrollBoundaryBehaviorY = 'auto';
+ setUpForWindow();
+ return smoothScroll(200, 200, 500, source_type, 'left', 4000)
+ .then(waitForAnimationEnd)
+ .then(() => {
+ assert_equals(window.scrollX, 100);})
+ .then(
+ smoothScroll.bind(this, 200, 200, 500, source_type, 'up', 4000))
+ .then(waitForAnimationEnd)
+ .then(() => {
+ assert_equals(window.scrollY, 0);
+ });
+}
+
+function test_boundary_allows_inner(source_type) {
+ container.style.scrollBoundaryBehaviorX = 'none';
+ container.style.scrollBoundaryBehaviorY = 'none';
+ setUpForContainer();
+ return smoothScroll(200, 200, 500, source_type, 'upleft', 4000)
+ .then(waitForAnimationEnd)
+ .then(() => {
+ assert_equals(container.scrollTop, 0);
+ assert_equals(container.scrollLeft, 0);
+ });
+}
+
+promise_test(t => {
+ return test_boundary_prevents_y(WHEEL_SOURCE_TYPE);
+ }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis with: wheel.');
+promise_test(t => {
+ return test_boundary_prevents_x(WHEEL_SOURCE_TYPE);
+ }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis with: wheel.');
+promise_test(t => {
+ return test_boundary_allows_inner(WHEEL_SOURCE_TYPE);
+ }, 'scroll-boundary-behavior should not affect scrolling inside the applied container with: wheel.');
+
+if (!IS_MAC) {
+ promise_test(t => {
+ return test_boundary_prevents_y(TOUCH_SOURCE_TYPE);
+ }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis with: touch.');
+ promise_test(t => {
+ return test_boundary_prevents_x(TOUCH_SOURCE_TYPE);
+ }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis with: touch.');
+ promise_test(t => {
+ return test_boundary_allows_inner(TOUCH_SOURCE_TYPE);
+ }, 'scroll-boundary-behavior should not affect scrolling inside the applied container with: touch.');
+}
+
+</script>
« cc/trees/layer_tree_host_impl.cc ('K') | « cc/trees/scroll_node.cc ('k') | third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt » ('j') | third_party/WebKit/Source/core/input/ScrollManager.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698