Google Git
Sign in
webkit / WebKit / 7d815df5a5eb5a0a67d72260d5639681d50d7f66 / . / LayoutTests / css3 / flexbox / line-wrapping.html
blob: 33c58f4c958c28571ecf413e0c5a88eed061ace7 [file] [log] [blame]
<!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>
<!-- FIXME: All the vertical-lr cases are off by 4px in the x direction. See http://webkit.org/b/71193. -->
<div class="flexbox fixed row vertical-lr">
<div data-expected-height data-expected-width=100>
<div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
</div>
<div data-expected-height=100 data-expected-width=40 style="align-self: flex-start;">
<div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 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=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
</div>
<div data-expected-height=200 data-expected-width=50 style="align-self: flex-start;">
<div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=74 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=4></div><div data-offset-x=4></div>
</div>
<div data-expected-height=80 data-expected-width=50 style="align-self: flex-start;">
<div data-offset-x=54></div><div data-offset-x=54></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=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
</div>
<div data-expected-height=250 data-expected-width=40 style="align-self: flex-start;">
<div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 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=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
</div>
<div data-expected-height=500 data-expected-width=40 style="align-self: flex-start;">
<div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=64 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>