position-absolute-container-dynamic.html (972B)
1 <!DOCTYPE html> 2 <title>CSS Position Absolute: dynamic changes to containing block width</title> 3 <link rel="author" href="mailto:atotic@google.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://www.w3.org/TR/css-position-3/#abs-non-replaced-width"> 7 <meta name="assert" content="abspos descendant responds to containing block size change"> 8 <style> 9 10 #container { 11 position: relative; 12 width: 50px; 13 height: 100px; 14 background: red; 15 } 16 #target { 17 position: absolute; 18 left: 0; 19 width: 100%; 20 height: 100%; 21 background: green; 22 } 23 </style> 24 <div id="container"> 25 <div style="display:flex;"> 26 <div id="target"></div> 27 </div> 28 </div> 29 <script> 30 document.body.offsetTop; 31 test(() => { 32 document.getElementById("container").style.width = "100px"; 33 assert_equals(document.querySelector("#target").offsetWidth, 100); 34 }, '#target used container width when computing size'); 35 </script>