| <!DOCTYPE html> |
| <!-- |
| | Combined tests for basic functionality of CSS Flexible Box Layout Module. |
| | https://www.w3.org/TR/css-flexbox-1 |
| | This exercises some edge cases for container box sizes. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| background-color: #808080; |
| font-size: 10px; |
| } |
| .vsized { |
| height: 40px; |
| } |
| .hsized { |
| width: 40px; |
| } |
| .flex { |
| display: flex; |
| } |
| .inlineflex { |
| display: inline-flex; |
| } |
| .row { |
| flex-flow: row wrap; |
| } |
| .column { |
| flex-flow: column wrap; |
| } |
| .container { |
| color: #99b9f3; |
| background-color: #ffee00; |
| opacity: 0.75; |
| padding: 2px; |
| border: 2px solid #000060; |
| outline: 2px solid #00f000; |
| margin: 6px; |
| border-top-width: 5px; |
| } |
| div > span { |
| background-color: #0047ab; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="vsized flex column container"> |
| <span style="align-self: flex-end;">end</span> |
| <span style="align-self: flex-start;">start</span> |
| <span style="align-self: center;">center</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| </div> |
| <div class="hsized flex column container"> |
| <span style="align-self: flex-end;">end</span> |
| <span style="align-self: flex-start;">start</span> |
| <span style="align-self: center;">center</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| </div> |
| -hg |
| <div class="vsized inlineflex column container"> |
| <span style="align-self: flex-end;">end</span> |
| <span style="align-self: flex-start;">start</span> |
| <span style="align-self: center;">center</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| </div> |
| hg |
| <div class="hsized inlineflex column container" style="height: 96px;"> |
| <span style="align-self: flex-end; height: 5%;">end</span> |
| <span style="align-self: flex-start; height: 5%;">start</span> |
| <span style="align-self: center; height: 5%;">center</span> |
| <span class="vsized" style="align-self: stretch; height: 5%;">stretch</span> |
| <span class="vsized" style="align-self: stretch; height: 5%;">stretch</span> |
| <span class="vsized" style="align-self: stretch; height: 5%;">stretch</span> |
| </div> |
| hg |
| <div class="hsized inlineflex column container" style="height: 96px;"> |
| <span style="align-self: flex-end;">end</span> |
| <span style="align-self: flex-start;">start</span> |
| <span style="align-self: center;">center</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| </div> |
| hg |
| <div class="hsized inlineflex column container" style="max-height: 96px;"> |
| <span style="align-self: flex-end;">end</span> |
| <span style="align-self: flex-start;">start</span> |
| <span style="align-self: center;">center</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| </div> |
| hg |
| <div class="inlineflex column container" style="width:16px; max-height: 96px;"> |
| <span style="align-self: flex-end;">end</span> |
| <span style="align-self: flex-start;">start</span> |
| <span style="align-self: center;">center</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| </div> |
| hg |
| <div class="hsized inlineflex column container"> |
| <span style="align-self: flex-end;">end</span> |
| <span style="align-self: flex-start;">start</span> |
| <span style="align-self: center;">center</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| <span class="vsized" style="align-self: stretch;">stretch</span> |
| </div> |
| hg |
| |
| </body> |
| </html> |
| |
