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"); |
(...skipping 27 matching lines...) Expand all Loading... |
38 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 588); | 38 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 588); |
39 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 688); | 39 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 688); |
40 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8); | 40 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8); |
41 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108); | 41 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108); |
42 shouldBeEqualToNumber("entries[0].intersectionRect.top", 588); | 42 shouldBeEqualToNumber("entries[0].intersectionRect.top", 588); |
43 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 600); | 43 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 600); |
44 shouldBeEqualToNumber("entries[0].rootBounds.left", 0); | 44 shouldBeEqualToNumber("entries[0].rootBounds.left", 0); |
45 shouldBeEqualToNumber("entries[0].rootBounds.right", 785); | 45 shouldBeEqualToNumber("entries[0].rootBounds.right", 785); |
46 shouldBeEqualToNumber("entries[0].rootBounds.top", 0); | 46 shouldBeEqualToNumber("entries[0].rootBounds.top", 0); |
47 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600); | 47 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600); |
| 48 shouldBeCloseTo("entries[0].intersectionRatio", intersectionRatio(entries[0]
), .0001); |
48 shouldEvaluateToSameObject("entries[0].target", target); | 49 shouldEvaluateToSameObject("entries[0].target", target); |
49 } | 50 } |
50 document.scrollingElement.scrollTop = 160; | 51 document.scrollingElement.scrollTop = 160; |
51 requestAnimationFrame(step2); | 52 requestAnimationFrame(step2); |
52 } | 53 } |
53 | 54 |
54 function step2() { | 55 function step2() { |
55 entries = entries.concat(observer.takeRecords()); | 56 entries = entries.concat(observer.takeRecords()); |
56 shouldBeEqualToNumber("entries.length", 2); | 57 shouldBeEqualToNumber("entries.length", 2); |
57 if (entries.length > 1) { | 58 if (entries.length > 1) { |
58 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8); | 59 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8); |
59 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108); | 60 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108); |
60 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 548); | 61 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 548); |
61 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 648); | 62 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 648); |
62 shouldBeEqualToNumber("entries[1].intersectionRect.left", 8); | 63 shouldBeEqualToNumber("entries[1].intersectionRect.left", 8); |
63 shouldBeEqualToNumber("entries[1].intersectionRect.right", 108); | 64 shouldBeEqualToNumber("entries[1].intersectionRect.right", 108); |
64 shouldBeEqualToNumber("entries[1].intersectionRect.top", 548); | 65 shouldBeEqualToNumber("entries[1].intersectionRect.top", 548); |
65 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 600); | 66 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 600); |
66 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); | 67 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); |
67 shouldBeEqualToNumber("entries[1].rootBounds.right", 785); | 68 shouldBeEqualToNumber("entries[1].rootBounds.right", 785); |
68 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); | 69 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); |
69 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600); | 70 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600); |
| 71 shouldBeCloseTo("entries[1].intersectionRatio", intersectionRatio(entries[1]
), .0001); |
70 shouldEvaluateToSameObject("entries[1].target", target); | 72 shouldEvaluateToSameObject("entries[1].target", target); |
71 } | 73 } |
72 document.scrollingElement.scrollTop = 200; | 74 document.scrollingElement.scrollTop = 200; |
73 requestAnimationFrame(step3); | 75 requestAnimationFrame(step3); |
74 } | 76 } |
75 | 77 |
76 function step3() { | 78 function step3() { |
77 entries = entries.concat(observer.takeRecords()); | 79 entries = entries.concat(observer.takeRecords()); |
78 shouldBeEqualToNumber("entries.length", 3); | 80 shouldBeEqualToNumber("entries.length", 3); |
79 if (entries.length > 2) { | 81 if (entries.length > 2) { |
80 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8); | 82 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8); |
81 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 108); | 83 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 108); |
82 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 508); | 84 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 508); |
83 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 608); | 85 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 608); |
84 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8); | 86 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8); |
85 shouldBeEqualToNumber("entries[2].intersectionRect.right", 108); | 87 shouldBeEqualToNumber("entries[2].intersectionRect.right", 108); |
86 shouldBeEqualToNumber("entries[2].intersectionRect.top", 508); | 88 shouldBeEqualToNumber("entries[2].intersectionRect.top", 508); |
87 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 600); | 89 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 600); |
88 shouldBeEqualToNumber("entries[2].rootBounds.left", 0); | 90 shouldBeEqualToNumber("entries[2].rootBounds.left", 0); |
89 shouldBeEqualToNumber("entries[2].rootBounds.right", 785); | 91 shouldBeEqualToNumber("entries[2].rootBounds.right", 785); |
90 shouldBeEqualToNumber("entries[2].rootBounds.top", 0); | 92 shouldBeEqualToNumber("entries[2].rootBounds.top", 0); |
91 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 600); | 93 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 600); |
| 94 shouldBeCloseTo("entries[2].intersectionRatio", intersectionRatio(entries[2]
), .0001); |
92 shouldEvaluateToSameObject("entries[2].target", target); | 95 shouldEvaluateToSameObject("entries[2].target", target); |
93 } | 96 } |
94 document.scrollingElement.scrollTop = 240; | 97 document.scrollingElement.scrollTop = 240; |
95 requestAnimationFrame(step4); | 98 requestAnimationFrame(step4); |
96 } | 99 } |
97 | 100 |
98 function step4() { | 101 function step4() { |
99 entries = entries.concat(observer.takeRecords()); | 102 entries = entries.concat(observer.takeRecords()); |
100 shouldBeEqualToNumber("entries.length", 4); | 103 shouldBeEqualToNumber("entries.length", 4); |
101 if (entries.length > 3) { | 104 if (entries.length > 3) { |
102 shouldBeEqualToNumber("entries[3].boundingClientRect.left", 8); | 105 shouldBeEqualToNumber("entries[3].boundingClientRect.left", 8); |
103 shouldBeEqualToNumber("entries[3].boundingClientRect.right", 108); | 106 shouldBeEqualToNumber("entries[3].boundingClientRect.right", 108); |
104 shouldBeEqualToNumber("entries[3].boundingClientRect.top", 468); | 107 shouldBeEqualToNumber("entries[3].boundingClientRect.top", 468); |
105 shouldBeEqualToNumber("entries[3].boundingClientRect.bottom", 568); | 108 shouldBeEqualToNumber("entries[3].boundingClientRect.bottom", 568); |
106 shouldBeEqualToNumber("entries[3].intersectionRect.left", 8); | 109 shouldBeEqualToNumber("entries[3].intersectionRect.left", 8); |
107 shouldBeEqualToNumber("entries[3].intersectionRect.right", 108); | 110 shouldBeEqualToNumber("entries[3].intersectionRect.right", 108); |
108 shouldBeEqualToNumber("entries[3].intersectionRect.top", 468); | 111 shouldBeEqualToNumber("entries[3].intersectionRect.top", 468); |
109 shouldBeEqualToNumber("entries[3].intersectionRect.bottom", 568); | 112 shouldBeEqualToNumber("entries[3].intersectionRect.bottom", 568); |
110 shouldBeEqualToNumber("entries[3].rootBounds.left", 0); | 113 shouldBeEqualToNumber("entries[3].rootBounds.left", 0); |
111 shouldBeEqualToNumber("entries[3].rootBounds.right", 785); | 114 shouldBeEqualToNumber("entries[3].rootBounds.right", 785); |
112 shouldBeEqualToNumber("entries[3].rootBounds.top", 0); | 115 shouldBeEqualToNumber("entries[3].rootBounds.top", 0); |
113 shouldBeEqualToNumber("entries[3].rootBounds.bottom", 600); | 116 shouldBeEqualToNumber("entries[3].rootBounds.bottom", 600); |
| 117 shouldBeCloseTo("entries[3].intersectionRatio", intersectionRatio(entries[3]
), .0001); |
114 shouldEvaluateToSameObject("entries[3].target", target); | 118 shouldEvaluateToSameObject("entries[3].target", target); |
115 } | 119 } |
116 document.scrollingElement.scrollTop = 740; | 120 document.scrollingElement.scrollTop = 740; |
117 requestAnimationFrame(step5); | 121 requestAnimationFrame(step5); |
118 } | 122 } |
119 | 123 |
120 function step5() { | 124 function step5() { |
121 entries = entries.concat(observer.takeRecords()); | 125 entries = entries.concat(observer.takeRecords()); |
122 shouldBeEqualToNumber("entries.length", 5); | 126 shouldBeEqualToNumber("entries.length", 5); |
123 if (entries.length > 4) { | 127 if (entries.length > 4) { |
124 shouldBeEqualToNumber("entries[4].boundingClientRect.left", 8); | 128 shouldBeEqualToNumber("entries[4].boundingClientRect.left", 8); |
125 shouldBeEqualToNumber("entries[4].boundingClientRect.right", 108); | 129 shouldBeEqualToNumber("entries[4].boundingClientRect.right", 108); |
126 shouldBeEqualToNumber("entries[4].boundingClientRect.top", -32); | 130 shouldBeEqualToNumber("entries[4].boundingClientRect.top", -32); |
127 shouldBeEqualToNumber("entries[4].boundingClientRect.bottom", 68); | 131 shouldBeEqualToNumber("entries[4].boundingClientRect.bottom", 68); |
128 shouldBeEqualToNumber("entries[4].intersectionRect.left", 8); | 132 shouldBeEqualToNumber("entries[4].intersectionRect.left", 8); |
129 shouldBeEqualToNumber("entries[4].intersectionRect.right", 108); | 133 shouldBeEqualToNumber("entries[4].intersectionRect.right", 108); |
130 shouldBeEqualToNumber("entries[4].intersectionRect.top", 0); | 134 shouldBeEqualToNumber("entries[4].intersectionRect.top", 0); |
131 shouldBeEqualToNumber("entries[4].intersectionRect.bottom", 68); | 135 shouldBeEqualToNumber("entries[4].intersectionRect.bottom", 68); |
132 shouldBeEqualToNumber("entries[4].rootBounds.left", 0); | 136 shouldBeEqualToNumber("entries[4].rootBounds.left", 0); |
133 shouldBeEqualToNumber("entries[4].rootBounds.right", 785); | 137 shouldBeEqualToNumber("entries[4].rootBounds.right", 785); |
134 shouldBeEqualToNumber("entries[4].rootBounds.top", 0); | 138 shouldBeEqualToNumber("entries[4].rootBounds.top", 0); |
135 shouldBeEqualToNumber("entries[4].rootBounds.bottom", 600); | 139 shouldBeEqualToNumber("entries[4].rootBounds.bottom", 600); |
| 140 shouldBeCloseTo("entries[4].intersectionRatio", intersectionRatio(entries[4]
), .0001); |
136 shouldEvaluateToSameObject("entries[4].target", target); | 141 shouldEvaluateToSameObject("entries[4].target", target); |
137 } | 142 } |
138 document.scrollingElement.scrollTop = 760; | 143 document.scrollingElement.scrollTop = 760; |
139 requestAnimationFrame(step6); | 144 requestAnimationFrame(step6); |
140 } | 145 } |
141 | 146 |
142 function step6() { | 147 function step6() { |
143 entries = entries.concat(observer.takeRecords()); | 148 entries = entries.concat(observer.takeRecords()); |
144 shouldBeEqualToNumber("entries.length", 6); | 149 shouldBeEqualToNumber("entries.length", 6); |
145 if (entries.length > 5) { | 150 if (entries.length > 5) { |
146 shouldBeEqualToNumber("entries[5].boundingClientRect.left", 8); | 151 shouldBeEqualToNumber("entries[5].boundingClientRect.left", 8); |
147 shouldBeEqualToNumber("entries[5].boundingClientRect.right", 108); | 152 shouldBeEqualToNumber("entries[5].boundingClientRect.right", 108); |
148 shouldBeEqualToNumber("entries[5].boundingClientRect.top", -52); | 153 shouldBeEqualToNumber("entries[5].boundingClientRect.top", -52); |
149 shouldBeEqualToNumber("entries[5].boundingClientRect.bottom", 48); | 154 shouldBeEqualToNumber("entries[5].boundingClientRect.bottom", 48); |
150 shouldBeEqualToNumber("entries[5].intersectionRect.left", 8); | 155 shouldBeEqualToNumber("entries[5].intersectionRect.left", 8); |
151 shouldBeEqualToNumber("entries[5].intersectionRect.right", 108); | 156 shouldBeEqualToNumber("entries[5].intersectionRect.right", 108); |
152 shouldBeEqualToNumber("entries[5].intersectionRect.top", 0); | 157 shouldBeEqualToNumber("entries[5].intersectionRect.top", 0); |
153 shouldBeEqualToNumber("entries[5].intersectionRect.bottom", 48); | 158 shouldBeEqualToNumber("entries[5].intersectionRect.bottom", 48); |
154 shouldBeEqualToNumber("entries[5].rootBounds.left", 0); | 159 shouldBeEqualToNumber("entries[5].rootBounds.left", 0); |
155 shouldBeEqualToNumber("entries[5].rootBounds.right", 785); | 160 shouldBeEqualToNumber("entries[5].rootBounds.right", 785); |
156 shouldBeEqualToNumber("entries[5].rootBounds.top", 0); | 161 shouldBeEqualToNumber("entries[5].rootBounds.top", 0); |
157 shouldBeEqualToNumber("entries[5].rootBounds.bottom", 600); | 162 shouldBeEqualToNumber("entries[5].rootBounds.bottom", 600); |
| 163 shouldBeCloseTo("entries[5].intersectionRatio", intersectionRatio(entries[5]
), .0001); |
158 shouldEvaluateToSameObject("entries[5].target", target); | 164 shouldEvaluateToSameObject("entries[5].target", target); |
159 } | 165 } |
160 document.scrollingElement.scrollTop = 800; | 166 document.scrollingElement.scrollTop = 800; |
161 requestAnimationFrame(step7); | 167 requestAnimationFrame(step7); |
162 } | 168 } |
163 | 169 |
164 function step7() { | 170 function step7() { |
165 entries = entries.concat(observer.takeRecords()); | 171 entries = entries.concat(observer.takeRecords()); |
166 shouldBeEqualToNumber("entries.length", 7); | 172 shouldBeEqualToNumber("entries.length", 7); |
167 if (entries.length > 6) { | 173 if (entries.length > 6) { |
168 shouldBeEqualToNumber("entries[6].boundingClientRect.left", 8); | 174 shouldBeEqualToNumber("entries[6].boundingClientRect.left", 8); |
169 shouldBeEqualToNumber("entries[6].boundingClientRect.right", 108); | 175 shouldBeEqualToNumber("entries[6].boundingClientRect.right", 108); |
170 shouldBeEqualToNumber("entries[6].boundingClientRect.top", -92); | 176 shouldBeEqualToNumber("entries[6].boundingClientRect.top", -92); |
171 shouldBeEqualToNumber("entries[6].boundingClientRect.bottom", 8); | 177 shouldBeEqualToNumber("entries[6].boundingClientRect.bottom", 8); |
172 shouldBeEqualToNumber("entries[6].intersectionRect.left", 8); | 178 shouldBeEqualToNumber("entries[6].intersectionRect.left", 8); |
173 shouldBeEqualToNumber("entries[6].intersectionRect.right", 108); | 179 shouldBeEqualToNumber("entries[6].intersectionRect.right", 108); |
174 shouldBeEqualToNumber("entries[6].intersectionRect.top", 0); | 180 shouldBeEqualToNumber("entries[6].intersectionRect.top", 0); |
175 shouldBeEqualToNumber("entries[6].intersectionRect.bottom", 8); | 181 shouldBeEqualToNumber("entries[6].intersectionRect.bottom", 8); |
176 shouldBeEqualToNumber("entries[6].rootBounds.left", 0); | 182 shouldBeEqualToNumber("entries[6].rootBounds.left", 0); |
177 shouldBeEqualToNumber("entries[6].rootBounds.right", 785); | 183 shouldBeEqualToNumber("entries[6].rootBounds.right", 785); |
178 shouldBeEqualToNumber("entries[6].rootBounds.top", 0); | 184 shouldBeEqualToNumber("entries[6].rootBounds.top", 0); |
179 shouldBeEqualToNumber("entries[6].rootBounds.bottom", 600); | 185 shouldBeEqualToNumber("entries[6].rootBounds.bottom", 600); |
| 186 shouldBeCloseTo("entries[6].intersectionRatio", intersectionRatio(entries[6]
), .0001); |
180 shouldEvaluateToSameObject("entries[6].target", target); | 187 shouldEvaluateToSameObject("entries[6].target", target); |
181 } | 188 } |
182 document.scrollingElement.scrollTop = 820; | 189 document.scrollingElement.scrollTop = 820; |
183 requestAnimationFrame(step8); | 190 requestAnimationFrame(step8); |
184 } | 191 } |
185 | 192 |
186 function step8() { | 193 function step8() { |
187 entries = entries.concat(observer.takeRecords()); | 194 entries = entries.concat(observer.takeRecords()); |
188 shouldBeEqualToNumber("entries.length", 8); | 195 shouldBeEqualToNumber("entries.length", 8); |
189 if (entries.length > 7) { | 196 if (entries.length > 7) { |
190 shouldBeEqualToNumber("entries[7].boundingClientRect.left", 8); | 197 shouldBeEqualToNumber("entries[7].boundingClientRect.left", 8); |
191 shouldBeEqualToNumber("entries[7].boundingClientRect.right", 108); | 198 shouldBeEqualToNumber("entries[7].boundingClientRect.right", 108); |
192 shouldBeEqualToNumber("entries[7].boundingClientRect.top", -112); | 199 shouldBeEqualToNumber("entries[7].boundingClientRect.top", -112); |
193 shouldBeEqualToNumber("entries[7].boundingClientRect.bottom", -12); | 200 shouldBeEqualToNumber("entries[7].boundingClientRect.bottom", -12); |
194 shouldBeEqualToNumber("entries[7].intersectionRect.left", 0); | 201 shouldBeEqualToNumber("entries[7].intersectionRect.left", 0); |
195 shouldBeEqualToNumber("entries[7].intersectionRect.right", 0); | 202 shouldBeEqualToNumber("entries[7].intersectionRect.right", 0); |
196 shouldBeEqualToNumber("entries[7].intersectionRect.top", 0); | 203 shouldBeEqualToNumber("entries[7].intersectionRect.top", 0); |
197 shouldBeEqualToNumber("entries[7].intersectionRect.bottom", 0); | 204 shouldBeEqualToNumber("entries[7].intersectionRect.bottom", 0); |
198 shouldBeEqualToNumber("entries[7].rootBounds.left", 0); | 205 shouldBeEqualToNumber("entries[7].rootBounds.left", 0); |
199 shouldBeEqualToNumber("entries[7].rootBounds.right", 785); | 206 shouldBeEqualToNumber("entries[7].rootBounds.right", 785); |
200 shouldBeEqualToNumber("entries[7].rootBounds.top", 0); | 207 shouldBeEqualToNumber("entries[7].rootBounds.top", 0); |
201 shouldBeEqualToNumber("entries[7].rootBounds.bottom", 600); | 208 shouldBeEqualToNumber("entries[7].rootBounds.bottom", 600); |
| 209 shouldBeCloseTo("entries[7].intersectionRatio", intersectionRatio(entries[7]
), .0001); |
202 shouldEvaluateToSameObject("entries[7].target", target); | 210 shouldEvaluateToSameObject("entries[7].target", target); |
203 } | 211 } |
204 finishJSTest(); | 212 finishJSTest(); |
205 document.scrollingElement.scrollTop = 0; | 213 document.scrollingElement.scrollTop = 0; |
206 } | 214 } |
207 </script> | 215 </script> |
OLD | NEW |