blob: 7031bc383f988c3f572386cf0e3bdfe8d9963f88 [file] [log] [blame]
<!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>