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> | |
5 <div id="root" style="display: inline-block; overflow-y: scroll; height: 200px;
border: 3px solid black"> | 4 <div id="root" style="display: inline-block; overflow-y: scroll; height: 200px;
border: 3px solid black"> |
6 <div style="width:100px; height: 300px;"></div> | 5 <div style="width:100px; height: 300px;"></div> |
7 <div id="target" style="background-color: green; width:100px; height:100px"></
div> | 6 <div id="target" style="background-color: green; width:100px; height:100px"></
div> |
| 7 <div id="afterTarget" style="width:100px; height: 300px;"></div> |
8 </div> | 8 </div> |
9 <div style="width:100%;height:700px;"></div> | |
10 | 9 |
11 <script> | 10 <script> |
12 description("Simple intersection observer test with explicit root and target in
the same document."); | 11 description("Test that notifications are sent correctly when root and/or target
are removed from the DOM tree."); |
13 var target = document.getElementById("target"); | 12 var target = document.getElementById("target"); |
| 13 var afterTarget = document.getElementById("afterTarget"); |
14 var root = document.getElementById("root"); | 14 var root = document.getElementById("root"); |
15 var entries = []; | 15 var entries = []; |
16 var observer = new IntersectionObserver( | 16 var observer = new IntersectionObserver( |
17 changes => { entries = entries.concat(changes) }, | 17 changes => { entries = entries.concat(changes) }, |
18 { root: document.getElementById("root") } | 18 { root: document.getElementById("root") } |
19 ); | 19 ); |
20 | 20 |
21 onload = function() { | 21 onload = function() { |
22 observer.observe(target); | 22 observer.observe(target); |
23 entries = entries.concat(observer.takeRecords()); | 23 entries = entries.concat(observer.takeRecords()); |
24 shouldBeEqualToNumber("entries.length", 0); | 24 shouldBeEqualToNumber("entries.length", 0); |
25 requestAnimationFrame(() => { requestAnimationFrame(step0) }); | 25 root.scrollTop = 150; |
26 } | 26 requestAnimationFrame(() => { requestAnimationFrame(step1) }); |
27 | |
28 // Test that notifications are not generated when the target is overflow clipped
by the root. | |
29 function step0() { | |
30 entries = entries.concat(observer.takeRecords()); | |
31 shouldBeEqualToNumber("entries.length", 0); | |
32 document.scrollingElement.scrollTop = 600; | |
33 requestAnimationFrame(step1); | |
34 } | 27 } |
35 | 28 |
36 function step1() { | 29 function step1() { |
37 entries = entries.concat(observer.takeRecords()); | 30 entries = entries.concat(observer.takeRecords()); |
38 shouldBeEqualToNumber("entries.length", 0); | 31 shouldBeEqualToNumber("entries.length", 1); |
39 root.scrollTop = 150; | 32 if (entries.length > 0) { |
| 33 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 11); |
| 34 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 111); |
| 35 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 161); |
| 36 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 261); |
| 37 shouldBeEqualToNumber("entries[0].intersectionRect.left", 11); |
| 38 shouldBeEqualToNumber("entries[0].intersectionRect.right", 111); |
| 39 shouldBeEqualToNumber("entries[0].intersectionRect.top", 161); |
| 40 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 211); |
| 41 shouldBeEqualToNumber("entries[0].rootBounds.left", 11); |
| 42 shouldBeEqualToNumber("entries[0].rootBounds.right", 111); |
| 43 shouldBeEqualToNumber("entries[0].rootBounds.top", 11); |
| 44 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 211); |
| 45 shouldEvaluateToSameObject("entries[0].target", target); |
| 46 } |
| 47 root.removeChild(target); |
40 requestAnimationFrame(step2); | 48 requestAnimationFrame(step2); |
41 } | 49 } |
42 | 50 |
43 function step2() { | 51 function step2() { |
44 entries = entries.concat(observer.takeRecords()); | 52 entries = entries.concat(observer.takeRecords()); |
45 shouldBeEqualToNumber("entries.length", 1); | 53 shouldBeEqualToNumber("entries.length", 2); |
46 if (entries.length > 0) { | 54 if (entries.length > 1) { |
47 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 11); | 55 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 0); |
48 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 111); | 56 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 0); |
49 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 261); | 57 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 0); |
50 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 361); | 58 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 0) |
51 shouldBeEqualToNumber("entries[0].intersectionRect.left", 11); | 59 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); |
52 shouldBeEqualToNumber("entries[0].intersectionRect.right", 111); | 60 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); |
53 shouldBeEqualToNumber("entries[0].intersectionRect.top", 261); | 61 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); |
54 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 311); | 62 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); |
55 shouldBeEqualToNumber("entries[0].rootBounds.left", 11); | 63 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); |
56 shouldBeEqualToNumber("entries[0].rootBounds.right", 111); | 64 shouldBeEqualToNumber("entries[1].rootBounds.right", 0); |
57 shouldBeEqualToNumber("entries[0].rootBounds.top", 111); | 65 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); |
58 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 311); | 66 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 0); |
59 shouldEvaluateToSameObject("entries[0].target", target); | 67 shouldEvaluateToSameObject("entries[1].target", target); |
60 } | 68 } |
61 document.scrollingElement.scrollTop = 0; | 69 root.scrollTop = 0; |
| 70 root.insertBefore(target, afterTarget); |
62 requestAnimationFrame(step3); | 71 requestAnimationFrame(step3); |
63 } | 72 } |
64 | 73 |
65 function step3() { | 74 function step3() { |
66 entries = entries.concat(observer.takeRecords()); | 75 entries = entries.concat(observer.takeRecords()); |
67 shouldBeEqualToNumber("entries.length", 1); | 76 shouldBeEqualToNumber("entries.length", 2); |
68 root.scrollTop = 0; | 77 root.scrollTop = 150; |
69 requestAnimationFrame(step4); | 78 requestAnimationFrame(step4); |
70 } | 79 } |
71 | 80 |
72 function step4() { | 81 function step4() { |
73 entries = entries.concat(observer.takeRecords()); | 82 entries = entries.concat(observer.takeRecords()); |
74 shouldBeEqualToNumber("entries.length", 2); | |
75 if (entries.length > 1) { | |
76 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 11); | |
77 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 111); | |
78 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 1011); | |
79 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 1111); | |
80 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); | |
81 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); | |
82 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); | |
83 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); | |
84 shouldBeEqualToNumber("entries[1].rootBounds.left", 11); | |
85 shouldBeEqualToNumber("entries[1].rootBounds.right", 111); | |
86 shouldBeEqualToNumber("entries[1].rootBounds.top", 711); | |
87 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 911); | |
88 shouldEvaluateToSameObject("entries[1].target", target); | |
89 } | |
90 root.scrollTop = 150; | |
91 requestAnimationFrame(step5); | |
92 } | |
93 | |
94 // This tests that notifications are generated even when the root element is off
screen. | |
95 function step5() { | |
96 entries = entries.concat(observer.takeRecords()); | |
97 shouldBeEqualToNumber("entries.length", 3); | 83 shouldBeEqualToNumber("entries.length", 3); |
98 if (entries.length > 2) { | 84 if (entries.length > 2) { |
99 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 11); | 85 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 11); |
100 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 111); | 86 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 111); |
101 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 861); | 87 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 161); |
102 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 961); | 88 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 261); |
103 shouldBeEqualToNumber("entries[2].intersectionRect.left", 11); | 89 shouldBeEqualToNumber("entries[2].intersectionRect.left", 11); |
104 shouldBeEqualToNumber("entries[2].intersectionRect.right", 111); | 90 shouldBeEqualToNumber("entries[2].intersectionRect.right", 111); |
105 shouldBeEqualToNumber("entries[2].intersectionRect.top", 861); | 91 shouldBeEqualToNumber("entries[2].intersectionRect.top", 161); |
106 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 911); | 92 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 211); |
107 shouldBeEqualToNumber("entries[2].rootBounds.left", 11); | 93 shouldBeEqualToNumber("entries[2].rootBounds.left", 11); |
108 shouldBeEqualToNumber("entries[2].rootBounds.right", 111); | 94 shouldBeEqualToNumber("entries[2].rootBounds.right", 111); |
109 shouldBeEqualToNumber("entries[2].rootBounds.top", 711); | 95 shouldBeEqualToNumber("entries[2].rootBounds.top", 11); |
110 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 911); | 96 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 211); |
111 shouldEvaluateToSameObject("entries[2].target", target); | 97 shouldEvaluateToSameObject("entries[2].target", target); |
112 } | 98 } |
113 | |
114 finishJSTest(); | 99 finishJSTest(); |
115 } | 100 } |
116 </script> | 101 </script> |
OLD | NEW |