65 lines
2.4 KiB
HTML
65 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<link href="resources/flexbox.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
.flexbox {
|
|
width: 600px;
|
|
height: 240px;
|
|
background-color: #aaa;
|
|
position: relative;
|
|
}
|
|
.vertical {
|
|
writing-mode: vertical-lr;
|
|
}
|
|
.flexbox :nth-child(1) {
|
|
background-color: blue;
|
|
}
|
|
.flexbox :nth-child(2) {
|
|
background-color: green;
|
|
}
|
|
.flexbox :nth-child(3) {
|
|
background-color: red;
|
|
}
|
|
.flexbox :nth-child(4) {
|
|
background-color: yellow;
|
|
}
|
|
.flexbox :nth-child(5) {
|
|
background-color: purple;
|
|
}
|
|
.flexbox :nth-child(6) {
|
|
background-color: orange;
|
|
}
|
|
.flexbox :nth-child(7) {
|
|
background-color: lime;
|
|
}
|
|
</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 column">
|
|
<div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="flex: 1;"></div>
|
|
<div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="flex: 1; align-self: stretch; "></div>
|
|
<div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: flex-start; width: 20px;"></div>
|
|
<div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: flex-end; width: 20px;"></div>
|
|
<div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: center; width: 20px;"></div>
|
|
<div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: baseline; width: 20px;"></div>
|
|
</div>
|
|
|
|
<div class="flexbox column vertical">
|
|
<div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="flex: 1;"></div>
|
|
<div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="flex: 1; align-self: stretch; "></div>
|
|
<div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: flex-start; height: 20px;"></div>
|
|
<div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: flex-end; height: 20px;"></div>
|
|
<div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: center; height: 20px;"></div>
|
|
<div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: baseline; height: 20px;"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|