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

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: Address comments Created 3 years, 11 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
« no previous file with comments | « 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 <script src="./resources/intersection-observer-test-utils.js"></script>
5 <div id="target" style="background-color: green; width:100px; height:100px"></di v> 5
6 <div style="width:100%; height:700px;"></div> 6 <style>
7 pre, #log {
8 position: absolute;
9 top: 0;
10 left: 200px;
11 }
12 .spacer {
13 height: 700px;
14 }
15 #target {
16 width: 100px;
17 height: 100px;
18 background-color: green;
19 }
20 </style>
21
22 <div class="spacer"></div>
23 <div id="target"></div>
24 <div class="spacer"></div>
7 25
8 <script> 26 <script>
9 description("Intersection observer test with multiple thresholds.");
10 var target = document.getElementById("target");
11 var entries = []; 27 var entries = [];
12 var observer = new IntersectionObserver( 28 var target;
13 changes => { entries = entries.concat(changes) },
14 { threshold: [0, 0.25, 0.5, 0.75, 1] }
15 );
16 29
17 onload = function() { 30 runTestCycle(function() {
31 assert_equals(window.innerWidth, 800, "Window must be 800 pixels wide.");
32 assert_equals(window.innerHeight, 600, "Window must be 600 pixels high.");
33
34 target = document.getElementById("target");
35 var observer = new IntersectionObserver(function(changes) {
36 entries = entries.concat(changes)
37 }, { threshold: [0, 0.25, 0.5, 0.75, 1] });
18 observer.observe(target); 38 observer.observe(target);
19 entries = entries.concat(observer.takeRecords()); 39 entries = entries.concat(observer.takeRecords());
20 shouldBeEqualToNumber("entries.length", 0); 40 assert_equals(entries.length, 0, "No initial notifications.");
21 waitForNotification(step0); 41 runTestCycle(step0, "No notifications after first rAF.");
22 } 42 }, "Observer with multiple thresholds.");
23 43
24 function step0() { 44 function step0() {
25 shouldBeEqualToNumber("entries.length", 0);
26 document.scrollingElement.scrollTop = 120; 45 document.scrollingElement.scrollTop = 120;
27 waitForNotification(step1); 46 runTestCycle(step1, "document.scrollingElement.scrollTop = 120");
47 assert_equals(entries.length, 0, "No notifications after first rAF.");
28 } 48 }
29 49
30 function step1() { 50 function step1() {
31 shouldBeEqualToNumber("entries.length", 1);
32 if (entries.length > 0) {
33 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8);
34 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108);
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 }
48 document.scrollingElement.scrollTop = 160; 51 document.scrollingElement.scrollTop = 160;
49 waitForNotification(step2); 52 runTestCycle(step2, "document.scrollingElement.scrollTop = 160");
53 checkLastEntry(entries, 0, [8, 108, 588, 688, 8, 108, 588, 600, 0, 785, 0, 600 , target]);
50 } 54 }
51 55
52 function step2() { 56 function step2() {
53 shouldBeEqualToNumber("entries.length", 2);
54 if (entries.length > 1) {
55 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8);
56 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108);
57 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 548);
58 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 648);
59 shouldBeEqualToNumber("entries[1].intersectionRect.left", 8);
60 shouldBeEqualToNumber("entries[1].intersectionRect.right", 108);
61 shouldBeEqualToNumber("entries[1].intersectionRect.top", 548);
62 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 600);
63 shouldBeEqualToNumber("entries[1].rootBounds.left", 0);
64 shouldBeEqualToNumber("entries[1].rootBounds.right", 785);
65 shouldBeEqualToNumber("entries[1].rootBounds.top", 0);
66 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600);
67 shouldBeCloseTo("entries[1].intersectionRatio", intersectionRatio(entries[1] ), .0001);
68 shouldEvaluateToSameObject("entries[1].target", target);
69 }
70 document.scrollingElement.scrollTop = 200; 57 document.scrollingElement.scrollTop = 200;
71 waitForNotification(step3); 58 runTestCycle(step3, "document.scrollingElement.scrollTop = 200");
59 checkLastEntry(entries, 1, [8, 108, 548, 648, 8, 108, 548, 600, 0, 785, 0, 600 , target]);
72 } 60 }
73 61
74 function step3() { 62 function step3() {
75 shouldBeEqualToNumber("entries.length", 3);
76 if (entries.length > 2) {
77 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8);
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 }
92 document.scrollingElement.scrollTop = 240; 63 document.scrollingElement.scrollTop = 240;
93 waitForNotification(step4); 64 runTestCycle(step4, "document.scrollingElement.scrollTop = 240");
65 checkLastEntry(entries, 2, [8, 108, 508, 608, 8, 108, 508, 600, 0, 785, 0, 600 , target]);
94 } 66 }
95 67
96 function step4() { 68 function step4() {
97 shouldBeEqualToNumber("entries.length", 4);
98 if (entries.length > 3) {
99 shouldBeEqualToNumber("entries[3].boundingClientRect.left", 8);
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 }
114 document.scrollingElement.scrollTop = 740; 69 document.scrollingElement.scrollTop = 740;
115 waitForNotification(step5); 70 runTestCycle(step5, "document.scrollingElement.scrollTop = 740");
71 checkLastEntry(entries, 3, [8, 108, 468, 568, 8, 108, 468, 568, 0, 785, 0, 600 , target]);
116 } 72 }
117 73
118 function step5() { 74 function step5() {
119 shouldBeEqualToNumber("entries.length", 5);
120 if (entries.length > 4) {
121 shouldBeEqualToNumber("entries[4].boundingClientRect.left", 8);
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 }
136 document.scrollingElement.scrollTop = 760; 75 document.scrollingElement.scrollTop = 760;
137 waitForNotification(step6); 76 runTestCycle(step6, "document.scrollingElement.scrollTop = 760");
77 checkLastEntry(entries, 4, [8, 108, -32, 68, 8, 108, 0, 68, 0, 785, 0, 600, ta rget]);
138 } 78 }
139 79
140 function step6() { 80 function step6() {
141 shouldBeEqualToNumber("entries.length", 6);
142 if (entries.length > 5) {
143 shouldBeEqualToNumber("entries[5].boundingClientRect.left", 8);
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 }
158 document.scrollingElement.scrollTop = 800; 81 document.scrollingElement.scrollTop = 800;
159 waitForNotification(step7); 82 runTestCycle(step7, "document.scrollingElement.scrollTop = 800");
83 checkLastEntry(entries, 5, [8, 108, -52, 48, 8, 108, 0, 48, 0, 785, 0, 600, ta rget]);
160 } 84 }
161 85
162 function step7() { 86 function step7() {
163 shouldBeEqualToNumber("entries.length", 7); 87 checkLastEntry(entries, 6, [8, 108, -92, 8, 8, 108, 0, 8, 0, 785, 0, 600, targ et]);
164 if (entries.length > 6) {
165 shouldBeEqualToNumber("entries[6].boundingClientRect.left", 8);
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 }
180 document.scrollingElement.scrollTop = 820; 88 document.scrollingElement.scrollTop = 820;
181 waitForNotification(step8); 89 runTestCycle(step8, "document.scrollingElement.scrollTop = 820");
182 } 90 }
183 91
184 function step8() { 92 function step8() {
185 shouldBeEqualToNumber("entries.length", 8); 93 checkLastEntry(entries, 7, [8, 108, -112, -12, 0, 0, 0, 0, 0, 785, 0, 600, tar get]);
186 if (entries.length > 7) {
187 shouldBeEqualToNumber("entries[7].boundingClientRect.left", 8);
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 }
202 finishJSTest();
203 document.scrollingElement.scrollTop = 0; 94 document.scrollingElement.scrollTop = 0;
204 } 95 }
205 </script> 96 </script>
OLDNEW
« no previous file with comments | « 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