inline-with-block-child-client-rect.html (1171B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="./resources/intersection-observer-test-utils.js"></script> 5 6 <style> 7 pre, #log { 8 position: absolute; 9 top: 120px; 10 left: 0; 11 } 12 #target { 13 display: inline; 14 } 15 </style> 16 17 <div id="target"> 18 <div> 19 <img width=100 height=100 /> 20 </div> 21 </div> 22 23 <script> 24 var vw = document.documentElement.clientWidth; 25 var vh = document.documentElement.clientHeight; 26 var entries = []; 27 var target; 28 29 runTestCycle(function() { 30 target = document.getElementById("target"); 31 assert_true(!!target, "target exists"); 32 var observer = new IntersectionObserver(function(changes) { 33 entries = entries.concat(changes) 34 }); 35 observer.observe(target); 36 entries = entries.concat(observer.takeRecords()); 37 assert_equals(entries.length, 0, "No initial notifications."); 38 runTestCycle(step0, "First rAF"); 39 }, "Inline target containing a block child"); 40 41 function step0() { 42 assert_equals(entries.length, 1); 43 checkRect(entries[0].boundingClientRect, clientBounds(target), 44 "entry.boundingClientRect == target.getBoundingClientRect()"); 45 } 46 </script>