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..dac81ab58697bc4e43b469a0150053facafeb006 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html |
@@ -0,0 +1,143 @@ |
+<!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 container = document.getElementById('container'); |
+ |
+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() { |
+ const MAX_FRAME = 500; |
+ 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 5 frames with |
+ // no change have been observed. |
+ if (frames >= MAX_FRAME || frames - last_changed_frame > 5) { |
+ 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); |
+ }); |
+} |
+ |
+const TOUCH_SOURCE_TYPE = 1; // TOUCH_INPUT from synthetic_gesture_params.h |
+const WHEEL_SOURCE_TYPE = 2; // TOUCH_INPUT from synthetic_gesture_params.h |
+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.'); |
+ |
+const IS_MAC = navigator.platform.indexOf('Mac') == 0; |
+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> |