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 |