adjacent-to-relpos-inline-in-inline-that-had-block.html (1244B)
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 <p>There should be a green square below, and no red.</p> 6 <div style="position:relative; width:100px; height:100px; background:red;"> 7 <span> 8 <span id="posMe"> 9 <div id="removeMe"></div> 10 </span> 11 </span> 12 <span> 13 <div> 14 <div id="target" style="position:absolute; width:100%; height:100%; background:green;"></div> 15 </div> 16 </span> 17 </div> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script> 21 test(()=> { 22 document.body.offsetTop; 23 removeMe.style.display = "none"; 24 document.body.offsetTop; 25 posMe.style.position = "relative"; 26 assert_equals(document.getElementById("target").offsetWidth, 100); 27 assert_equals(document.getElementById("target").offsetHeight, 100); 28 assert_equals(document.getElementById("target").offsetLeft, 0); 29 assert_equals(document.getElementById("target").offsetTop, 0); 30 }, "Make sure that we're sized by the right ancestor"); 31 </script>