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

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 the tests Created 3 years, 6 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/property_tree_builder.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/layout/compositing/CompositedLayerMapping.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..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>
« cc/trees/property_tree_builder.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/layout/compositing/CompositedLayerMapping.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698