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