getBoundingClientRect-empty-inline.html (928B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect"> 3 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 div { 9 font: 10px/1 Ahem; 10 } 11 .inline-block { 12 display: inline-block; 13 height: 100px; 14 } 15 </style> 16 <body> 17 <div> 18 <span id="empty"></span> 19 <span class="inline-block"></span> 20 </div> 21 <script> 22 document.fonts.ready.then(() => { 23 run(document.getElementById('empty')); 24 function run(element) { 25 test(() => { 26 let rect = element.getBoundingClientRect(); 27 let cb = element.parentElement; 28 let cb_rect = cb.getBoundingClientRect(); 29 assert_equals(rect.y - cb_rect.y, 92, "y"); 30 assert_equals(rect.height, 10, "height"); 31 }); 32 } 33 }); 34 </script> 35 </body>