OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <meta charset="utf-8"> | |
5 <title>Scroll customization methods are called appropriately.</title> | |
6 <script src="../../../resources/testharness.js"></script> | |
7 <script src="../../../resources/testharnessreport.js"></script> | |
8 <style> | |
9 | |
10 * { | |
11 margin:0; | |
12 padding:0; | |
13 } | |
14 | |
15 *::-webkit-scrollbar { | |
16 width: 0 !important; | |
17 height: 0 !important; | |
18 } | |
19 | |
20 #a { | |
21 height:400px; | |
22 width:400px; | |
23 overflow:scroll; | |
24 } | |
25 | |
26 #b { | |
27 height:500px; | |
28 width:500px; | |
29 background-color:purple; | |
30 } | |
31 | |
32 #c { | |
33 height:300px; | |
34 width:300px; | |
35 overflow:scroll; | |
36 } | |
37 | |
38 #d { | |
39 height:400px; | |
40 width:400px; | |
41 background-color:green; | |
42 } | |
43 | |
44 body { | |
45 height:3000px; | |
46 } | |
47 | |
48 </style> | |
49 </head> | |
50 <body> | |
51 | |
52 <div id="a"> | |
53 <div id="b"> | |
54 <div id="c"> | |
55 <div id="d"> | |
56 </div> | |
57 </div> | |
58 </div> | |
59 </div> | |
60 | |
61 <script> | |
62 test(function() { | |
63 assert_true('ScrollState' in window, "'ScrollState' in window"); | |
64 }, "These tests only work with scroll customization enabled."); | |
65 | |
66 internals.settings.setScrollAnimatorEnabled(false); | |
67 | |
68 var originalApplyScrolls = []; | |
69 var originalDistributeScrolls = []; | |
70 var deltas = [-85, -75, -65, -55, -45]; | |
71 | |
72 var elements = [ | |
73 document.getElementById("d"), | |
74 document.getElementById("c"), | |
75 document.getElementById("b"), | |
76 document.getElementById("a"), | |
77 document.scrollingElement]; | |
78 | |
79 var scrollableElements = [elements[1], elements[3], elements[4]]; | |
80 | |
81 document.scrollingElement.id = "scrollingElement"; | |
82 | |
83 function reset() { | |
84 for (var i = 0; i < elements.length; ++i) { | |
85 elements[i].scrollTop = 0; | |
86 elements[i].unappliedDeltaY = []; | |
87 elements[i].distributedDeltaY = []; | |
88 elements[i].numberOfScrollBegins = 0; | |
89 elements[i].numberOfScrollEnds = 0; | |
90 | |
91 elements[i].setApplyScroll((function(scrollState){ | |
92 if (!scrollState.isEnding && !scrollState.isBeginning) | |
93 this.unappliedDeltaY.push(scrollState.deltaY); | |
94 }).bind(elements[i]), "perform-after-native-scroll"); | |
95 | |
96 elements[i].setDistributeScroll((function(scrollState) { | |
97 if (scrollState.isBeginning) | |
98 this.numberOfScrollBegins++; | |
99 else if (scrollState.isEnding) | |
100 this.numberOfScrollEnds++; | |
101 else | |
102 this.distributedDeltaY.push(scrollState.deltaY); | |
103 }).bind(elements[i]), "perform-before-native-scroll"); | |
104 } | |
105 } | |
106 | |
107 function applyDelta(d) { | |
108 eventSender.gestureScrollBegin(10, 10); | |
109 eventSender.gestureScrollUpdate(0, d); | |
110 eventSender.gestureScrollEnd(0, 0); | |
111 } | |
112 | |
113 if ('ScrollState' in window) { | |
114 test(function() { | |
115 reset(); | |
116 | |
117 // Scroll five times, with three scrollable elements. | |
118 var cScrollTop = [85, 100, 100, 100, 100]; | |
119 var aScrollTop = [0, 0, 65, 100, 100]; | |
120 var scrollingElementScrollTop = [0, 0, 0, 0, 45]; | |
121 | |
122 for (var i = 0; i < deltas.length; ++i) { | |
123 applyDelta(deltas[i]); | |
124 assert_equals(a.scrollTop, aScrollTop[i], "For id 'a' on step " + i); | |
125 assert_equals(c.scrollTop, cScrollTop[i], "For id 'c' on step " + i); | |
126 assert_equals(document.scrollingElement.scrollTop, scrollingElementScrollT
op[i], "For scrollingElement on step " + i); | |
127 } | |
128 }, "Scroll offsets are modified correctly."); | |
129 | |
130 test(function() { | |
131 reset(); | |
132 | |
133 // Scroll five times, with five elements. | |
134 var unapplied = [ | |
135 // d, the innermost element, never applies any scroll. | |
136 [-85, -75, -65, -55, -45], | |
137 // c applies the first two scrolls, and then hits its scroll extents. | |
138 [0, 0, -65, -55, -45], | |
139 // b doesn't scroll, and so leaves the same deltas unapplied as c. | |
140 [0, 0, -65, -55, -45], | |
141 // a hits its scroll extent on the second last step. | |
142 [0, 0, 0, 0, -45], | |
143 // The scrollingElement performs the frame scroll. | |
144 [0, 0, 0, 0, 0]]; | |
145 | |
146 for (var i = 0; i < deltas.length; ++i) | |
147 applyDelta(deltas[i]); | |
148 | |
149 for (var i = 0; i < elements.length; ++i) { | |
150 var el = elements[i]; | |
151 // Every element sees the same deltas being distributed. | |
152 assert_array_equals(el.distributedDeltaY, deltas, "distributed delta for "
+ el.id + ":"); | |
153 assert_array_equals(el.unappliedDeltaY, unapplied[i], "unapplied delta for
" + el.id + ":"); | |
154 } | |
155 | |
156 // Ensure that the document leaves scroll unapplied when appropriate. | |
157 var documentUnapplied = document.scrollingElement.unappliedDeltaY; | |
158 applyDelta(-4000); | |
159 assert_equals(documentUnapplied[documentUnapplied.length - 1], 0); | |
160 applyDelta(-4000); | |
161 assert_equals(documentUnapplied[documentUnapplied.length - 1], -4000); | |
162 }, "Correct amount of delta is consumed."); | |
163 | |
164 test(function() { | |
165 reset(); | |
166 | |
167 // Consume one pixel of delta per call to applyScroll. | |
168 for (var i = 0; i < elements.length; ++i) { | |
169 if (scrollableElements.indexOf(elements[i]) == -1) | |
170 continue; | |
171 elements[i].setApplyScroll((function(scrollState) { | |
172 if (scrollState.deltaY !== 0) | |
173 scrollState.consumeDelta(0, -1); | |
174 }).bind(elements[i]), "perform-before-native-scroll"); | |
175 } | |
176 | |
177 // Scroll five times, with three scrollable elements. | |
178 // The scroll distance is decreased more the higher up the scroll chain the
element is. | |
179 var cScrollTop = [85 - 1, 100, 100, 100, 100]; | |
180 var aScrollTop = [0, 0, 65 - 2, 100, 100]; | |
181 var scrollingElementScrollTop = [0, 0, 0, 0, 45 - 3]; | |
182 for (var i = 0; i < deltas.length; ++i) { | |
183 applyDelta(deltas[i]); | |
184 assert_equals(c.scrollTop, cScrollTop[i], "For id 'c' on step " + i); | |
185 assert_equals(a.scrollTop, aScrollTop[i], "For id 'a' on step " + i); | |
186 assert_equals(document.scrollingElement.scrollTop, scrollingElementScrollT
op[i], "For scrollingElement on step " + i); | |
187 } | |
188 }, "Consuming deltas prevents scrolling."); | |
189 | |
190 test(function() { | |
191 reset(); | |
192 | |
193 for (var i = 0; i < deltas.length; ++i) | |
194 applyDelta(deltas[i]); | |
195 | |
196 for (var i = 0; i < elements.length; ++i) { | |
197 assert_equals(elements[i].numberOfScrollBegins, deltas.length, "Incorrect
number of begin events for " + elements[i].id); | |
198 assert_equals(elements[i].numberOfScrollEnds, deltas.length, "Incorrect nu
mber of end events for " + elements[i].id); | |
199 } | |
200 }, "Correct number of scroll end and begin events observed."); | |
201 | |
202 { | |
203 // NOTE - this async test needs to be run last, as it shares state with the | |
204 // other tests. If other tests are run after it, they'll modify the state | |
205 // while this test is still running. | |
206 var flingTest = async_test("Touchscreen fling doesn't propagate."); | |
207 reset(); | |
208 | |
209 function assertScrollTops(cTop, aTop, scrollingElementTop, step) { | |
210 assert_equals(c.scrollTop, cTop, "For id 'c' on step " + step); | |
211 assert_equals(a.scrollTop, aTop, "For id 'a' on step " + step); | |
212 assert_equals(document.scrollingElement.scrollTop, scrollingElementTop, "F
or scrollingElement on step " + step); | |
213 }; | |
214 | |
215 var frame_actions = [ | |
216 function() { | |
217 eventSender.gestureFlingStart(10, 10, -1000000, -1000000, "touchscreen")
; | |
218 }, | |
219 flingTest.step_func(function() { | |
220 assertScrollTops(0, 0, 0, 1); | |
221 }), | |
222 flingTest.step_func(function() { | |
223 assertScrollTops(100, 0, 0, 2); | |
224 }), | |
225 flingTest.step_func(function() { | |
226 assertScrollTops(100, 0, 0, 3); | |
227 }), | |
228 flingTest.step_func(function() { | |
229 assertScrollTops(100, 0, 0, 4); | |
230 flingTest.done(); | |
231 }) | |
232 ] | |
233 | |
234 function executeFrameActions(frame_actions) { | |
235 var frame = 0; | |
236 function raf() { | |
237 frame_actions[frame](); | |
238 frame++; | |
239 if (frame >= frame_actions.length) | |
240 return; | |
241 window.requestAnimationFrame(raf); | |
242 } | |
243 window.requestAnimationFrame(raf); | |
244 } | |
245 | |
246 executeFrameActions(frame_actions); | |
247 } | |
248 } | |
249 | |
250 </script> | |
251 </body> | |
252 </html> | |
OLD | NEW |