<!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>