| 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="../resources/intersection-observer-helper-functions.js"></script> |
| 4 <div id="root" style="display: inline-block; overflow-y: scroll; height: 200px;
border: 3px solid black"> | 4 <div id="root" style="display: inline-block; overflow-y: scroll; height: 200px;
border: 3px solid black"> |
| 5 <div style="width:100px; height: 300px;"></div> | 5 <div style="width:100px; height: 300px;"></div> |
| 6 <div id="target" style="background-color: green; width:100px; height:100px"></
div> | 6 <div id="target" style="background-color: green; width:100px; height:100px"></
div> |
| 7 <div id="afterTarget" style="width:100px; height: 300px;"></div> | 7 <div id="afterTarget" style="width:100px; height: 300px;"></div> |
| 8 </div> | 8 </div> |
| 9 | 9 |
| 10 <script> | 10 <script> |
| 11 description("Test that notifications are sent correctly when root and/or target
are removed from the DOM tree."); | 11 description("Test that notifications are sent correctly when root and/or target
are removed from the DOM tree."); |
| 12 var target = document.getElementById("target"); | 12 var target = document.getElementById("target"); |
| 13 var afterTarget = document.getElementById("afterTarget"); | 13 var afterTarget = document.getElementById("afterTarget"); |
| 14 var root = document.getElementById("root"); | 14 var root = document.getElementById("root"); |
| 15 var entries = []; | 15 var entries = []; |
| 16 var observer = new IntersectionObserver( | 16 var observer = new IntersectionObserver( |
| 17 changes => { entries = entries.concat(changes) }, | 17 changes => { entries = entries.concat(changes) }, |
| 18 { root: document.getElementById("root") } | 18 { root: document.getElementById("root") } |
| 19 ); | 19 ); |
| 20 | 20 |
| 21 onload = function() { | 21 onload = function() { |
| 22 observer.observe(target); | 22 observer.observe(target); |
| 23 entries = entries.concat(observer.takeRecords()); | 23 entries = entries.concat(observer.takeRecords()); |
| 24 shouldBeEqualToNumber("entries.length", 0); | 24 shouldBeEqualToNumber("entries.length", 0); |
| 25 root.scrollTop = 150; | 25 root.scrollTop = 150; |
| 26 requestAnimationFrame(() => { requestAnimationFrame(step1) }); | 26 waitForNotification(step1); |
| 27 } | 27 } |
| 28 | 28 |
| 29 function step1() { | 29 function step1() { |
| 30 entries = entries.concat(observer.takeRecords()); | |
| 31 shouldBeEqualToNumber("entries.length", 1); | 30 shouldBeEqualToNumber("entries.length", 1); |
| 32 if (entries.length > 0) { | 31 if (entries.length > 0) { |
| 33 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 11); | 32 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 11); |
| 34 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 111); | 33 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 111); |
| 35 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 161); | 34 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 161); |
| 36 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 261); | 35 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 261); |
| 37 shouldBeEqualToNumber("entries[0].intersectionRect.left", 11); | 36 shouldBeEqualToNumber("entries[0].intersectionRect.left", 11); |
| 38 shouldBeEqualToNumber("entries[0].intersectionRect.right", 111); | 37 shouldBeEqualToNumber("entries[0].intersectionRect.right", 111); |
| 39 shouldBeEqualToNumber("entries[0].intersectionRect.top", 161); | 38 shouldBeEqualToNumber("entries[0].intersectionRect.top", 161); |
| 40 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 211); | 39 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 211); |
| 41 shouldBeEqualToNumber("entries[0].rootBounds.left", 11); | 40 shouldBeEqualToNumber("entries[0].rootBounds.left", 11); |
| 42 shouldBeEqualToNumber("entries[0].rootBounds.right", 111); | 41 shouldBeEqualToNumber("entries[0].rootBounds.right", 111); |
| 43 shouldBeEqualToNumber("entries[0].rootBounds.top", 11); | 42 shouldBeEqualToNumber("entries[0].rootBounds.top", 11); |
| 44 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 211); | 43 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 211); |
| 45 shouldEvaluateToSameObject("entries[0].target", target); | 44 shouldEvaluateToSameObject("entries[0].target", target); |
| 46 } | 45 } |
| 47 root.removeChild(target); | 46 root.removeChild(target); |
| 48 requestAnimationFrame(step2); | 47 waitForNotification(step2); |
| 49 } | 48 } |
| 50 | 49 |
| 51 function step2() { | 50 function step2() { |
| 52 entries = entries.concat(observer.takeRecords()); | |
| 53 shouldBeEqualToNumber("entries.length", 2); | 51 shouldBeEqualToNumber("entries.length", 2); |
| 54 if (entries.length > 1) { | 52 if (entries.length > 1) { |
| 55 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 0); | 53 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 0); |
| 56 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 0); | 54 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 0); |
| 57 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 0); | 55 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 0); |
| 58 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 0) | 56 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 0) |
| 59 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); | 57 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); |
| 60 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); | 58 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); |
| 61 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); | 59 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); |
| 62 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); | 60 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); |
| 63 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); | 61 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); |
| 64 shouldBeEqualToNumber("entries[1].rootBounds.right", 0); | 62 shouldBeEqualToNumber("entries[1].rootBounds.right", 0); |
| 65 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); | 63 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); |
| 66 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 0); | 64 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 0); |
| 67 shouldEvaluateToSameObject("entries[1].target", target); | 65 shouldEvaluateToSameObject("entries[1].target", target); |
| 68 } | 66 } |
| 69 root.scrollTop = 0; | 67 root.scrollTop = 0; |
| 70 root.insertBefore(target, afterTarget); | 68 root.insertBefore(target, afterTarget); |
| 71 requestAnimationFrame(step3); | 69 waitForNotification(step3); |
| 72 } | 70 } |
| 73 | 71 |
| 74 function step3() { | 72 function step3() { |
| 75 entries = entries.concat(observer.takeRecords()); | |
| 76 shouldBeEqualToNumber("entries.length", 2); | 73 shouldBeEqualToNumber("entries.length", 2); |
| 77 root.scrollTop = 150; | 74 root.scrollTop = 150; |
| 78 requestAnimationFrame(step4); | 75 waitForNotification(step4); |
| 79 } | 76 } |
| 80 | 77 |
| 81 function step4() { | 78 function step4() { |
| 82 entries = entries.concat(observer.takeRecords()); | |
| 83 shouldBeEqualToNumber("entries.length", 3); | 79 shouldBeEqualToNumber("entries.length", 3); |
| 84 if (entries.length > 2) { | 80 if (entries.length > 2) { |
| 85 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 11); | 81 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 11); |
| 86 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 111); | 82 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 111); |
| 87 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 161); | 83 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 161); |
| 88 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 261); | 84 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 261); |
| 89 shouldBeEqualToNumber("entries[2].intersectionRect.left", 11); | 85 shouldBeEqualToNumber("entries[2].intersectionRect.left", 11); |
| 90 shouldBeEqualToNumber("entries[2].intersectionRect.right", 111); | 86 shouldBeEqualToNumber("entries[2].intersectionRect.right", 111); |
| 91 shouldBeEqualToNumber("entries[2].intersectionRect.top", 161); | 87 shouldBeEqualToNumber("entries[2].intersectionRect.top", 161); |
| 92 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 211); | 88 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 211); |
| 93 shouldBeEqualToNumber("entries[2].rootBounds.left", 11); | 89 shouldBeEqualToNumber("entries[2].rootBounds.left", 11); |
| 94 shouldBeEqualToNumber("entries[2].rootBounds.right", 111); | 90 shouldBeEqualToNumber("entries[2].rootBounds.right", 111); |
| 95 shouldBeEqualToNumber("entries[2].rootBounds.top", 11); | 91 shouldBeEqualToNumber("entries[2].rootBounds.top", 11); |
| 96 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 211); | 92 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 211); |
| 97 shouldEvaluateToSameObject("entries[2].target", target); | 93 shouldEvaluateToSameObject("entries[2].target", target); |
| 98 } | 94 } |
| 99 finishJSTest(); | 95 finishJSTest(); |
| 100 } | 96 } |
| 101 </script> | 97 </script> |
| OLD | NEW |