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> |