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