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 function observer_callback(changes) { | 17 function observer_callback(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 | 21 |
22 var observer = new IntersectionObserver(observer_callback, { | 22 var observer = new IntersectionObserver(observer_callback, { |
23 rootMargin: "10px 20% 40% 30px" | 23 rootMargin: "10px 20% 40% 30px" |
24 }); | 24 }); |
25 observer.observe(target); | 25 observer.observe(target); |
26 | 26 |
27 // TODO(szager): It shouldn't be necessary to RAF after the call to observer() | |
28 // and before changing the scroll position, but it is. | |
29 | |
30 setTimeout(function() { | |
31 shouldThrow("new IntersectionObserver(observer_callback, { rootMargin: '1' }
)"); | |
32 shouldThrow("new IntersectionObserver(observer_callback, { rootMargin: '1em'
})"); | |
33 shouldThrow("new IntersectionObserver(observer_callback, { rootMargin: 'auto
' })"); | |
34 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin: '1
.4px' })"); | |
35 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin: '1
.4px 2px' })"); | |
36 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin: '1
.4px 2px 3%' })"); | |
37 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin: '1
.4px 2px 3% 40px junk junk junk' })"); | |
38 requestAnimationFrame(step0); | |
39 }, 0); | |
40 | |
41 function step0() { | 27 function step0() { |
42 setTimeout(function() { | 28 setTimeout(function() { |
| 29 shouldThrow("new IntersectionObserver(observer_callback, { rootMargin: '1'
})"); |
| 30 shouldThrow("new IntersectionObserver(observer_callback, { rootMargin: '1e
m' })"); |
| 31 shouldThrow("new IntersectionObserver(observer_callback, { rootMargin: 'au
to' })"); |
| 32 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin:
'1.4px' })"); |
| 33 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin:
'1.4px 2px' })"); |
| 34 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin:
'1.4px 2px 3%' })"); |
| 35 shouldNotThrow("new IntersectionObserver(observer_callback, { rootMargin:
'1.4px 2px 3% 40px junk junk junk' })"); |
43 shouldBeEqualToNumber("entries.length", 0); | 36 shouldBeEqualToNumber("entries.length", 0); |
44 document.scrollingElement.scrollLeft = 100; | 37 document.scrollingElement.scrollLeft = 100; |
45 requestAnimationFrame(step1); | 38 requestAnimationFrame(step1); |
46 }); | 39 }); |
47 } | 40 } |
48 | 41 |
49 function step1() { | 42 function step1() { |
50 setTimeout(function() { | 43 setTimeout(function() { |
51 shouldBeEqualToNumber("entries.length", 1); | 44 shouldBeEqualToNumber("entries.length", 1); |
52 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 912); | 45 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 912); |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
84 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", -92); | 77 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", -92); |
85 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); | 78 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); |
86 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); | 79 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); |
87 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); | 80 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); |
88 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); | 81 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); |
89 shouldBeEqualToNumber("entries[1].rootBounds.left", -30); | 82 shouldBeEqualToNumber("entries[1].rootBounds.left", -30); |
90 shouldBeEqualToNumber("entries[1].rootBounds.right", 942); | 83 shouldBeEqualToNumber("entries[1].rootBounds.right", 942); |
91 shouldBeEqualToNumber("entries[1].rootBounds.top", -10); | 84 shouldBeEqualToNumber("entries[1].rootBounds.top", -10); |
92 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 819); | 85 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 819); |
93 shouldEvaluateToSameObject("entries[1].target", target); | 86 shouldEvaluateToSameObject("entries[1].target", target); |
| 87 |
94 finishTest(); | 88 finishTest(); |
95 document.scrollingElement.scrollLeft = 0; | 89 document.scrollingElement.scrollLeft = 0; |
96 document.scrollingElement.scrollTop = 0; | 90 document.scrollingElement.scrollTop = 0; |
97 }); | 91 }); |
98 } | 92 } |
| 93 |
| 94 step0(); |
99 </script> | 95 </script> |
OLD | NEW |