line-wrapping.html | Explore in Territory

<!DOCTYPE html>
<html>
<style>
body {
    width: 500px;
    height: 500px;
    margin: 0;
    border: 1px solid;
}
.column {
    flex-flow: column;
}
.flexbox {
    display: flex;
    background-color: gray;
    position: relative;
}
.flexbox > div {
    line-height: 0px;
}
.flexbox > div > div {
    display: inline-block;
    line-height: 0px;
}
.horizontal-tb {
    writing-mode: horizontal-tb;
}
.vertical-rl {
    writing-mode: vertical-rl;
    -webkit-text-orientation: sideways-right;
}
.vertical-lr {
    writing-mode: vertical-lr;
    -webkit-text-orientation: sideways-right;
}

.horizontal-tb.row, .horizontal-tb.fixed.column {
    height: 100px; 
}
.vertical-lr.row, .vertical-rl.row, .vertical-lr.fixed.column, .vertical-rl.fixed.column {
    width: 100px; 
}

.horizontal-tb.row > div {
    flex: 1;
}
.vertical-lr.row > div, .vertical-rl.row > div {
    flex: 1;
}

.horizontal-tb.column > div {
    flex: 1 auto;
}
.vertical-lr.column > div, .vertical-rl.column > div {
    flex: 1 auto;
}

.horizontal-tb.fixed {
    width: 200px;
}
.vertical-lr.fixed, .vertical-rl.fixed {
    height: 200px;
}

.horizontal-tb.flexbox > div > div {
    height: 20px;
}
.vertical-lr.flexbox > div > div, .vertical-rl.flexbox > div > div {
    width: 20px;
}

.horizontal-tb.fixed > div > div {
    width: 40px;
}
.vertical-lr.fixed > div > div, .vertical-rl.fixed > div > div {
    height: 40px;
}

.horizontal-tb.auto > div > div {
    width: 100px;
}
.vertical-lr.auto > div > div, .vertical-rl.auto > div > div {
    height: 100px;
}

.flexbox > :nth-child(1) {
    background-color: lightblue;
}
.flexbox > :nth-child(2) {
    background-color: pink;
}
.flexbox > div > :nth-child(1) {
    background-color: blue;
}
.flexbox > div > :nth-child(2) {
    background-color: green;
}
.flexbox > div > :nth-child(3) {
    background-color: red;
}
.flexbox > div > :nth-child(4) {
    background-color: yellow;
}
.flexbox > div > :nth-child(5) {
    background-color: purple;
}
.flexbox > div > :nth-child(6) {
    background-color: orange;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">

<div class="flexbox fixed row horizontal-tb">
    <div data-expected-width=100 data-expected-height=100>
        <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
    </div>
    <div data-expected-width=100 data-expected-height=40 style="align-self: flex-start;">
        <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=100></div>
    </div>
</div>

<div class="flexbox fixed column horizontal-tb">
    <div data-expected-width=200 data-expected-height=50>
        <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
    </div>
    <div data-expected-width=200 data-expected-height=50 style="align-self: flex-start;">
        <div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=70 data-offset-x=0></div>
    </div>
</div>

<div class="flexbox fixed column horizontal-tb">
    <div data-expected-width=200 data-expected-height=50>
        <div data-offset-y=0></div><div data-offset-y=0></div>
    </div>
    <div data-expected-width=80 data-expected-height=50 style="align-self: flex-start;">
        <div data-offset-y=50></div><div data-offset-y=50></div>
    </div>
</div>

<div class="flexbox auto row horizontal-tb" data-expected-width=500>
    <div data-expected-width=250 data-expected-height=100>
        <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
    </div>
    <div data-expected-width=250 data-expected-height=40 style="align-self: flex-start;">
        <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=250></div>
    </div>
</div>

<div data-expected-width=500 data-expected-height=80 class="flexbox auto column horizontal-tb">
    <div data-expected-width=500 data-expected-height=40>
        <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
    </div>
    <div data-expected-width=500 data-expected-height=40 style="align-self: flex-start;">
        <div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=60 data-offset-x=0></div>
    </div>
</div>

<div class="flexbox fixed row vertical-lr">
    <div data-expected-height data-expected-width=100>
        <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div>
    </div>
    <div data-expected-height=100 data-expected-width=40 style="align-self: flex-start;">
        <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=100></div>
    </div>
</div>

<div class="flexbox fixed column vertical-lr">
    <div data-expected-height=200 data-expected-width=50>
        <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div>
    </div>
    <div data-expected-height=200 data-expected-width=50 style="align-self: flex-start;">
        <div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=50></div><div data-offset-x=70 data-offset-y=0></div>
    </div>
</div>

<div class="flexbox fixed column vertical-lr">
    <div data-expected-height=200 data-expected-width=50>
        <div data-offset-x=0></div><div data-offset-x=0></div>
    </div>
    <div data-expected-height=80 data-expected-width=50 style="align-self: flex-start;">
        <div data-offset-x=50></div><div data-offset-x=50></div>
    </div>
</div>

<div class="flexbox auto row vertical-lr" data-expected-height=500>
    <div data-expected-height=250 data-expected-width=100>
        <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div>
    </div>
    <div data-expected-height=250 data-expected-width=40 style="align-self: flex-start;">
        <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=250></div>
    </div>
</div>

<div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-lr">
    <div data-expected-height=500 data-expected-width=40>
        <div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=0></div><div data-offset-x=20 data-offset-y=0></div>
    </div>
    <div data-expected-height=500 data-expected-width=40 style="align-self: flex-start;">
        <div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=40></div><div data-offset-x=60 data-offset-y=0></div>
    </div>
</div>


<div class="flexbox fixed row vertical-rl">
    <div data-expected-height=100 data-expected-width=100>
        <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
    </div>
    <div data-expected-height=100 data-expected-width=40 style="align-self: flex-start;">
        <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=100></div>
    </div>
</div>

<div class="flexbox fixed column vertical-rl">
    <div data-expected-height=200 data-expected-width=50>
        <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
    </div>
    <div data-expected-height=200 data-expected-width=50 style="align-self: flex-start;">
        <div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=10 data-offset-y=0></div>
    </div>
</div>

<div class="flexbox fixed column vertical-rl">
    <div data-expected-height=200 data-expected-width=50>
        <div data-offset-x=80></div><div data-offset-x=80></div>
    </div>
    <div data-expected-height=80 data-expected-width=50 style="align-self: flex-start;">
        <div data-offset-x=30></div><div data-offset-x=30></div>
    </div>
</div>

<div class="flexbox auto row vertical-rl" data-expected-height=500>
    <div data-expected-height=250 data-expected-width=100>
        <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
    </div>
    <div data-expected-height=250 data-expected-width=40 style="align-self: flex-start;">
        <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=250></div>
    </div>
</div>

<div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-rl">
    <div data-expected-height=500 data-expected-width=40>
        <div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div>
    </div>
    <div data-expected-height=500 data-expected-width=40 style="align-self: flex-start;">
        <div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=0 data-offset-y=0></div>
    </div>
</div>

</body>
</html>
chromium/third_party/blink/web_tests/css3/flexbox/line-wrapping.html
