block-in-inline-client-rects-001.html (2505B)
1 <!DOCTYPE html> 2 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" /> 3 <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-htmlelement-offsetwidth" /> 4 <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-range-getboundingclientrect" /> 5 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 div { 10 width: 500px; 11 } 12 .inline-block { 13 display: inline-block; 14 width: 100px; 15 height: 1px; 16 background: blue; 17 } 18 .w200 { 19 width: 200px; 20 } 21 </style> 22 <body> 23 <!-- The `<span>` contains an empty block child --> 24 <div> 25 <span id="t1" class="target"> 26 <div class="inline-block"></div> 27 <div></div> 28 <div class="inline-block w200"></div> 29 </span> 30 </div> 31 32 <!-- The `<span>` contains non-empty block child --> 33 <div> 34 <span id="t2" class="target"> 35 <div class="inline-block"></div> 36 <div>non-empty</div> 37 <div class="inline-block w200"></div> 38 </span> 39 </div> 40 41 <!-- The `<span>` contains empty but non-zero height block child --> 42 <div> 43 <span id="t3" class="target"> 44 <div class="inline-block"></div> 45 <div style="height: 100px"></div> 46 <div class="inline-block w200"></div> 47 </span> 48 </div> 49 <script> 50 // The `getBoundingClientRect` spec[1] says to ignore rects "of which the 51 // height or width is not zero." 52 // [1] https://www.w3.org/TR/cssom-view-1/#dom-range-getboundingclientrect 53 function testGetBoundingClientRect() { 54 test(()=> { assert_equals(t1.getBoundingClientRect().width, 200); }, 55 `t1.getBoundingClientRect().width`); 56 test(()=> { assert_equals(t2.getBoundingClientRect().width, 500); }, 57 `t2.getBoundingClientRect().width`); 58 test(()=> { assert_equals(t3.getBoundingClientRect().width, 500); }, 59 `t3.getBoundingClientRect().width`); 60 } 61 testGetBoundingClientRect(); 62 63 // Skip testing `offsetWidth` because the 3 implementations return different 64 // values for these cases, and the expectations aren't clear from the spec. 65 // https://github.com/w3c/csswg-drafts/issues/6588 66 function testOffsetWidth() { 67 test(()=> { assert_equals(t1.offsetWidth, 200); }, `t1.offsetWidth`); 68 test(()=> { assert_equals(t2.offsetWidth, 500); }, `t2.offsetWidth`); 69 test(()=> { assert_equals(t3.offsetWidth, 500); }, `t3.offsetWidth`); 70 } 71 // testOffsetWidth(); 72 </script> 73 </body>