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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/intersection-observer/multiple-thresholds.html

Issue 2560253004: IntersectionObserver: convert tests to testharness.js (Closed)
Patch Set: rebase Created 4 years 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
« third_party/WebKit/LayoutTests/intersection-observer/client-rect.html ('K') | « third_party/WebKit/LayoutTests/intersection-observer/multiple-targets-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/multiple-thresholds-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../resources/js-test.js"></script> 2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/intersection-observer-helper-functions.js"></script> 3 <script src="../resources/testharnessreport.js"></script>
4 <div style="width:100%; height:700px;"></div> 4 <div id="leading-space" 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 id="trailing-space" style="width:100%; height:700px;"></div>
7 7
8 <script> 8 <script>
9 description("Intersection observer test with multiple thresholds."); 9 function waitForNotification(f) {
10 var target = document.getElementById("target"); 10 requestAnimationFrame(() => {
11 var entries = []; 11 setTimeout(() => {
12 var observer = new IntersectionObserver( 12 setTimeout(f);
13 changes => { entries = entries.concat(changes) }, 13 });
14 { threshold: [0, 0.25, 0.5, 0.75, 1] } 14 });
15 ); 15 }
16 16
17 onload = function() { 17 onload = function() {
18 var t = async_test("Intersection observer test with multiple thresholds.");
19
20 test(function() { assert_equals(window.innerWidth, 800) }, "Window must be 800 pixels wide.");
21 test(function() { assert_equals(window.innerHeight, 600) }, "Window must be 60 0 pixels high.");
22
23 var target = document.getElementById("target");
24 var entries = [];
25 var observer = new IntersectionObserver(function(changes) {
26 entries = entries.concat(changes)
27 }, { threshold: [0, 0.25, 0.5, 0.75, 1] });
18 observer.observe(target); 28 observer.observe(target);
19 entries = entries.concat(observer.takeRecords()); 29 entries = entries.concat(observer.takeRecords());
20 shouldBeEqualToNumber("entries.length", 0); 30 test(function() { assert_equals(entries.length, 0) }, "No initial notification s.");
21 waitForNotification(step0); 31 waitForNotification(step0);
22 }
23 32
24 function step0() { 33 function rectArea(rect) {
25 shouldBeEqualToNumber("entries.length", 0); 34 return (rect.left - rect.right) * (rect.bottom - rect.top);
26 document.scrollingElement.scrollTop = 120; 35 }
27 waitForNotification(step1);
28 }
29 36
30 function step1() { 37 function intersectionRatio(entry) {
31 shouldBeEqualToNumber("entries.length", 1); 38 var targetArea = rectArea(entry.boundingClientRect);
32 if (entries.length > 0) { 39 if (!targetArea)
33 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8); 40 return 0;
34 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108); 41 return rectArea(entry.intersectionRect) / targetArea;
35 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 588);
36 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 688);
37 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8);
38 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108);
39 shouldBeEqualToNumber("entries[0].intersectionRect.top", 588);
40 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 600);
41 shouldBeEqualToNumber("entries[0].rootBounds.left", 0);
42 shouldBeEqualToNumber("entries[0].rootBounds.right", 785);
43 shouldBeEqualToNumber("entries[0].rootBounds.top", 0);
44 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600);
45 shouldBeCloseTo("entries[0].intersectionRatio", intersectionRatio(entries[0] ), .0001);
46 shouldEvaluateToSameObject("entries[0].target", target);
47 } 42 }
48 document.scrollingElement.scrollTop = 160;
49 waitForNotification(step2);
50 }
51 43
52 function step2() { 44 function checkEntry(i, expected) {
53 shouldBeEqualToNumber("entries.length", 2); 45 test(function() { assert_equals(entries.length, i+1) }, String(i+1) + " noti fication(s).");
54 if (entries.length > 1) { 46 if (expected && entries.length > i) {
55 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8); 47 test(function() { assert_equals(entries[i].boundingClientRect.left, expect ed[0]) },
56 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108); 48 "entries[" + i + "].boundingClientRect.left == " + expected[0]);
57 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 548); 49 test(function() { assert_equals(entries[i].boundingClientRect.right, expec ted[1]) },
58 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 648); 50 "entries[" + i + "].boundingClientRect.right == " + expected[1]);
59 shouldBeEqualToNumber("entries[1].intersectionRect.left", 8); 51 test(function() { assert_equals(entries[i].boundingClientRect.top, expecte d[2]) },
60 shouldBeEqualToNumber("entries[1].intersectionRect.right", 108); 52 "entries[" + i + "].boundingClientRect.top == " + expected[2]);
61 shouldBeEqualToNumber("entries[1].intersectionRect.top", 548); 53 test(function() { assert_equals(entries[i].boundingClientRect.bottom, expe cted[3]) },
62 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 600); 54 "entries[" + i + "].boundingClientRect.bottom == " + expected[3]);
63 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); 55 test(function() { assert_equals(entries[i].intersectionRect.left, expected [4]) },
64 shouldBeEqualToNumber("entries[1].rootBounds.right", 785); 56 "entries[" + i + "].intersectionRect.left == " + expected[4]);
65 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); 57 test(function() { assert_equals(entries[i].intersectionRect.right, expecte d[5]) },
66 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600); 58 "entries[" + i + "].intersectionRect.right == " + expected[5]);
67 shouldBeCloseTo("entries[1].intersectionRatio", intersectionRatio(entries[1] ), .0001); 59 test(function() { assert_equals(entries[i].intersectionRect.top, expected[ 6]) },
68 shouldEvaluateToSameObject("entries[1].target", target); 60 "entries[" + i + "].intersectionRect.top == " + expected[6]);
61 test(function() { assert_equals(entries[i].intersectionRect.bottom, expect ed[7]) },
62 "entries[" + i + "].intersectionRect.bottom == " + expected[7]);
63 test(function() { assert_equals(entries[i].rootBounds.left, expected[8]) } ,
64 "entries[" + i + "].rootBounds.left == " + expected[8]);
65 test(function() { assert_equals(entries[i].rootBounds.right, expected[9]) },
66 "entries[" + i + "].rootBounds.right == " + expected[9]);
67 test(function() { assert_equals(entries[i].rootBounds.top, expected[10]) } ,
68 "entries[" + i + "].rootBounds.top == " + expected[10]);
69 test(function() { assert_equals(entries[i].rootBounds.bottom, expected[11] ) },
70 "entries[" + i + "].rootBounds.bottom == " + expected[11]);
71 test(function() { assert_true(entries[i].target === expected[12]) },
72 "entries[" + i + "].target === " + expected[12]);
73 test(function() { assert_approx_equals(entries[i].intersectionRatio,
74 » » » » » intersectionRatio(entries[i]), .000 1) },
75 "entries[" + i + "].intersectionRatio ~= " + intersectionRatio(entrie s[i]));
76 }
69 } 77 }
70 document.scrollingElement.scrollTop = 200;
71 waitForNotification(step3);
72 }
73 78
74 function step3() { 79 function step0() {
75 shouldBeEqualToNumber("entries.length", 3); 80 test(function() { assert_equals(entries.length, 0) }, "No notifications afte r first rAF.");
76 if (entries.length > 2) { 81 document.scrollingElement.scrollTop = 120;
77 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8); 82 waitForNotification(step1);
78 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 108);
79 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 508);
80 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 608);
81 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8);
82 shouldBeEqualToNumber("entries[2].intersectionRect.right", 108);
83 shouldBeEqualToNumber("entries[2].intersectionRect.top", 508);
84 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 600);
85 shouldBeEqualToNumber("entries[2].rootBounds.left", 0);
86 shouldBeEqualToNumber("entries[2].rootBounds.right", 785);
87 shouldBeEqualToNumber("entries[2].rootBounds.top", 0);
88 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 600);
89 shouldBeCloseTo("entries[2].intersectionRatio", intersectionRatio(entries[2] ), .0001);
90 shouldEvaluateToSameObject("entries[2].target", target);
91 } 83 }
92 document.scrollingElement.scrollTop = 240;
93 waitForNotification(step4);
94 }
95 84
96 function step4() { 85 function step1() {
97 shouldBeEqualToNumber("entries.length", 4); 86 checkEntry(0, [8, 108, 588, 688, 8, 108, 588, 600, 0, 785, 0, 600, target]);
98 if (entries.length > 3) { 87 document.scrollingElement.scrollTop = 160;
99 shouldBeEqualToNumber("entries[3].boundingClientRect.left", 8); 88 waitForNotification(step2);
100 shouldBeEqualToNumber("entries[3].boundingClientRect.right", 108);
101 shouldBeEqualToNumber("entries[3].boundingClientRect.top", 468);
102 shouldBeEqualToNumber("entries[3].boundingClientRect.bottom", 568);
103 shouldBeEqualToNumber("entries[3].intersectionRect.left", 8);
104 shouldBeEqualToNumber("entries[3].intersectionRect.right", 108);
105 shouldBeEqualToNumber("entries[3].intersectionRect.top", 468);
106 shouldBeEqualToNumber("entries[3].intersectionRect.bottom", 568);
107 shouldBeEqualToNumber("entries[3].rootBounds.left", 0);
108 shouldBeEqualToNumber("entries[3].rootBounds.right", 785);
109 shouldBeEqualToNumber("entries[3].rootBounds.top", 0);
110 shouldBeEqualToNumber("entries[3].rootBounds.bottom", 600);
111 shouldBeCloseTo("entries[3].intersectionRatio", intersectionRatio(entries[3] ), .0001);
112 shouldEvaluateToSameObject("entries[3].target", target);
113 } 89 }
114 document.scrollingElement.scrollTop = 740;
115 waitForNotification(step5);
116 }
117 90
118 function step5() { 91 function step2() {
119 shouldBeEqualToNumber("entries.length", 5); 92 checkEntry(1, [8, 108, 548, 648, 8, 108, 548, 600, 0, 785, 0, 600, target]);
120 if (entries.length > 4) { 93 document.scrollingElement.scrollTop = 200;
121 shouldBeEqualToNumber("entries[4].boundingClientRect.left", 8); 94 waitForNotification(step3);
122 shouldBeEqualToNumber("entries[4].boundingClientRect.right", 108);
123 shouldBeEqualToNumber("entries[4].boundingClientRect.top", -32);
124 shouldBeEqualToNumber("entries[4].boundingClientRect.bottom", 68);
125 shouldBeEqualToNumber("entries[4].intersectionRect.left", 8);
126 shouldBeEqualToNumber("entries[4].intersectionRect.right", 108);
127 shouldBeEqualToNumber("entries[4].intersectionRect.top", 0);
128 shouldBeEqualToNumber("entries[4].intersectionRect.bottom", 68);
129 shouldBeEqualToNumber("entries[4].rootBounds.left", 0);
130 shouldBeEqualToNumber("entries[4].rootBounds.right", 785);
131 shouldBeEqualToNumber("entries[4].rootBounds.top", 0);
132 shouldBeEqualToNumber("entries[4].rootBounds.bottom", 600);
133 shouldBeCloseTo("entries[4].intersectionRatio", intersectionRatio(entries[4] ), .0001);
134 shouldEvaluateToSameObject("entries[4].target", target);
135 } 95 }
136 document.scrollingElement.scrollTop = 760;
137 waitForNotification(step6);
138 }
139 96
140 function step6() { 97 function step3() {
141 shouldBeEqualToNumber("entries.length", 6); 98 checkEntry(2, [8, 108, 508, 608, 8, 108, 508, 600, 0, 785, 0, 600, target]);
142 if (entries.length > 5) { 99 document.scrollingElement.scrollTop = 240;
143 shouldBeEqualToNumber("entries[5].boundingClientRect.left", 8); 100 waitForNotification(step4);
144 shouldBeEqualToNumber("entries[5].boundingClientRect.right", 108);
145 shouldBeEqualToNumber("entries[5].boundingClientRect.top", -52);
146 shouldBeEqualToNumber("entries[5].boundingClientRect.bottom", 48);
147 shouldBeEqualToNumber("entries[5].intersectionRect.left", 8);
148 shouldBeEqualToNumber("entries[5].intersectionRect.right", 108);
149 shouldBeEqualToNumber("entries[5].intersectionRect.top", 0);
150 shouldBeEqualToNumber("entries[5].intersectionRect.bottom", 48);
151 shouldBeEqualToNumber("entries[5].rootBounds.left", 0);
152 shouldBeEqualToNumber("entries[5].rootBounds.right", 785);
153 shouldBeEqualToNumber("entries[5].rootBounds.top", 0);
154 shouldBeEqualToNumber("entries[5].rootBounds.bottom", 600);
155 shouldBeCloseTo("entries[5].intersectionRatio", intersectionRatio(entries[5] ), .0001);
156 shouldEvaluateToSameObject("entries[5].target", target);
157 } 101 }
158 document.scrollingElement.scrollTop = 800;
159 waitForNotification(step7);
160 }
161 102
162 function step7() { 103 function step4() {
163 shouldBeEqualToNumber("entries.length", 7); 104 checkEntry(3, [8, 108, 468, 568, 8, 108, 468, 568, 0, 785, 0, 600, target]);
164 if (entries.length > 6) { 105 document.scrollingElement.scrollTop = 740;
165 shouldBeEqualToNumber("entries[6].boundingClientRect.left", 8); 106 waitForNotification(step5);
166 shouldBeEqualToNumber("entries[6].boundingClientRect.right", 108);
167 shouldBeEqualToNumber("entries[6].boundingClientRect.top", -92);
168 shouldBeEqualToNumber("entries[6].boundingClientRect.bottom", 8);
169 shouldBeEqualToNumber("entries[6].intersectionRect.left", 8);
170 shouldBeEqualToNumber("entries[6].intersectionRect.right", 108);
171 shouldBeEqualToNumber("entries[6].intersectionRect.top", 0);
172 shouldBeEqualToNumber("entries[6].intersectionRect.bottom", 8);
173 shouldBeEqualToNumber("entries[6].rootBounds.left", 0);
174 shouldBeEqualToNumber("entries[6].rootBounds.right", 785);
175 shouldBeEqualToNumber("entries[6].rootBounds.top", 0);
176 shouldBeEqualToNumber("entries[6].rootBounds.bottom", 600);
177 shouldBeCloseTo("entries[6].intersectionRatio", intersectionRatio(entries[6] ), .0001);
178 shouldEvaluateToSameObject("entries[6].target", target);
179 } 107 }
180 document.scrollingElement.scrollTop = 820;
181 waitForNotification(step8);
182 }
183 108
184 function step8() { 109 function step5() {
185 shouldBeEqualToNumber("entries.length", 8); 110 checkEntry(4, [8, 108, -32, 68, 8, 108, 0, 68, 0, 785, 0, 600, target]);
186 if (entries.length > 7) { 111 document.scrollingElement.scrollTop = 760;
187 shouldBeEqualToNumber("entries[7].boundingClientRect.left", 8); 112 waitForNotification(step6);
188 shouldBeEqualToNumber("entries[7].boundingClientRect.right", 108);
189 shouldBeEqualToNumber("entries[7].boundingClientRect.top", -112);
190 shouldBeEqualToNumber("entries[7].boundingClientRect.bottom", -12);
191 shouldBeEqualToNumber("entries[7].intersectionRect.left", 0);
192 shouldBeEqualToNumber("entries[7].intersectionRect.right", 0);
193 shouldBeEqualToNumber("entries[7].intersectionRect.top", 0);
194 shouldBeEqualToNumber("entries[7].intersectionRect.bottom", 0);
195 shouldBeEqualToNumber("entries[7].rootBounds.left", 0);
196 shouldBeEqualToNumber("entries[7].rootBounds.right", 785);
197 shouldBeEqualToNumber("entries[7].rootBounds.top", 0);
198 shouldBeEqualToNumber("entries[7].rootBounds.bottom", 600);
199 shouldBeCloseTo("entries[7].intersectionRatio", intersectionRatio(entries[7] ), .0001);
200 shouldEvaluateToSameObject("entries[7].target", target);
201 } 113 }
202 finishJSTest(); 114
203 document.scrollingElement.scrollTop = 0; 115 function step6() {
204 } 116 checkEntry(5, [8, 108, -52, 48, 8, 108, 0, 48, 0, 785, 0, 600, target]);
117 document.scrollingElement.scrollTop = 800;
118 waitForNotification(step7);
119 }
120
121 function step7() {
122 checkEntry(6, [8, 108, -92, 8, 8, 108, 0, 8, 0, 785, 0, 600, target]);
123 document.scrollingElement.scrollTop = 820;
124 waitForNotification(step8);
125 }
126
127 function step8() {
128 checkEntry(7, [8, 108, -112, -12, 0, 0, 0, 0, 0, 785, 0, 600, target]);
129 document.getElementById("leading-space").style.height = "";
130 document.getElementById("trailing-space").style.height = "";
131 document.scrollingElement.scrollTop = 0;
132 t.done();
133 }
134 };
205 </script> 135 </script>
OLDNEW
« third_party/WebKit/LayoutTests/intersection-observer/client-rect.html ('K') | « third_party/WebKit/LayoutTests/intersection-observer/multiple-targets-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/multiple-thresholds-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698