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("Simple intersection observer test with no explicit root and one d
ocument."); | 9 description("Simple intersection observer test with no explicit root and one doc
ument."); |
10 var target = document.getElementById("target"); | 10 var target = document.getElementById("target"); |
11 var entries = []; | 11 var entries = []; |
12 observer_callback = function(changes) { | 12 var observer = new IntersectionObserver(changes => { entries = entries.concat(ch
anges) }); |
13 for (var i in changes) | 13 |
14 entries.push(changes[i]); | 14 onload = function() { |
15 }; | |
16 var observer = new IntersectionObserver(observer_callback, {}); | |
17 observer.observe(target); | 15 observer.observe(target); |
| 16 entries = entries.concat(observer.takeRecords()); |
| 17 shouldBeEqualToNumber("entries.length", 0); |
| 18 document.scrollingElement.scrollTop = 300; |
| 19 // See README for explanation of double RAF. |
| 20 requestAnimationFrame(() => { requestAnimationFrame(step1) }); |
| 21 }; |
18 | 22 |
19 onload = function() { | 23 function step1() { |
20 shouldBeEqualToNumber("entries.length", 0); | 24 entries = entries.concat(observer.takeRecords()); |
21 document.scrollingElement.scrollTop = 300; | 25 shouldBeEqualToNumber("entries.length", 1); |
22 requestAnimationFrame(step1); | 26 if (entries.length > 0) { |
23 }; | 27 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8); |
| 28 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108); |
| 29 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 408); |
| 30 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 508); |
| 31 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8); |
| 32 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108); |
| 33 shouldBeEqualToNumber("entries[0].intersectionRect.top", 408); |
| 34 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 508); |
| 35 shouldBeEqualToNumber("entries[0].rootBounds.left", 0); |
| 36 shouldBeEqualToNumber("entries[0].rootBounds.right", 785); |
| 37 shouldBeEqualToNumber("entries[0].rootBounds.top", 0); |
| 38 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600); |
| 39 shouldEvaluateToSameObject("entries[0].target", target); |
24 | 40 |
25 function step1() { | 41 // ClientRect members of IntersectionObserverEntry should be stable. |
26 setTimeout(function() { | 42 shouldEvaluateToSameObject("entries[0].boundingClientRect", entries[0].bound
ingClientRect); |
27 shouldBeEqualToNumber("entries.length", 1); | 43 shouldEvaluateToSameObject("entries[0].intersectionRect", entries[0].interse
ctionRect); |
28 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8); | 44 shouldEvaluateToSameObject("entries[0].rootBounds", entries[0].rootBounds); |
29 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108); | 45 } |
30 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 408); | 46 document.scrollingElement.scrollTop = 100; |
31 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 508); | 47 requestAnimationFrame(step2); |
32 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8); | 48 } |
33 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108); | |
34 shouldBeEqualToNumber("entries[0].intersectionRect.top", 408); | |
35 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 508); | |
36 shouldBeEqualToNumber("entries[0].rootBounds.left", 0); | |
37 shouldBeEqualToNumber("entries[0].rootBounds.right", 785); | |
38 shouldBeEqualToNumber("entries[0].rootBounds.top", 0); | |
39 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600); | |
40 shouldEvaluateToSameObject("entries[0].target", target); | |
41 | 49 |
42 // ClientRect members of IntersectionObserverEntry should be stable. | 50 function step2() { |
43 shouldEvaluateToSameObject("entries[0].boundingClientRect", entries[0].bou
ndingClientRect); | 51 entries = entries.concat(observer.takeRecords()); |
44 shouldEvaluateToSameObject("entries[0].intersectionRect", entries[0].inter
sectionRect); | 52 shouldBeEqualToNumber("entries.length", 2); |
45 shouldEvaluateToSameObject("entries[0].rootBounds", entries[0].rootBounds)
; | 53 if (entries.length > 1) { |
46 | 54 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8); |
47 document.scrollingElement.scrollTop = 100; | 55 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108); |
48 requestAnimationFrame(step2); | 56 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 608); |
49 }); | 57 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 708); |
| 58 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); |
| 59 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); |
| 60 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); |
| 61 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); |
| 62 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); |
| 63 shouldBeEqualToNumber("entries[1].rootBounds.right", 785); |
| 64 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); |
| 65 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600); |
| 66 shouldEvaluateToSameObject("entries[1].target", target); |
50 } | 67 } |
51 | 68 finishJSTest(); |
52 function step2() { | 69 document.scrollingElement.scrollTop = 0; |
53 setTimeout(function() { | 70 } |
54 shouldBeEqualToNumber("entries.length", 2); | |
55 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8); | |
56 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108); | |
57 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 608); | |
58 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 708); | |
59 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); | |
60 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); | |
61 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); | |
62 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); | |
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 shouldEvaluateToSameObject("entries[1].target", target); | |
68 finishJSTest(); | |
69 document.scrollingElement.scrollTop = 0; | |
70 }); | |
71 } | |
72 | 71 |
73 </script> | 72 </script> |
OLD | NEW |