Google Git
Sign in
webkit / WebKit / dbb3923cafb6f84475e7a38fbee3e22998746738 / . / LayoutTests / css3 / flexbox / flex-algorithm.html
blob: 4db3d3c5ce3193f3b8632cbc317fe70964dc122d [file] [log] [blame]
<!DOCTYPE html>
<html>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.flexbox {
width: 600px;
}
.flexbox div {
height: 20px;
border: 0;
}
.flexbox :nth-child(1) {
background-color: blue;
}
.flexbox :nth-child(2) {
background-color: green;
}
.flexbox :nth-child(3) {
background-color: red;
}
.flex1 {
flex: 1;
}
.flex2 {
flex: 2;
}
.flex3 {
flex: 3;
}
.flex1-0-0 {
flex: 1 0 0px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
<div class="flexbox">
<div data-expected-width="200" class="flex1"></div>
<div data-expected-width="200" class="flex1"></div>
<div data-expected-width="200" class="flex1"></div>
</div>
<div class="flexbox">
<div data-expected-width="200" style="flex: .5;"></div>
<div data-expected-width="200" style="flex: .5;"></div>
<div data-expected-width="200" style="flex: .5;"></div>
</div>
<div class="flexbox">
<div data-expected-width="300" class="flex3"></div>
<div data-expected-width="200" class="flex2"></div>
<div data-expected-width="100" class="flex1"></div>
</div>
<div class="flexbox">
<div data-expected-width="250" class="flex1"></div>
<div data-expected-width="250" class="flex1"></div>
<div data-expected-width="100" class="flex-none" style="width: 100px"></div>
</div>
<div class="flexbox">
<div data-expected-width="150" class="flex1"></div>
<div data-expected-width="150" class="flex1"></div>
<div data-expected-width="300" class="flex-none" style="width: 50%"></div>
</div>
<!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
<div class="flexbox">
<div data-expected-width="150" class="flex1"></div>
<div data-expected-width="350" style="flex: 1 200px;"></div>
<div data-expected-width="100" class="flex-none" style="width: 100px"></div>
</div>
<!-- Like the last test, except the middle box gets more space than the first box. -->
<div class="flexbox">
<div data-expected-width="100" class="flex1"></div>
<div data-expected-width="400" style="flex: 2 33.333333%;"></div>
<div data-expected-width="100" class="flex-none" style="width: 100px"></div>
</div>
<!-- Test some negative flexing. -->
<div class="flexbox">
<div data-expected-width="200" style="flex: 1 1 300px;"></div>
<div data-expected-width="200" style="flex: 2 1 300px;"></div>
<div data-expected-width="200" style="flex: 3 1 300px;"></div>
</div>
<div class="flexbox">
<div data-expected-width="250" style="flex: 1 1 300px;"></div>
<div data-expected-width="150" style="flex: 2 3 300px;"></div>
<div data-expected-width="200" class="flex-none" style="width: 200px"></div>
</div>
<div class="flexbox">
<div data-expected-width="50" style="flex: 1 1 100px;"></div>
<div data-expected-width="250" style="flex: 1 1 500px;"></div>
<div data-expected-width="300" class="flex-none" style="width: 300px"></div>
</div>
<div class="flexbox">
<div data-expected-width="50" style="flex: 1 1 100px;"></div>
<div data-expected-width="250" style="flex: 1 1 500px; margin-right: 300px;"></div>
</div>
<div class="flexbox">
<div data-expected-width="50" style="flex: 1 1 100px;"></div>
<div data-expected-width="550" style="flex: 1 1 500px; padding-left: 300px;"></div>
</div>
<div class="flexbox">
<div data-expected-width="50" style="flex: 1 1 100px;"></div>
<div data-expected-width="550" style="flex: 1 1 500px; border-left: 200px dashed orange; border-right: 100px dashed orange;"></div>
</div>
<!-- Test some overflow cases. -->
<div class="flexbox">
<div data-expected-width="600" style="flex: 0 100000000000000000000000000000000000000 600px;"></div>
<div data-expected-width="600" style="flex: 0 100000000000000000000000000000000000000 600px;"></div>
</div>
<div class="flexbox">
<div data-expected-width="600" style="flex: 100000000000000000000000000000000000000 0 600px;"></div>
<div data-expected-width="600" style="flex: 0 100000000000000000000000000000000000000 600px;"></div>
<div data-expected-width="33554428" style="flex: 1 1 100000000000000000000000000000000000000px;"></div>
</div>
<!-- Test flexitem borders. -->
<div class="flexbox">
<div data-expected-width="250" class="flex1" style="border-left: 150px solid black"></div>
<div data-expected-width="250" class="flex1-0-0" style="border-right: 150px solid orange"></div>
<div data-expected-width="100" class="flex1-0-0"></div>
</div>
<div class="flexbox">
<div data-expected-width="300" style="width: 100px; border: 100px solid black; flex: none;"></div>
<div data-expected-width="200" class="flex2"></div>
<div data-expected-width="100" class="flex1"></div>
</div>
<!-- Test flexitem padding. -->
<div class="flexbox">
<div data-expected-width="250" class="flex1" style="padding-left: 150px"></div>
<div data-expected-width="250" class="flex1-0-0" style="padding-right: 150px"></div>
<div data-expected-width="100" class="flex1-0-0"></div>
</div>
<div class="flexbox">
<div data-expected-width="300" class="flex-none" style="width: 100px; padding: 100px"></div>
<div data-expected-width="200" class="flex2"></div>
<div data-expected-width="100" class="flex1"></div>
</div>
<div class="flexbox">
<div data-expected-width="200" class="flex1" style="padding-left: 25%"></div>
<div data-expected-width="150" class="flex3"></div>
<div data-expected-width="250" class="flex-none" style="width: 100px; padding-right: 25%"></div>
</div>
<div class="flexbox">
<div data-expected-width="200" class="flex1" style="padding-left: 50px; border-right: 50px solid black"></div>
<div data-expected-width="250" class="flex2" style="border-right: 50px solid orange"></div>
<div data-expected-width="150" class="flex1" style="padding-right: 50px;"></div>
</div>
<!-- Test items with an intrinsic size. -->
<div class="flexbox">
<div data-expected-width="120" class="flex1">
<div style="width: 100px; height: 100%;"></div>
</div>
<div data-expected-width="240" class="flex2"></div>
<div data-expected-width="240" class="flex2"></div>
</div>
<div class="flexbox">
<div data-expected-width="200" class="flex1-0-0">
<div style="width: 100px; height: 100%;"></div>
</div>
<div data-expected-width="200" class="flex1"></div>
<div data-expected-width="200" class="flex1"></div>
</div>
<div class="flexbox">
<div data-expected-width="200" class="flex-auto">
<div style="width: 100px;"></div>
</div>
<div data-expected-width="100" class="flex-auto"></div>
<div data-expected-width="300" class="flex-auto">
<div style="width: 200px;"></div>
</div>
</div>
<div class="flexbox" style="height: 60px; flex-flow: row wrap; position: relative;">
<div data-offset-x="0" data-offset-y="0" style="position: absolute;"></div>
<div data-offset-x="0" data-offset-y="0" style="width: 700px;"></div>
</div>
<!-- Test border/padding/margin on the flexbox itself. -->
<div data-expected-width="830" style="border: 10px solid; display: inline-block;">
<div data-expected-width="700" style="padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox">
<div data-offset-x="100" data-expected-width="200" class="flex1"></div>
<div data-offset-x="300" data-expected-width="200" class="flex1"></div>
<div data-offset-x="500" data-expected-width="200" class="flex1"></div>
</div>
</div>
</body>
</html>