61 lines
1.9 KiB
HTML
61 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
outline: 1px solid black;
|
|
background: hsla(210,100%,90%, .8);
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.flexbox {
|
|
display: flex;
|
|
}
|
|
|
|
.row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex {
|
|
flex: 1 0 auto;
|
|
}
|
|
</style>
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<script src="../../resources/check-layout-th.js"></script>
|
|
</head>
|
|
<body onload="checkLayout('.flexbox')">
|
|
<div id=log></div>
|
|
There should be two boxes of equal height on the left and 3 boxes of equal
|
|
height on the right.
|
|
<div class="flexbox row" style="width: 600px">
|
|
<div data-expected-width=290 data-expected-height=220 class="column flex">
|
|
<div data-expected-width=270 data-expected-height=95 class="flex"></div>
|
|
<div data-expected-width=270 data-expected-height=95 class="flex"></div>
|
|
</div>
|
|
<div data-expected-width=290 data-expected-height=220 class="column flex">
|
|
<div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
|
|
<div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
|
|
<div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
None of the boxes should overflow and the inner most boxes should be end aligned.
|
|
<div class="flexbox column" style="width: 600px; height: 300px; position: relative;">
|
|
<div data-expected-width=590 data-expected-height=250 class="column flex" style="justify-content: flex-end">
|
|
<div data-offset-y="180" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
|
|
<div data-offset-y="220" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
|
|
</div>
|
|
<div data-expected-width=590 data-expected-height=30 style="height: 20px; flex: none;"></div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|