| <!DOCTYPE html> |
| <link rel="help" |
| href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <meta name="assert" |
| content="stretch as a flex basis accounts for the item's margins"> |
| |
| <style> |
| .flexbox { |
| display: flex; |
| width: 100px; |
| } |
| |
| .item { |
| flex: 0 1 stretch; |
| background: lime; |
| } |
| |
| .grandchild { |
| width: 30px; |
| height: 50px; |
| } |
| |
| p { |
| margin-bottom: 4px; |
| } |
| </style> |
| |
| <body onload="checkLayout('.item')"> |
| |
| <p>basic:</p> |
| <div class="flexbox"> |
| <div class="item" style="outline: 5px solid;" |
| data-expected-client-width="100"> |
| <div class="grandchild"></div> |
| </div> |
| </div> |
| |
| <p>With border:</p> |
| <div class="flexbox"> |
| <div class="item" style="border: 5px solid;" |
| data-expected-client-width="90"> |
| <div class="grandchild"></div> |
| </div> |
| </div> |
| |
| <p>With border+margin:</p> |
| <div class="flexbox"> |
| <div class="item" style="border: 5px solid; margin-right: 20px;" |
| data-expected-client-width="70"> |
| <div class="grandchild"></div> |
| </div> |
| </div> |
| |
| <p>flex-basis:stretch items can still shrink:</p> |
| <div class="flexbox"> |
| <div class="item" style="outline: 5px solid;" |
| data-expected-client-width="50"> |
| <div class="grandchild"></div> |
| </div> |
| <div style="flex-basis: 100px"></div> |
| </div> |
| |
| <p>column flexbox has indefinite height so flex-basis:stretch behaves as |
| flex-basis:content</p> |
| <div class="flexbox" style="flex-direction: column;"> |
| <div class="item" style="outline: 5px solid; min-height: 0px;" |
| data-expected-client-height="50"> |
| <div class="grandchild"></div> |
| </div> |
| </div> |
