OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../resources/js-test.js"></script> | 2 <script src="../resources/js-test.js"></script> |
3 <script src="helper-functions.js"></script> | 3 <script src="helper-functions.js"></script> |
4 <div style="width:100%; height:700px;"></div> | 4 <div style="width:100%; height:700px;"></div> |
5 <div id="target" style="background-color: green; width:100px; height:100px"></di
v> | 5 <div id="target" style="background-color: green; width:100px; height:100px"></di
v> |
6 <div style="width:100%; height:700px;"></div> | 6 <div style="width:100%; height:700px;"></div> |
7 | 7 |
8 <script> | 8 <script> |
9 description("Intersection observer test with multiple thresholds."); | 9 description("Intersection observer test with multiple thresholds."); |
10 var target = document.getElementById("target"); | 10 var target = document.getElementById("target"); |
11 var entries = []; | 11 var entries = []; |
12 var observer = new IntersectionObserver( | |
13 changes => { entries = entries.concat(changes) }, | |
14 { threshold: [0, 0.25, 0.5, 0.75, 1] } | |
15 ); | |
16 | 12 |
17 onload = function() { | 13 observer_callback = function(changes) { |
| 14 for (var i in changes) |
| 15 entries.push(changes[i]); |
| 16 }; |
| 17 var observer = new IntersectionObserver(observer_callback, { |
| 18 threshold: [0, 0.25, 0.5, 0.75, 1] |
| 19 }); |
18 observer.observe(target); | 20 observer.observe(target); |
19 entries = entries.concat(observer.takeRecords()); | |
20 shouldBeEqualToNumber("entries.length", 0); | |
21 // See README for explanation of double RAF. | |
22 requestAnimationFrame(() => { requestAnimationFrame(step0) }); | |
23 } | |
24 | 21 |
25 function step0() { | 22 function step0() { |
26 entries = entries.concat(observer.takeRecords()); | 23 setTimeout(function() { |
27 shouldBeEqualToNumber("entries.length", 0); | 24 shouldBeEqualToNumber("entries.length", 0); |
28 document.scrollingElement.scrollTop = 120; | 25 document.scrollingElement.scrollTop = 120; |
29 requestAnimationFrame(step1); | 26 requestAnimationFrame(step1); |
30 } | 27 }); |
| 28 } |
31 | 29 |
32 function step1() { | 30 function step1() { |
33 entries = entries.concat(observer.takeRecords()); | 31 setTimeout(function() { |
34 shouldBeEqualToNumber("entries.length", 1); | 32 shouldBeEqualToNumber("entries.length", 1); |
35 if (entries.length > 0) { | 33 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8); |
36 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8); | 34 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108); |
37 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108); | 35 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 588); |
38 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 588); | 36 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 688); |
39 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 688); | 37 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8); |
40 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8); | 38 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108); |
41 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108); | 39 shouldBeEqualToNumber("entries[0].intersectionRect.top", 588); |
42 shouldBeEqualToNumber("entries[0].intersectionRect.top", 588); | 40 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 600); |
43 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 600); | 41 shouldBeEqualToNumber("entries[0].rootBounds.left", 0); |
44 shouldBeEqualToNumber("entries[0].rootBounds.left", 0); | 42 shouldBeEqualToNumber("entries[0].rootBounds.right", 785); |
45 shouldBeEqualToNumber("entries[0].rootBounds.right", 785); | 43 shouldBeEqualToNumber("entries[0].rootBounds.top", 0); |
46 shouldBeEqualToNumber("entries[0].rootBounds.top", 0); | 44 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600); |
47 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600); | 45 shouldEvaluateToSameObject("entries[0].target", target); |
48 shouldEvaluateToSameObject("entries[0].target", target); | 46 document.scrollingElement.scrollTop = 160; |
| 47 requestAnimationFrame(step2); |
| 48 }); |
49 } | 49 } |
50 document.scrollingElement.scrollTop = 160; | |
51 requestAnimationFrame(step2); | |
52 } | |
53 | 50 |
54 function step2() { | 51 function step2() { |
55 entries = entries.concat(observer.takeRecords()); | 52 setTimeout(function() { |
56 shouldBeEqualToNumber("entries.length", 2); | 53 shouldBeEqualToNumber("entries.length", 2); |
57 if (entries.length > 1) { | 54 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8); |
58 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8); | 55 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108); |
59 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108); | 56 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 548); |
60 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 548); | 57 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 648); |
61 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 648); | 58 shouldBeEqualToNumber("entries[1].intersectionRect.left", 8); |
62 shouldBeEqualToNumber("entries[1].intersectionRect.left", 8); | 59 shouldBeEqualToNumber("entries[1].intersectionRect.right", 108); |
63 shouldBeEqualToNumber("entries[1].intersectionRect.right", 108); | 60 shouldBeEqualToNumber("entries[1].intersectionRect.top", 548); |
64 shouldBeEqualToNumber("entries[1].intersectionRect.top", 548); | 61 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 600); |
65 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 600); | 62 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); |
66 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); | 63 shouldBeEqualToNumber("entries[1].rootBounds.right", 785); |
67 shouldBeEqualToNumber("entries[1].rootBounds.right", 785); | 64 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); |
68 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); | 65 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600); |
69 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600); | 66 shouldEvaluateToSameObject("entries[1].target", target); |
70 shouldEvaluateToSameObject("entries[1].target", target); | 67 document.scrollingElement.scrollTop = 200; |
| 68 requestAnimationFrame(step3); |
| 69 }); |
71 } | 70 } |
72 document.scrollingElement.scrollTop = 200; | |
73 requestAnimationFrame(step3); | |
74 } | |
75 | 71 |
76 function step3() { | 72 function step3() { |
77 entries = entries.concat(observer.takeRecords()); | 73 setTimeout(function() { |
78 shouldBeEqualToNumber("entries.length", 3); | 74 shouldBeEqualToNumber("entries.length", 3); |
79 if (entries.length > 2) { | 75 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8); |
80 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8); | 76 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 108); |
81 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 108); | 77 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 508); |
82 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 508); | 78 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 608); |
83 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 608); | 79 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8); |
84 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8); | 80 shouldBeEqualToNumber("entries[2].intersectionRect.right", 108); |
85 shouldBeEqualToNumber("entries[2].intersectionRect.right", 108); | 81 shouldBeEqualToNumber("entries[2].intersectionRect.top", 508); |
86 shouldBeEqualToNumber("entries[2].intersectionRect.top", 508); | 82 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 600); |
87 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 600); | 83 shouldBeEqualToNumber("entries[2].rootBounds.left", 0); |
88 shouldBeEqualToNumber("entries[2].rootBounds.left", 0); | 84 shouldBeEqualToNumber("entries[2].rootBounds.right", 785); |
89 shouldBeEqualToNumber("entries[2].rootBounds.right", 785); | 85 shouldBeEqualToNumber("entries[2].rootBounds.top", 0); |
90 shouldBeEqualToNumber("entries[2].rootBounds.top", 0); | 86 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 600); |
91 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 600); | 87 shouldEvaluateToSameObject("entries[2].target", target); |
92 shouldEvaluateToSameObject("entries[2].target", target); | 88 document.scrollingElement.scrollTop = 240; |
| 89 requestAnimationFrame(step4); |
| 90 }); |
93 } | 91 } |
94 document.scrollingElement.scrollTop = 240; | |
95 requestAnimationFrame(step4); | |
96 } | |
97 | 92 |
98 function step4() { | 93 function step4() { |
99 entries = entries.concat(observer.takeRecords()); | 94 setTimeout(function() { |
100 shouldBeEqualToNumber("entries.length", 4); | 95 shouldBeEqualToNumber("entries.length", 4); |
101 if (entries.length > 3) { | 96 shouldBeEqualToNumber("entries[3].boundingClientRect.left", 8); |
102 shouldBeEqualToNumber("entries[3].boundingClientRect.left", 8); | 97 shouldBeEqualToNumber("entries[3].boundingClientRect.right", 108); |
103 shouldBeEqualToNumber("entries[3].boundingClientRect.right", 108); | 98 shouldBeEqualToNumber("entries[3].boundingClientRect.top", 468); |
104 shouldBeEqualToNumber("entries[3].boundingClientRect.top", 468); | 99 shouldBeEqualToNumber("entries[3].boundingClientRect.bottom", 568); |
105 shouldBeEqualToNumber("entries[3].boundingClientRect.bottom", 568); | 100 shouldBeEqualToNumber("entries[3].intersectionRect.left", 8); |
106 shouldBeEqualToNumber("entries[3].intersectionRect.left", 8); | 101 shouldBeEqualToNumber("entries[3].intersectionRect.right", 108); |
107 shouldBeEqualToNumber("entries[3].intersectionRect.right", 108); | 102 shouldBeEqualToNumber("entries[3].intersectionRect.top", 468); |
108 shouldBeEqualToNumber("entries[3].intersectionRect.top", 468); | 103 shouldBeEqualToNumber("entries[3].intersectionRect.bottom", 568); |
109 shouldBeEqualToNumber("entries[3].intersectionRect.bottom", 568); | 104 shouldBeEqualToNumber("entries[3].rootBounds.left", 0); |
110 shouldBeEqualToNumber("entries[3].rootBounds.left", 0); | 105 shouldBeEqualToNumber("entries[3].rootBounds.right", 785); |
111 shouldBeEqualToNumber("entries[3].rootBounds.right", 785); | 106 shouldBeEqualToNumber("entries[3].rootBounds.top", 0); |
112 shouldBeEqualToNumber("entries[3].rootBounds.top", 0); | 107 shouldBeEqualToNumber("entries[3].rootBounds.bottom", 600); |
113 shouldBeEqualToNumber("entries[3].rootBounds.bottom", 600); | 108 shouldEvaluateToSameObject("entries[3].target", target); |
114 shouldEvaluateToSameObject("entries[3].target", target); | 109 document.scrollingElement.scrollTop = 740; |
| 110 requestAnimationFrame(step5); |
| 111 }); |
115 } | 112 } |
116 document.scrollingElement.scrollTop = 740; | |
117 requestAnimationFrame(step5); | |
118 } | |
119 | 113 |
120 function step5() { | 114 function step5() { |
121 entries = entries.concat(observer.takeRecords()); | 115 setTimeout(function() { |
122 shouldBeEqualToNumber("entries.length", 5); | 116 shouldBeEqualToNumber("entries.length", 5); |
123 if (entries.length > 4) { | 117 shouldBeEqualToNumber("entries[4].boundingClientRect.left", 8); |
124 shouldBeEqualToNumber("entries[4].boundingClientRect.left", 8); | 118 shouldBeEqualToNumber("entries[4].boundingClientRect.right", 108); |
125 shouldBeEqualToNumber("entries[4].boundingClientRect.right", 108); | 119 shouldBeEqualToNumber("entries[4].boundingClientRect.top", -32); |
126 shouldBeEqualToNumber("entries[4].boundingClientRect.top", -32); | 120 shouldBeEqualToNumber("entries[4].boundingClientRect.bottom", 68); |
127 shouldBeEqualToNumber("entries[4].boundingClientRect.bottom", 68); | 121 shouldBeEqualToNumber("entries[4].intersectionRect.left", 8); |
128 shouldBeEqualToNumber("entries[4].intersectionRect.left", 8); | 122 shouldBeEqualToNumber("entries[4].intersectionRect.right", 108); |
129 shouldBeEqualToNumber("entries[4].intersectionRect.right", 108); | 123 shouldBeEqualToNumber("entries[4].intersectionRect.top", 0); |
130 shouldBeEqualToNumber("entries[4].intersectionRect.top", 0); | 124 shouldBeEqualToNumber("entries[4].intersectionRect.bottom", 68); |
131 shouldBeEqualToNumber("entries[4].intersectionRect.bottom", 68); | 125 shouldBeEqualToNumber("entries[4].rootBounds.left", 0); |
132 shouldBeEqualToNumber("entries[4].rootBounds.left", 0); | 126 shouldBeEqualToNumber("entries[4].rootBounds.right", 785); |
133 shouldBeEqualToNumber("entries[4].rootBounds.right", 785); | 127 shouldBeEqualToNumber("entries[4].rootBounds.top", 0); |
134 shouldBeEqualToNumber("entries[4].rootBounds.top", 0); | 128 shouldBeEqualToNumber("entries[4].rootBounds.bottom", 600); |
135 shouldBeEqualToNumber("entries[4].rootBounds.bottom", 600); | 129 shouldEvaluateToSameObject("entries[4].target", target); |
136 shouldEvaluateToSameObject("entries[4].target", target); | 130 document.scrollingElement.scrollTop = 760; |
| 131 requestAnimationFrame(step6); |
| 132 }); |
137 } | 133 } |
138 document.scrollingElement.scrollTop = 760; | |
139 requestAnimationFrame(step6); | |
140 } | |
141 | 134 |
142 function step6() { | 135 function step6() { |
143 entries = entries.concat(observer.takeRecords()); | 136 setTimeout(function() { |
144 shouldBeEqualToNumber("entries.length", 6); | 137 shouldBeEqualToNumber("entries.length", 6); |
145 if (entries.length > 5) { | 138 shouldBeEqualToNumber("entries[5].boundingClientRect.left", 8); |
146 shouldBeEqualToNumber("entries[5].boundingClientRect.left", 8); | 139 shouldBeEqualToNumber("entries[5].boundingClientRect.right", 108); |
147 shouldBeEqualToNumber("entries[5].boundingClientRect.right", 108); | 140 shouldBeEqualToNumber("entries[5].boundingClientRect.top", -52); |
148 shouldBeEqualToNumber("entries[5].boundingClientRect.top", -52); | 141 shouldBeEqualToNumber("entries[5].boundingClientRect.bottom", 48); |
149 shouldBeEqualToNumber("entries[5].boundingClientRect.bottom", 48); | 142 shouldBeEqualToNumber("entries[5].intersectionRect.left", 8); |
150 shouldBeEqualToNumber("entries[5].intersectionRect.left", 8); | 143 shouldBeEqualToNumber("entries[5].intersectionRect.right", 108); |
151 shouldBeEqualToNumber("entries[5].intersectionRect.right", 108); | 144 shouldBeEqualToNumber("entries[5].intersectionRect.top", 0); |
152 shouldBeEqualToNumber("entries[5].intersectionRect.top", 0); | 145 shouldBeEqualToNumber("entries[5].intersectionRect.bottom", 48); |
153 shouldBeEqualToNumber("entries[5].intersectionRect.bottom", 48); | 146 shouldBeEqualToNumber("entries[5].rootBounds.left", 0); |
154 shouldBeEqualToNumber("entries[5].rootBounds.left", 0); | 147 shouldBeEqualToNumber("entries[5].rootBounds.right", 785); |
155 shouldBeEqualToNumber("entries[5].rootBounds.right", 785); | 148 shouldBeEqualToNumber("entries[5].rootBounds.top", 0); |
156 shouldBeEqualToNumber("entries[5].rootBounds.top", 0); | 149 shouldBeEqualToNumber("entries[5].rootBounds.bottom", 600); |
157 shouldBeEqualToNumber("entries[5].rootBounds.bottom", 600); | 150 shouldEvaluateToSameObject("entries[5].target", target); |
158 shouldEvaluateToSameObject("entries[5].target", target); | 151 document.scrollingElement.scrollTop = 800; |
| 152 requestAnimationFrame(step7); |
| 153 }); |
159 } | 154 } |
160 document.scrollingElement.scrollTop = 800; | |
161 requestAnimationFrame(step7); | |
162 } | |
163 | 155 |
164 function step7() { | 156 function step7() { |
165 entries = entries.concat(observer.takeRecords()); | 157 setTimeout(function() { |
166 shouldBeEqualToNumber("entries.length", 7); | 158 shouldBeEqualToNumber("entries.length", 7); |
167 if (entries.length > 6) { | 159 shouldBeEqualToNumber("entries[6].boundingClientRect.left", 8); |
168 shouldBeEqualToNumber("entries[6].boundingClientRect.left", 8); | 160 shouldBeEqualToNumber("entries[6].boundingClientRect.right", 108); |
169 shouldBeEqualToNumber("entries[6].boundingClientRect.right", 108); | 161 shouldBeEqualToNumber("entries[6].boundingClientRect.top", -92); |
170 shouldBeEqualToNumber("entries[6].boundingClientRect.top", -92); | 162 shouldBeEqualToNumber("entries[6].boundingClientRect.bottom", 8); |
171 shouldBeEqualToNumber("entries[6].boundingClientRect.bottom", 8); | 163 shouldBeEqualToNumber("entries[6].intersectionRect.left", 8); |
172 shouldBeEqualToNumber("entries[6].intersectionRect.left", 8); | 164 shouldBeEqualToNumber("entries[6].intersectionRect.right", 108); |
173 shouldBeEqualToNumber("entries[6].intersectionRect.right", 108); | 165 shouldBeEqualToNumber("entries[6].intersectionRect.top", 0); |
174 shouldBeEqualToNumber("entries[6].intersectionRect.top", 0); | 166 shouldBeEqualToNumber("entries[6].intersectionRect.bottom", 8); |
175 shouldBeEqualToNumber("entries[6].intersectionRect.bottom", 8); | 167 shouldBeEqualToNumber("entries[6].rootBounds.left", 0); |
176 shouldBeEqualToNumber("entries[6].rootBounds.left", 0); | 168 shouldBeEqualToNumber("entries[6].rootBounds.right", 785); |
177 shouldBeEqualToNumber("entries[6].rootBounds.right", 785); | 169 shouldBeEqualToNumber("entries[6].rootBounds.top", 0); |
178 shouldBeEqualToNumber("entries[6].rootBounds.top", 0); | 170 shouldBeEqualToNumber("entries[6].rootBounds.bottom", 600); |
179 shouldBeEqualToNumber("entries[6].rootBounds.bottom", 600); | 171 shouldEvaluateToSameObject("entries[6].target", target); |
180 shouldEvaluateToSameObject("entries[6].target", target); | 172 document.scrollingElement.scrollTop = 820; |
| 173 requestAnimationFrame(step8); |
| 174 }); |
181 } | 175 } |
182 document.scrollingElement.scrollTop = 820; | |
183 requestAnimationFrame(step8); | |
184 } | |
185 | 176 |
186 function step8() { | 177 function step8() { |
187 entries = entries.concat(observer.takeRecords()); | 178 setTimeout(function() { |
188 shouldBeEqualToNumber("entries.length", 8); | 179 shouldBeEqualToNumber("entries.length", 8); |
189 if (entries.length > 7) { | 180 shouldBeEqualToNumber("entries[7].boundingClientRect.left", 8); |
190 shouldBeEqualToNumber("entries[7].boundingClientRect.left", 8); | 181 shouldBeEqualToNumber("entries[7].boundingClientRect.right", 108); |
191 shouldBeEqualToNumber("entries[7].boundingClientRect.right", 108); | 182 shouldBeEqualToNumber("entries[7].boundingClientRect.top", -112); |
192 shouldBeEqualToNumber("entries[7].boundingClientRect.top", -112); | 183 shouldBeEqualToNumber("entries[7].boundingClientRect.bottom", -12); |
193 shouldBeEqualToNumber("entries[7].boundingClientRect.bottom", -12); | 184 shouldBeEqualToNumber("entries[7].intersectionRect.left", 0); |
194 shouldBeEqualToNumber("entries[7].intersectionRect.left", 0); | 185 shouldBeEqualToNumber("entries[7].intersectionRect.right", 0); |
195 shouldBeEqualToNumber("entries[7].intersectionRect.right", 0); | 186 shouldBeEqualToNumber("entries[7].intersectionRect.top", 0); |
196 shouldBeEqualToNumber("entries[7].intersectionRect.top", 0); | 187 shouldBeEqualToNumber("entries[7].intersectionRect.bottom", 0); |
197 shouldBeEqualToNumber("entries[7].intersectionRect.bottom", 0); | 188 shouldBeEqualToNumber("entries[7].rootBounds.left", 0); |
198 shouldBeEqualToNumber("entries[7].rootBounds.left", 0); | 189 shouldBeEqualToNumber("entries[7].rootBounds.right", 785); |
199 shouldBeEqualToNumber("entries[7].rootBounds.right", 785); | 190 shouldBeEqualToNumber("entries[7].rootBounds.top", 0); |
200 shouldBeEqualToNumber("entries[7].rootBounds.top", 0); | 191 shouldBeEqualToNumber("entries[7].rootBounds.bottom", 600); |
201 shouldBeEqualToNumber("entries[7].rootBounds.bottom", 600); | 192 shouldEvaluateToSameObject("entries[7].target", target); |
202 shouldEvaluateToSameObject("entries[7].target", target); | 193 finishJSTest(); |
| 194 document.scrollingElement.scrollTop = 0; |
| 195 }); |
203 } | 196 } |
204 finishJSTest(); | 197 |
205 document.scrollingElement.scrollTop = 0; | 198 step0(); |
206 } | |
207 </script> | 199 </script> |
OLD | NEW |