client-rect.html (1406B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/intersection-observer-test-utils.js"></script> 6 7 <style> 8 pre, #log { 9 position: absolute; 10 top: 0; 11 left: 200px; 12 } 13 iframe { 14 width: 180px; 15 height: 100px; 16 } 17 </style> 18 19 <iframe id="iframe" srcdoc="<div id='target' style='margin:0.5px;width:1000px;height:1000px;'></div>"></iframe> 20 21 <script> 22 var target; 23 var entries = []; 24 var observer; 25 var iframe = document.getElementById("iframe"); 26 27 iframe.onload = function() { 28 runTestCycle(function() { 29 target = iframe.contentDocument.getElementById("target"); 30 assert_true(!!target, "Target element exists."); 31 observer = new IntersectionObserver(function(changes) { 32 entries = entries.concat(changes); 33 }); 34 observer.observe(target); 35 entries = entries.concat(observer.takeRecords()); 36 assert_equals(entries.length, 0, "No initial notifications."); 37 runTestCycle(test0, "First rAF should generate notification."); 38 }, "IntersectionObserverEntry.boundingClientRect should match target.boundingClientRect()"); 39 }; 40 41 function test0() { 42 assert_equals(entries.length, 1, "One notification."); 43 var bcr = target.getBoundingClientRect(); 44 checkLastEntry(entries, 0, [bcr.left, bcr.right, bcr.top, bcr.bottom]); 45 } 46 </script>