| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="helper-functions.js"></script> | 2 <script src="helper-functions.js"></script> |
| 3 <div style="height: 200px; width: 100px;"></div> | 3 <div style="height: 200px; width: 100px;"></div> |
| 4 <div id="target" style="background-color: green; width:100px; height:100px"></di
v> | 4 <div id="target" style="background-color: green; width:100px; height:100px"></di
v> |
| 5 <div style="height: 200px; width: 100px;"></div> | 5 <div style="height: 200px; width: 100px;"></div> |
| 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; |
| 11 var nextStep; | 11 var nextStep; |
| 12 | 12 |
| 13 // Note that we never use RAF in this code, because this frame might get render-
throttled. | 13 // Note that we never use RAF in this code, because this frame might get render-
throttled. |
| 14 // Instead of RAF-ing, we just post an empty message to the parent window, which
will | 14 // Instead of RAF-ing, we just post an empty message to the parent window, which
will |
| 15 // RAF when it is received, and then send us a message to cause the next step to
run. | 15 // RAF when it is received, and then send us a message to cause the next step to
run. |
| 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 var observer = new IntersectionObserver(observer_callback, {}); | 21 |
| 22 // Use a rootMargin here, and verify it does NOT get applied for the cross-origi
n case. |
| 23 var observer = new IntersectionObserver(observer_callback, {rootMargin: "7px"}); |
| 22 observer.observe(target); | 24 observer.observe(target); |
| 23 | 25 |
| 24 function step0() { | 26 function step0() { |
| 25 setTimeout(function() { | 27 setTimeout(function() { |
| 26 nextStep = step1; | 28 nextStep = step1; |
| 27 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*"); | 29 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*"); |
| 28 entries = []; | 30 entries = []; |
| 29 port.postMessage({scrollTo: 200}, "*"); | 31 port.postMessage({scrollTo: 200}, "*"); |
| 30 }); | 32 }); |
| 31 } | 33 } |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 70 | 72 |
| 71 function handleMessage(event) | 73 function handleMessage(event) |
| 72 { | 74 { |
| 73 port = event.source; | 75 port = event.source; |
| 74 nextStep(); | 76 nextStep(); |
| 75 } | 77 } |
| 76 | 78 |
| 77 nextStep = step0; | 79 nextStep = step0; |
| 78 window.addEventListener("message", handleMessage); | 80 window.addEventListener("message", handleMessage); |
| 79 </script> | 81 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1740923004:
IntersectionObserver: make exceptions match spec (Closed)
Base URL: https://chromium.googlesource.com/chromium/src@master