abspos-in-block-in-inline-in-relpos-inline.html (1793B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#containing-block-details"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level"> 5 <style> 6 body { margin: 0px;} 7 .rel { position:relative; } 8 .inline-block { display:inline-block; width:100px; height:1px; } 9 .inline-block.large { width:200px; } 10 #target { position:absolute; width:100%; height:100px; background:green; } 11 #target-fixed { position:fixed; width:100%; height:100px; background:yellow; } 12 </style> 13 <p>There should be a green square, and a yellow rectangle below.</p> 14 <div style="height:200px;"> 15 <span class="rel" id="notContainingBlockOfTarget"> 16 <div class="large inline-block"></div> 17 <br> 18 <span id="containingBlockOfTarget" class="rel"> 19 <div class="inline-block"></div> 20 <span> 21 <div> 22 <div id="target-fixed"></div> 23 <div id="target"></div> 24 </div> 25 </span> 26 <div class="inline-block"></div></span><br> 27 <div class="large inline-block"></div> 28 </span> 29 </div> 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script> 33 test(()=> { 34 assert_equals(document.getElementById("target").offsetWidth, 35 // `offsetWidth` is not interoperable for block-in-inline. 36 // Use the size of ".inline-block" to avoid this. 37 document.querySelector("#containingBlockOfTarget .inline-block").offsetWidth); 38 }, "position:absolute should be sized by the right ancestor"); 39 test(()=> { 40 assert_equals(document.getElementById("target-fixed").offsetWidth, 41 document.body.offsetWidth); 42 }, "position:fixed should be sized by the right ancestor"); 43 </script>