| <!DOCTYPE html> |
| <style> |
| @import "resources/width-keyword-classes.css"; |
| |
| .container { |
| border: 5px solid blue; |
| width: 250px; |
| height: 250px; |
| display: -webkit-flex; |
| display: flex; |
| -webkit-flex-direction: column; |
| flex-direction: column; |
| } |
| .child { |
| border: 5px solid pink; |
| -webkit-flex: none; |
| flex: none; |
| display: -webkit-flex; |
| display: flex; |
| } |
| .content { |
| display: inline-block; |
| width: 100px; |
| height: 100px; |
| background-color: salmon; |
| } |
| </style> |
| |
| Tests intrinsic width values on flex-items. |
| |
| <!-- width tests --> |
| <div class="container"> |
| <div class="child max-content" data-expected-width="210"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child min-content" data-expected-width="110"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child fit-content" data-expected-width="210"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container" style="width: 50px"> |
| <div class="child fit-content" data-expected-width="110"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child fill-available" data-expected-width="250"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <!-- min-width tests --> |
| <div class="container"> |
| <div class="child min-width-max-content" style="width: 10px;" data-expected-width="210"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| <div class="container"> |
| <div class="child min-width-min-content" style="width: 10px;" data-expected-width="110"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child min-width-fit-content" style="width: 10px;" data-expected-width="210"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container" style="width: 50px"> |
| <div class="child min-width-fit-content" style="width: 10px;" data-expected-width="110"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child min-width-fill-available" style="width: 10px;" data-expected-width="250"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <!-- max-width tests --> |
| <div class="container"> |
| <div class="child max-width-max-content" style="width: 1000px; min-width: 0;" data-expected-width="210"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child max-width-min-content" style="width: 1000px; min-width: 0;" data-expected-width="110"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child max-width-fit-content" style="width: 1000px; min-width: 0;" data-expected-width="210"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container" style="width: 50px"> |
| <div class="child max-width-fit-content" style="width: 1000px; min-width: 0;" data-expected-width="110"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <div class="child max-width-fill-available" style="width: 1000px; min-width: 0;" data-expected-width="250"> |
| <div><div class="content"></div><div class="content"></div></div> |
| </div> |
| </div> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| checkLayout(".container"); |
| </script> |
