blob: 7da3a4f81a2b7d908db44fdb7ca43fb49d95080d [file] [log] [blame]
<!DOCTYPE html>
<html>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
.flexbox {
width: 600px;
background-color: #aaa;
position: relative;
min-height: 10px;
}
.flexbox > * {
flex: 1 0 0;
margin: 0;
border: 0;
padding: 0;
font-size: 12px;
min-width: 0;
}
</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" style="height:200px">
<button data-expected-display="block" data-expected-width="100" data-expected-height="200">button</button>
<canvas data-expected-display="block" data-expected-width="100" data-expected-height="200">canvas</canvas>
<iframe data-expected-display="block" data-expected-width="100" data-expected-height="200" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
<object data-expected-display="block" data-expected-width="100" data-expected-height="200">object</object>
<select data-expected-display="block" data-expected-width="100" data-expected-height="200">
<option>select</option>
</select>
<textarea data-expected-display="block" data-expected-width="100" data-expected-height="200">textarea</textarea>
</div>
<div class="flexbox">
<input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input>
<input data-expected-display="block" data-expected-width="75" type="file" value="file"></input>
<input data-expected-display="block" data-expected-width="75" type="image" value="image"></input>
<input data-expected-display="block" data-expected-width="75" type="password" value="password"></input>
<input data-expected-display="block" data-expected-width="75" type="radio" value="radio"></input>
<input data-expected-display="block" data-expected-width="75" type="reset" value="reset"></input>
<input data-expected-display="block" data-expected-width="75" type="submit" value="submit"></input>
<input data-expected-display="block" data-expected-width="75" type="text" value="text"></input>
</div>
<div class="flexbox">
<img data-expected-display="block" data-expected-width="200" style="flex: 1 0 auto;" src="../images/resources/blue-100.png">
<img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png">
<img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
</div>
<div class="flexbox">
<svg data-expected-display="block" data-expected-bounding-client-rect-width="100" style="flex: 1 0 auto; width: 100px; height: 100px">
<circle cx="50" cy="50" r="50" fill="blue">
</circle>
</svg>
<svg data-expected-display="block" data-expected-bounding-client-rect-width="500" style="flex: 1 1 auto; height: 100px; width: 100%">
<circle cx="50" cy="50" r="50" fill="green">
</circle>
</svg>
</div>
<div class="flexbox">
<span data-expected-display="block" data-expected-width="200" style="flex: 2 0 0"></span>
<button data-expected-display="block" data-expected-width="100" style="flex: 1 0 0">button</button>
<span data-expected-display="block" data-expected-width="300" style="flex: 2 2 100px"></span>
</div>
<div class="flexbox" style="width: 700px">
<div data-expected-display="block" data-expected-width="100" style="display: inline-block;"></div>
<div data-expected-display="-webkit-box" data-expected-width="100" style="display: -webkit-inline-box;"></div>
<div data-expected-display="flex" data-expected-width="100" style="display: inline-flex;"></div>
<div data-expected-display="block" data-expected-width="100" style="display: table-cell"></div>
<div data-expected-display="block" data-expected-width="100" style="display: compact"></div>
<div data-expected-display="block" data-expected-width="100" style="display: run-in"></div>
<div data-expected-display="block" data-expected-width="100" style="display: inline;"></div>
</div>
<div class="flexbox">
<!-- FIXME: This table should flex. -->
<div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
</div>
<div class="flexbox" style="height:200px">
<iframe data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
<iframe seamless data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
</div>
<div class="flexbox" style="height:100px">
<iframe data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
<iframe seamless data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
</div>
<div class="flexbox column" style="width:100px">
<iframe data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
<iframe seamless data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
</div>
<div class="flexbox column" style="height:210px">
<button data-expected-display="block" data-expected-width="600" data-expected-height="30">button</button>
<canvas data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px">canvas</canvas>
<iframe data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
<iframe seamless data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=%23fff>iframe</body>"></iframe>
<object data-expected-display="block" data-expected-width="600" data-expected-height="30">object</object>
<select data-expected-display="block" data-expected-width="600" data-expected-height="30">
<option>select</option>
</select>
<textarea data-expected-display="block" data-expected-width="600" data-expected-height="30">textarea</textarea>
</div>
<!-- tests that min-height expands the height of flex items beyond the height of the flexbox -->
<div class="flexbox" style="height:50px">
<img data-expected-height="60" style="min-height:60px" src="../images/resources/blue-100.png">
<img data-expected-height="60" style="min-height:60px" src="../images/resources/green-10.png">
<img data-expected-height="75" style="min-height:150%" src="../images/resources/blue-100.png">
<img data-expected-height="75" style="min-height:150%" src="../images/resources/green-10.png">
<img data-expected-height="10" style="min-height:min-content;height:1px" src="../images/resources/blue-10.png">
<img data-expected-height="100" style="min-height:max-content;height:1px" src="../images/resources/green-100.png">
<img data-expected-height="50" style="min-height:-webkit-fill-available" src="../images/resources/blue-10.png">
<img data-expected-height="10" style="min-height:fit-content;height:1px" src="../images/resources/green-10.png">
</div>
<!-- tests that max-height shrinks the height of flex items less than the height of the flexbox -->
<div class="flexbox" style="height:50px">
<img data-expected-height="40" style="max-height:40px" src="../images/resources/blue-100.png">
<img data-expected-height="40" style="max-height:40px" src="../images/resources/green-10.png">
<img data-expected-height="25" style="max-height:50%" src="../images/resources/blue-100.png">
<img data-expected-height="25" style="max-height:50%" src="../images/resources/green-10.png">
<img data-expected-height="10" style="max-height:min-content;height:1000px;" src="../images/resources/blue-10.png">
<img data-expected-height="100" style="max-height:max-content;height:1000px;" src="../images/resources/green-100.png">
<img data-expected-height="50" style="max-height:-webkit-fill-available" src="../images/resources/blue-100.png">
<img data-expected-height="10" style="max-height:fit-content;height:1000px" src="../images/resources/green-10.png">
</div>
<!-- tests that images can shrink below their CSS height with min-height: min-content -->
<div class="flexbox column" style="height:50px">
<img data-expected-height="50" style="flex-shrink:1;height:1000px;min-height:min-content;" src="../images/resources/blue-10.png">
</div>
<!-- tests that text can shrink below its CSS height with min-height: min-content -->
<div class="flexbox column" style="height:50px">
<div data-expected-height="50" style="flex-shrink:1;height:1000px;min-height:min-content;" src="../images/resources/blue-10.png">
Some text<br>
Some more text
</div>
</div>
<!-- tests that images can shrink below their CSS width with min-width: min-content -->
<div class="flexbox" style="width:50px">
<img data-expected-width="50" style="flex-shrink:1;width:1000px;min-width:min-content;" src="../images/resources/blue-10.png">
</div>
<!-- tests that min-width expands the width of flex items beyond the width of the flexbox -->
<div class="flexbox column" style="width:50px">
<img data-expected-width="60" style="min-width:60px" src="../images/resources/blue-100.png">
<img data-expected-width="60" style="min-width:60px" src="../images/resources/green-10.png">
<img data-expected-width="75" style="min-width:150%" src="../images/resources/blue-100.png">
<img data-expected-width="75" style="min-width:150%" src="../images/resources/green-10.png">
<img data-expected-width="100" style="min-width:min-content" src="../images/resources/blue-100.png">
<img data-expected-width="50" style="min-width:min-content" src="../images/resources/green-10.png">
<img data-expected-width="100" style="min-width:max-content" src="../images/resources/blue-100.png">
<img data-expected-width="50" style="min-width:max-content" src="../images/resources/green-10.png">
<img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/blue-100.png">
<img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/green-10.png">
<img data-expected-width="100" style="min-width:fit-content" src="../images/resources/blue-100.png">
<img data-expected-width="50" style="min-width:fit-content" src="../images/resources/green-10.png">
</div>
<!-- tests that max-width shrinks the width of flex items less than the width of the flexbox -->
<div class="flexbox column" style="width:50px">
<img data-expected-width="40" style="max-width:40px" src="../images/resources/blue-100.png">
<img data-expected-width="40" style="max-width:40px" src="../images/resources/green-10.png">
<img data-expected-width="25" style="max-width:50%" src="../images/resources/blue-100.png">
<img data-expected-width="25" style="max-width:50%" src="../images/resources/green-10.png">
<img data-expected-width="50" style="max-width:min-content" src="../images/resources/blue-100.png">
<img data-expected-width="10" style="max-width:min-content" src="../images/resources/green-10.png">
<img data-expected-width="50" style="max-width:max-content" src="../images/resources/blue-100.png">
<img data-expected-width="10" style="max-width:max-content" src="../images/resources/green-10.png">
<img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/blue-100.png">
<img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/green-10.png">
<img data-expected-width="50" style="max-width:fit-content" src="../images/resources/blue-100.png">
<img data-expected-width="10" style="max-width:fit-content" src="../images/resources/green-10.png">
</div>
</html>