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..cd8529b69fc460c7014af21af3a633e348815ede |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-boundary-behavior.html |
@@ -0,0 +1,128 @@ |
+<!DOCTYPE html> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
majidvp
2017/07/06 19:43:59
nit: blank line
sunyunjia
2017/07/14 02:59:00
Done.
|
+<div id='space1' style='height: 300px; width: 1000px;'></div> |
+<div id='container' style='height: 400px; width: 500px; overflow: scroll;'> |
majidvp
2017/07/06 19:43:59
Best to move these styles into a <style> element.
sunyunjia
2017/07/14 02:59:00
Done.
|
+ <div id='red' style='height: 300px; width: 1000px; background-color: red;'></div> |
+ <div id='blue' style='height: 300px; background-color: blue;'></div> |
majidvp
2017/07/06 19:43:59
What is the significant of these colors? Why even
sunyunjia
2017/07/14 02:59:00
Thanks for pointing this out. They were originally
|
+</div> |
+<div id='space2' style='height: 1000px;'></div> |
majidvp
2017/07/06 19:43:59
why do you need two 'space' div one before and one
sunyunjia
2017/07/14 02:59:01
ditto
|
+ |
+<script> |
+const TOUCH_SOURCE_TYPE = 1; // TOUCH_INPUT from synthetic_gesture_params.h |
+const WHEEL_SOURCE_TYPE = 2; // MOUSE_INPUT from synthetic_gesture_params.h |
+const TYPES = ["", "touch", "wheel"]; |
+const MAX_FRAME = 500; |
+const IS_MAC = navigator.platform.indexOf('Mac') == 0; |
+var container = document.getElementById('container'); |
+test_y(WHEEL_SOURCE_TYPE); |
+ |
+function waitForAnimationEnd(next_function) { |
+ 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; |
+ tick(0); |
+ 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) { |
+ next_function(); |
+ } 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(null, frames + 1)); |
+ } |
+ }; |
+} |
+ |
+function test_y(source_type) { |
+ var test = async_test('scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis with: ' + TYPES[source_type]); |
+ function checkNoChangeAndScroll() { |
+ assert_equals(window.scrollY, 100); |
+ chrome.gpuBenchmarking.smoothScrollBy(200, waitForAnimationEnd.bind(this, checkChangeAndFinish), 100, 400, source_type, "left", 4000); |
+ } |
+ function checkChangeAndFinish() { |
+ assert_equals(window.scrollX, 0); |
+ if (source_type == WHEEL_SOURCE_TYPE && !IS_MAC) { |
+ test_y(TOUCH_SOURCE_TYPE); |
+ test.done(); |
+ } else { |
+ test_x(WHEEL_SOURCE_TYPE); |
+ test.done(); |
+ } |
+ } |
+ |
+ test.step(function() { |
+ container.style.scrollBoundaryBehaviorX = 'auto'; |
+ container.style.scrollBoundaryBehaviorY = 'none'; |
+ window.scrollTo(100, 100); |
+ container.scrollTo(0, 0); |
+ assert_equals(window.scrollY, 100); |
+ assert_equals(window.scrollX, 100); |
majidvp
2017/07/06 19:43:59
The above 4 lines are just a setup and repeated fo
sunyunjia
2017/07/14 02:59:01
Done.
|
+ chrome.gpuBenchmarking.smoothScrollBy(200, waitForAnimationEnd.bind(this, checkNoChangeAndScroll), 100, 400, source_type, "up", 4000); |
+ }); |
+} |
+ |
+function test_x(source_type) { |
+ var test = async_test('scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis with: ' + TYPES[source_type]); |
+ function checkNoChangeAndScroll() { |
+ assert_equals(window.scrollX, 100); |
+ chrome.gpuBenchmarking.smoothScrollBy(200, waitForAnimationEnd.bind(this, checkChangeAndFinish), 100, 400, source_type, "up", 4000); |
+ } |
+ function checkChangeAndFinish() { |
+ assert_equals(window.scrollY, 0); |
+ if (source_type == WHEEL_SOURCE_TYPE && !IS_MAC) { |
+ test_x(TOUCH_SOURCE_TYPE); |
majidvp
2017/07/06 19:43:59
I have difficulty reading and understanding what t
sunyunjia
2017/07/14 02:59:00
Done.
|
+ test.done(); |
+ } else { |
+ test_scroll(WHEEL_SOURCE_TYPE); |
+ test.done(); |
+ } |
+ } |
+ |
+ test.step(function() { |
+ container.style.scrollBoundaryBehaviorX = 'none'; |
+ container.style.scrollBoundaryBehaviorY = 'auto'; |
+ window.scrollTo(100, 100); |
+ container.scrollTo(0, 0); |
+ assert_equals(window.scrollY, 100); |
+ assert_equals(window.scrollX, 100); |
+ chrome.gpuBenchmarking.smoothScrollBy(200, waitForAnimationEnd.bind(this, checkNoChangeAndScroll), 100, 400, source_type, "left", 4000); |
+ }); |
+} |
+ |
+function test_scroll(source_type) { |
majidvp
2017/07/06 19:43:59
The function names test_x, test_y, test_scroll do
sunyunjia
2017/07/14 02:59:00
Done.
|
+ var test = async_test('scroll-boundary-behavior should not affect scrolling inside the applied container with: ' + TYPES[source_type]); |
+ function checkChangeAndFinish() { |
+ assert_equals(container.scrollTop, 0); |
+ assert_equals(container.scrollLeft, 0); |
+ if (source_type == WHEEL_SOURCE_TYPE && !IS_MAC) { |
+ test_scroll(TOUCH_SOURCE_TYPE); |
+ test.done(); |
+ } else { |
+ test.done(); |
+ } |
+ } |
+ |
+ test.step(function() { |
+ container.style.scrollBoundaryBehaviorX = 'none'; |
+ container.style.scrollBoundaryBehaviorY = 'none'; |
+ window.scrollTo(0, 0); |
+ container.scrollTo(100, 100); |
+ assert_equals(container.scrollTop, 100); |
+ assert_equals(container.scrollLeft, 100); |
+ chrome.gpuBenchmarking.smoothScrollBy(200, waitForAnimationEnd.bind(this, checkChangeAndFinish), 100, 400, source_type, "upleft", 4000); |
+ }); |
+} |
+ |
+</script> |