dynamic-isize-change-001.html (1176B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Test: Dynamic change to the inline-size of a container containing a inline-flex child</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1686961"> 8 <link rel="match" href="dynamic-isize-change-001-ref.html"> 9 10 <style> 11 #container { 12 border: 1px solid black; 13 font: 30px monospace; 14 width: 200px; 15 } 16 .inline-flex { 17 display: inline-flex; 18 width: 100px; 19 border: 1px solid gray; 20 } 21 22 .small { 23 display: flex; 24 align-items: flex-end; 25 font: 8px monospace; 26 background: pink; 27 } 28 </style> 29 30 <script> 31 function test() { 32 let container = document.getElementById("container"); 33 container.offsetTop; 34 35 /* Change the width to trigger incremental reflow. */ 36 container.style.width = "400px"; 37 } 38 </script> 39 40 <body onload="test()"> 41 <div id="container"> 42 abc 43 <div class="inline-flex"> 44 <div class="small">D</div> 45 <div>efg</div> 46 </div> 47 </div> 48 </body> 49 </html>