| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <div style="height: 200px; width: 100px;"></div> | 2 <div style="height: 200px; width: 100px;"></div> |
| 3 <div id="target" style="background-color: green; width:100px; height:100px"></di
v> | 3 <div id="target" style="background-color: green; width:100px; height:100px"></di
v> |
| 4 <div style="height: 200px; width: 100px;"></div> | 4 <div style="height: 200px; width: 100px;"></div> |
| 5 | 5 |
| 6 <script> | 6 <script> |
| 7 var port; | 7 var port; |
| 8 var entries = []; | 8 var entries = []; |
| 9 var target = document.getElementById('target'); | 9 var target = document.getElementById('target'); |
| 10 var scroller = document.scrollingElement; | 10 var scroller = document.scrollingElement; |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 45 | 45 |
| 46 // Use a rootMargin here, and verify it does NOT get applied for the cross-origi
n case. | 46 // Use a rootMargin here, and verify it does NOT get applied for the cross-origi
n case. |
| 47 var observer = new IntersectionObserver(function(changes) { | 47 var observer = new IntersectionObserver(function(changes) { |
| 48 entries = entries.concat(changes) | 48 entries = entries.concat(changes) |
| 49 }, { rootMargin: "7px" }); | 49 }, { rootMargin: "7px" }); |
| 50 observer.observe(target); | 50 observer.observe(target); |
| 51 | 51 |
| 52 function step0() { | 52 function step0() { |
| 53 entries = entries.concat(observer.takeRecords()); | 53 entries = entries.concat(observer.takeRecords()); |
| 54 nextStep = step1; | 54 nextStep = step1; |
| 55 var expected = [{ |
| 56 boundingClientRect: coordinatesToClientRectJson(8, 208, 108, 308), |
| 57 intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0), |
| 58 rootBounds: "null", |
| 59 target: target.id |
| 60 }]; |
| 55 port.postMessage({ | 61 port.postMessage({ |
| 56 actual: entries.map(entryToJson), | 62 actual: entries.map(entryToJson), |
| 57 expected: [], | 63 expected: expected, |
| 58 description: "First rAF" | 64 description: "First rAF" |
| 59 }, "*"); | 65 }, "*"); |
| 60 entries = []; | 66 entries = []; |
| 61 port.postMessage({scrollTo: 200}, "*"); | 67 port.postMessage({scrollTo: 200}, "*"); |
| 62 } | 68 } |
| 63 | 69 |
| 64 function step1() { | 70 function step1() { |
| 65 entries = entries.concat(observer.takeRecords()); | 71 entries = entries.concat(observer.takeRecords()); |
| 66 port.postMessage({ | 72 port.postMessage({ |
| 67 actual: entries.map(entryToJson), | 73 actual: entries.map(entryToJson), |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 110 | 116 |
| 111 function handleMessage(event) | 117 function handleMessage(event) |
| 112 { | 118 { |
| 113 port = event.source; | 119 port = event.source; |
| 114 nextStep(); | 120 nextStep(); |
| 115 } | 121 } |
| 116 | 122 |
| 117 nextStep = step0; | 123 nextStep = step0; |
| 118 window.addEventListener("message", handleMessage); | 124 window.addEventListener("message", handleMessage); |
| 119 </script> | 125 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2645283008:
IntersectionObserver: Always send an initial notification. (Closed)
