OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="/js-test-resources/intersection-observer-helper-functions.js"></scr
ipt> | |
3 <div style="height: 200px; width: 100px;"></div> | 2 <div style="height: 200px; width: 100px;"></div> |
4 <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> |
5 <div style="height: 200px; width: 100px;"></div> | 4 <div style="height: 200px; width: 100px;"></div> |
6 <script> | 5 <script> |
| 6 function clientRectToJson(rect) { |
| 7 if (!rect) |
| 8 return null; |
| 9 return { |
| 10 top: rect.top, |
| 11 right: rect.right, |
| 12 bottom: rect.bottom, |
| 13 left: rect.left, |
| 14 width: rect.width, |
| 15 height: rect.height |
| 16 }; |
| 17 } |
| 18 |
| 19 function coordinatesToClientRectJson(top, right, bottom, left) { |
| 20 return { |
| 21 top: top, |
| 22 right: right, |
| 23 bottom: bottom, |
| 24 left: left, |
| 25 width: right - left, |
| 26 height: bottom - top |
| 27 }; |
| 28 } |
| 29 |
| 30 function entryToJson(entry) { |
| 31 return { |
| 32 boundingClientRect: clientRectToJson(entry.boundingClientRect), |
| 33 intersectionRect: clientRectToJson(entry.intersectionRect), |
| 34 rootBounds: clientRectToJson(entry.rootBounds), |
| 35 time: entry.time, |
| 36 target: entry.target.id |
| 37 }; |
| 38 } |
| 39 |
7 var port; | 40 var port; |
8 var entries = []; | 41 var entries = []; |
9 var target = document.getElementById('target'); | 42 var target = document.getElementById('target'); |
10 var scroller = document.scrollingElement; | 43 var scroller = document.scrollingElement; |
11 var nextStep; | 44 var nextStep; |
12 | 45 |
13 // Note that we never use RAF in this code, because this frame might get render-
throttled. | 46 // 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 | 47 // 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. | 48 // RAF when it is received, and then send us a message to cause the next step to
run. |
16 | 49 |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
66 | 99 |
67 function handleMessage(event) | 100 function handleMessage(event) |
68 { | 101 { |
69 port = event.source; | 102 port = event.source; |
70 nextStep(); | 103 nextStep(); |
71 } | 104 } |
72 | 105 |
73 nextStep = step0; | 106 nextStep = step0; |
74 window.addEventListener("message", handleMessage); | 107 window.addEventListener("message", handleMessage); |
75 </script> | 108 </script> |
OLD | NEW |