containing-block-change-button.html (1167B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Tests that after making a button a containing block, dynamically-inserted abspos boxes still get positioned correctly</title> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740439"> 5 <link rel="help" href="https://drafts.csswg.org/css-position/#abspos-insets"> 6 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 7 <link rel="author" href="https://mozilla.org" title="Mozilla"> 8 <link rel="match" href="containing-block-change-button-ref.html"> 9 <style> 10 #button { 11 width: 400px; 12 height: 400px; 13 margin: 50px; 14 background-color: purple; 15 border: 0; 16 padding: 10px; 17 } 18 #button > div { 19 position: absolute; 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 /* Vertically centered to match in-flow button layout of the reference */ 24 top: 150px; 25 left: 0; 26 } 27 </style> 28 <button id="button"></button> 29 <script> 30 let button = document.getElementById("button"); 31 button.getBoundingClientRect(); 32 button.style.position = "relative"; 33 button.getBoundingClientRect(); 34 button.appendChild(document.createElement("div")); 35 </script>