flexbox_width-change-and-relayout-children.html (1327B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexbox: Flex children width when the parent width is changed</title> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 7 <link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=108231"> 8 <meta name="assert" content="Flexbox should relayout flex children when width changes."> 9 <link href="support/flexbox.css" rel="stylesheet"> 10 <style> 11 .flexitem { 12 width: 100%; 13 height: 3em; 14 min-height: 3em; 15 } 16 .child { 17 background-color: salmon; 18 } 19 </style> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script src="/resources/check-layout-th.js"></script> 23 <script> 24 function change() { 25 var container = document.getElementById('container'); 26 container.offsetWidth; 27 container.style.width = "200px"; 28 checkLayout("#container"); 29 } 30 </script> 31 </head> 32 <body onload="change()"> 33 <div id=log></div> 34 <div id="container" style="width: 100px" data-expected-width="200"> 35 <div class="flexbox column" data-expected-width="200"> 36 <div class="flexitem" data-expected-width="200"> 37 <div class="child" data-expected-width="200">This div should be 200px wide.</div> 38 </div> 39 </div> 40 </div> 41 </body> 42 </html>