| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <script src="../resources/js-test.js"></script> | 
|  | 3 <script src="helper-functions.js"></script> | 
|  | 4 <div style="width:100%; height:700px;"></div> | 
|  | 5 <div style="white-space: nowrap;"> | 
|  | 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> | 
|  | 8   <div style="display: inline-block; width: 1000px; height: 100px"></div> | 
|  | 9 </div> | 
|  | 10 <div style="width:100%; height:700px;"></div> | 
|  | 11 | 
|  | 12 <script> | 
|  | 13   description("Intersection observer test with root margin and implicit root."); | 
|  | 14   var target = document.getElementById("target"); | 
|  | 15   var entries = []; | 
|  | 16 | 
|  | 17   observer_callback = function(changes) { | 
|  | 18     for (var i in changes) | 
|  | 19       entries.push(changes[i]); | 
|  | 20   }; | 
|  | 21   var observer = new IntersectionObserver(observer_callback, { | 
|  | 22     rootMargin: "10px 20% 40% 30px" | 
|  | 23   }); | 
|  | 24   observer.observe(target); | 
|  | 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() { | 
|  | 30     setTimeout(function() { | 
|  | 31       shouldBeEqualToNumber("entries.length", 0); | 
|  | 32       document.scrollingElement.scrollLeft = 100; | 
|  | 33       requestAnimationFrame(step1); | 
|  | 34     }); | 
|  | 35   } | 
|  | 36 | 
|  | 37   function step1() { | 
|  | 38     setTimeout(function() { | 
|  | 39       shouldBeEqualToNumber("entries.length", 1); | 
|  | 40       shouldBeEqualToNumber("entries[0].boundingClientRect.left", 912); | 
|  | 41       shouldBeEqualToNumber("entries[0].boundingClientRect.right", 1012); | 
|  | 42       shouldBeEqualToNumber("entries[0].boundingClientRect.top", 708); | 
|  | 43       shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 808); | 
|  | 44       shouldBeEqualToNumber("entries[0].intersectionRect.left", 912); | 
|  | 45       shouldBeEqualToNumber("entries[0].intersectionRect.right", 942); | 
|  | 46       shouldBeEqualToNumber("entries[0].intersectionRect.top", 708); | 
|  | 47       shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 808); | 
|  | 48       shouldBeEqualToNumber("entries[0].rootBounds.left", -30); | 
|  | 49       shouldBeEqualToNumber("entries[0].rootBounds.right", 942); | 
|  | 50       shouldBeEqualToNumber("entries[0].rootBounds.top", -10); | 
|  | 51       shouldBeEqualToNumber("entries[0].rootBounds.bottom", 819); | 
|  | 52       shouldEvaluateToSameObject("entries[0].target", target); | 
|  | 53       document.scrollingElement.scrollTop = 800; | 
|  | 54       requestAnimationFrame(step2); | 
|  | 55     }); | 
|  | 56   } | 
|  | 57 | 
|  | 58   function step2() { | 
|  | 59     setTimeout(function() { | 
|  | 60       shouldBeEqualToNumber("entries.length", 1); | 
|  | 61       document.scrollingElement.scrollTop = 900; | 
|  | 62       requestAnimationFrame(step3); | 
|  | 63     }); | 
|  | 64   } | 
|  | 65 | 
|  | 66   function step3() { | 
|  | 67     setTimeout(function() { | 
|  | 68       shouldBeEqualToNumber("entries.length", 2); | 
|  | 69       shouldBeEqualToNumber("entries[1].boundingClientRect.left", 912); | 
|  | 70       shouldBeEqualToNumber("entries[1].boundingClientRect.right", 1012); | 
|  | 71       shouldBeEqualToNumber("entries[1].boundingClientRect.top", -192); | 
|  | 72       shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", -92); | 
|  | 73       shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); | 
|  | 74       shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); | 
|  | 75       shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); | 
|  | 76       shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); | 
|  | 77       shouldBeEqualToNumber("entries[1].rootBounds.left", -30); | 
|  | 78       shouldBeEqualToNumber("entries[1].rootBounds.right", 942); | 
|  | 79       shouldBeEqualToNumber("entries[1].rootBounds.top", -10); | 
|  | 80       shouldBeEqualToNumber("entries[1].rootBounds.bottom", 819); | 
|  | 81       shouldEvaluateToSameObject("entries[1].target", target); | 
|  | 82       finishTest(); | 
|  | 83       document.scrollingElement.scrollLeft = 0; | 
|  | 84       document.scrollingElement.scrollTop = 0; | 
|  | 85     }); | 
|  | 86   } | 
|  | 87 | 
|  | 88   requestAnimationFrame(step0); | 
|  | 89 </script> | 
| OLD | NEW | 
|---|