| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Flexbox: Flex children width when the parent width is changed</title> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> |
| <link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=108231"> |
| <meta name="assert" content="Flexbox should relayout flex children when width changes."> |
| <link href="support/flexbox.css" rel="stylesheet"> |
| <style> |
| .flexitem { |
| width: 100%; |
| height: 3em; |
| min-height: 3em; |
| } |
| .child { |
| background-color: salmon; |
| } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <script> |
| function change() { |
| var container = document.getElementById('container'); |
| container.offsetWidth; |
| container.style.width = "200px"; |
| checkLayout("#container"); |
| } |
| </script> |
| </head> |
| <body onload="change()"> |
| <div id=log></div> |
| <div id="container" style="width: 100px" data-expected-width="200"> |
| <div class="flexbox column" data-expected-width="200"> |
| <div class="flexitem" data-expected-width="200"> |
| <div class="child" data-expected-width="200">This div should be 200px wide.</div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |