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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | 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')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script src="../../resources/testharness.js"></script>
3 <script src="../../resources/testharnessreport.js"></script>
4 <style>
5 .outer {
6 height: 400px;
7 width: 1000px;
8 overflow: scroll;
9 }
10 #content {
11 height: 1000px;
12 width: 1200px;
13 }
14 </style>
15
16 <div id='space' class='outer'></div>
17 <div id='container' class='outer'>
18 <div id='content'></div>
19 </div>
20
21 <script>
22 const TOUCH_SOURCE_TYPE = 1; // TOUCH_INPUT from synthetic_gesture_params.h
23 const WHEEL_SOURCE_TYPE = 2; // TOUCH_INPUT from synthetic_gesture_params.h
24 const MAX_FRAME = 500;
25 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.
26 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.
27
28 function setUpForWindow() {
29 window.scrollTo(100, 100);
30 container.scrollTo(0, 0);
31 assert_equals(window.scrollY, 100);
32 assert_equals(window.scrollX, 100);
33 }
34
35 function setUpForContainer() {
36 window.scrollTo(0, 0);
37 container.scrollTo(100, 100);
38 assert_equals(container.scrollTop, 100);
39 assert_equals(container.scrollLeft, 100);
40 }
41
42 function smoothScroll(pixels_to_scroll, start_x, start_y, gesture_source_type, d irection, speed_in_pixels_s) {
43 return new Promise((resolve, reject) => {
44 chrome.gpuBenchmarking.smoothScrollBy(pixels_to_scroll, resolve, start_x, st art_y, gesture_source_type, direction, speed_in_pixels_s);
45 });
46 }
47
48 function waitForAnimationEnd() {
49 var last_changed_frame = 0;
50 var last_window_x = window.scrollX;
51 var last_window_y = window.scrollY;
52 var last_container_x = container.scrollLeft;
53 var last_container_y = container.scrollTop;
54 return new Promise((resolve, reject) => {
55 function tick(frames) {
56 // We requestAnimationFrame either for 500 frames or until 20 frames with
57 // no change have been observed.
58 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.
59 resolve();
60 } else {
61 if (window.scrollX != last_window_x ||
62 window.scrollY != last_window_y ||
63 container.scrollLeft != last_container_x ||
64 container.scrollTop != last_container_y) {
65 last_changed_frame = frames;
66 last_window_x = window.scrollX;
67 last_window_y = window.scrollY;
68 last_container_x = container.scrollLeft;
69 last_container_y = container.scrollTop;
70 }
71 requestAnimationFrame(tick.bind(this, frames + 1));
72 }
73 }
74 tick(0);
75 });
76 }
77
78 function test_boundary_prevents_y(source_type) {
79 container.style.scrollBoundaryBehaviorX = 'auto';
80 container.style.scrollBoundaryBehaviorY = 'none';
81 setUpForWindow();
82 return smoothScroll(200, 200, 500, source_type, "up", 4000)
83 .then(waitForAnimationEnd)
84 .then(() => {
85 assert_equals(window.scrollY, 100);})
86 .then(
87 smoothScroll.bind(this, 200, 200, 500, source_type, "left", 4000))
88 .then(waitForAnimationEnd)
89 .then(() => {
90 assert_equals(window.scrollX, 0);
91 });
92 }
93
94 function test_boundary_prevents_x(source_type) {
95 container.style.scrollBoundaryBehaviorX = 'none';
96 container.style.scrollBoundaryBehaviorY = 'auto';
97 setUpForWindow();
98 return smoothScroll(200, 200, 500, source_type, 'left', 4000)
99 .then(waitForAnimationEnd)
100 .then(() => {
101 assert_equals(window.scrollX, 100);})
102 .then(
103 smoothScroll.bind(this, 200, 200, 500, source_type, 'up', 4000))
104 .then(waitForAnimationEnd)
105 .then(() => {
106 assert_equals(window.scrollY, 0);
107 });
108 }
109
110 function test_boundary_allows_inner(source_type) {
111 container.style.scrollBoundaryBehaviorX = 'none';
112 container.style.scrollBoundaryBehaviorY = 'none';
113 setUpForContainer();
114 return smoothScroll(200, 200, 500, source_type, 'upleft', 4000)
115 .then(waitForAnimationEnd)
116 .then(() => {
117 assert_equals(container.scrollTop, 0);
118 assert_equals(container.scrollLeft, 0);
119 });
120 }
121
122 promise_test(t => {
123 return test_boundary_prevents_y(WHEEL_SOURCE_TYPE);
124 }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis with: wheel.');
125 promise_test(t => {
126 return test_boundary_prevents_x(WHEEL_SOURCE_TYPE);
127 }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis with: wheel.');
128 promise_test(t => {
129 return test_boundary_allows_inner(WHEEL_SOURCE_TYPE);
130 }, 'scroll-boundary-behavior should not affect scrolling inside the applied co ntainer with: wheel.');
131
132 if (!IS_MAC) {
133 promise_test(t => {
134 return test_boundary_prevents_y(TOUCH_SOURCE_TYPE);
135 }, 'scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis with: touch.');
136 promise_test(t => {
137 return test_boundary_prevents_x(TOUCH_SOURCE_TYPE);
138 }, 'scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis with: touch.');
139 promise_test(t => {
140 return test_boundary_allows_inner(TOUCH_SOURCE_TYPE);
141 }, 'scroll-boundary-behavior should not affect scrolling inside the applied container with: touch.');
142 }
143
144 </script>
OLDNEW
« 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