| 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 |