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 style="white-space: nowrap;"> | 5 <div style="white-space: nowrap;"> |
6 <div style="display: inline-block; width: 1000px; height: 100px"></div> | 6 <div style="display: inline-block; width: 1000px; height: 100px"></div> |
7 <div id="target" style="display: inline-block; background-color: green; width:
100px; height:100px"></div> | 7 <div id="target" style="display: inline-block; background-color: green; width:
100px; height:100px"></div> |
8 <div style="display: inline-block; width: 1000px; height: 100px"></div> | 8 <div style="display: inline-block; width: 1000px; height: 100px"></div> |
9 </div> | 9 </div> |
10 <div style="width:100%; height:700px;"></div> | 10 <div style="width:100%; height:700px;"></div> |
11 | 11 |
12 <script> | 12 <script> |
13 description("Intersection observer test with root margin and implicit root."); | 13 description("Intersection observer test with root margin and implicit root."); |
14 var target = document.getElementById("target"); | 14 var target = document.getElementById("target"); |
15 var entries = []; | 15 var entries = []; |
16 | 16 |
17 observer_callback = function(changes) { | 17 observer_callback = function(changes) { |
18 for (var i in changes) | 18 for (var i in changes) |
19 entries.push(changes[i]); | 19 entries.push(changes[i]); |
20 }; | 20 }; |
21 var observer = new IntersectionObserver(observer_callback, { | 21 var observer = new IntersectionObserver(observer_callback, { |
22 rootMargin: "10px 20% 40% 30px" | 22 rootMargin: "10px 20% 40% 30px" |
23 }); | 23 }); |
24 observer.observe(target); | 24 observer.observe(target); |
25 | 25 |
26 // TODO(szager): It shouldn't be necessary to RAF after the call to observer() | |
27 // and before changing the scroll position, but it is. | |
28 | |
29 function step0() { | 26 function step0() { |
30 setTimeout(function() { | 27 setTimeout(function() { |
31 shouldBeEqualToNumber("entries.length", 0); | 28 shouldBeEqualToNumber("entries.length", 0); |
32 document.scrollingElement.scrollLeft = 100; | 29 document.scrollingElement.scrollLeft = 100; |
33 requestAnimationFrame(step1); | 30 requestAnimationFrame(step1); |
34 }); | 31 }); |
35 } | 32 } |
36 | 33 |
37 function step1() { | 34 function step1() { |
38 setTimeout(function() { | 35 setTimeout(function() { |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
78 shouldBeEqualToNumber("entries[1].rootBounds.right", 942); | 75 shouldBeEqualToNumber("entries[1].rootBounds.right", 942); |
79 shouldBeEqualToNumber("entries[1].rootBounds.top", -10); | 76 shouldBeEqualToNumber("entries[1].rootBounds.top", -10); |
80 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 819); | 77 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 819); |
81 shouldEvaluateToSameObject("entries[1].target", target); | 78 shouldEvaluateToSameObject("entries[1].target", target); |
82 finishTest(); | 79 finishTest(); |
83 document.scrollingElement.scrollLeft = 0; | 80 document.scrollingElement.scrollLeft = 0; |
84 document.scrollingElement.scrollTop = 0; | 81 document.scrollingElement.scrollTop = 0; |
85 }); | 82 }); |
86 } | 83 } |
87 | 84 |
88 requestAnimationFrame(step0); | 85 step0(); |
89 </script> | 86 </script> |
OLD | NEW |