| <!DOCTYPE html> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11784"> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <meta name="assert" |
| content="width:stretch item stretches to container width during the measure pass; container has definite width"> |
| <style> |
| .container { |
| display: flex; |
| flex-direction: column; |
| width: 100px; |
| height: 100px; |
| border: solid; |
| flex-wrap: wrap; |
| /* Prevent the lines from stretching. */ |
| align-content: start; |
| font: 20px/1 Ahem; |
| } |
| |
| .container>div { |
| border: 3px solid; |
| } |
| |
| .stretch { |
| width: -moz-available; |
| width: -webkit-fill-available; |
| width: stretch; |
| } |
| </style> |
| |
| <div class="container"> |
| <div class="stretch" style="height: 75px; border-color: cyan" |
| data-expected-width="100">a</div> |
| <div class="stretch" style="height: 75px; border-color: magenta" |
| data-expected-width="100">b</div> |
| </div> |
| <div class="container"> |
| <div class="stretch" style="height: 75px; border-color: cyan" |
| data-expected-width="156">a</div> |
| <div style="border-color: orange; width: 150px"></div> |
| <div class="stretch" style="height: 75px; border-color: magenta" |
| data-expected-width="100">b</div> |
| </div> |
| |
| <script> |
| document.fonts.ready.then(() => checkLayout(".stretch")); |
| </script> |
