Google Git
Sign in
webkit / WebKit / 4bcb3438baef1cfe12aea6aa10c3a06a0ad5b00d / . / LayoutTests / css3 / flexbox / writing-modes.html
blob: a8190518f3998331251a87ac2a665e84c0bb05a2 [file] [log] [blame]
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
}
.flexbox {
width: 600px;
display: flex;
background-color: grey;
}
.flexbox div {
height: 20px;
border: 0;
}
.rtl {
direction: rtl;
}
.horizontal-tb {
writing-mode:horizontal-tb;
}
.vertical-rl, .vertical-lr {
height: 600px;
}
:-webkit-any(.vertical-rl, .vertical-lr) div {
width: 20px;
}
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
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;
}
</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 rtl">
<div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
<div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding: 0 100px;"></div>
<div data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-left: 100px;"></div>
</div>
<div class="flexbox rtl">
<div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
<div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding: 0 100px;"></div>
<div data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin-inline-start: 100px;"></div>
</div>
<div class="flexbox rtl" style="margin-inline-start: 20px;margin-inline-end: 50px;">
<div data-expected-width="75" data-offset-x="575" style="flex: 1 0 0; margin: 0 auto;"></div>
<div data-expected-width="350" data-offset-x="225" style="flex: 2 0 0; padding: 0 100px;"></div>
<div data-expected-width="75" data-offset-x="50" style="flex: 1 0 0; margin-inline-start: 100px;"></div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
<div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="flex: 1 0 0; margin: 0 100px 0 50px;"></div>
<div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
<div data-expected-height="300" data-offset-y="150" class="horizontal-tb" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="450" data-offset-y="0" style="flex: 1 0 0;padding-inline-start:200px;padding-inline-end:200px;padding-block-start:100px;padding-block-end:100px;"></div>
<div data-expected-height="100" data-offset-y="450" style="flex: 2 0 0;"></div>
<div data-expected-height="50" data-offset-y="550" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="300" data-offset-y="0" class="horizontal-tb" style="flex: 1 0 0;padding-inline-start:200px;padding-inline-end:200px;padding-block-start:100px;padding-block-end:100px;"></div>
<div data-expected-height="200" data-offset-y="300" style="flex: 2 0 0;"></div>
<div data-expected-height="100" data-offset-y="500" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 0;"></div>
<div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: auto 0;"></div>
<div data-expected-height="450" data-offset-y="75" style="flex: 2 0 auto; height: auto;"><div data-offset-y="75" style="width:200px;height:300px;background-color:orange;"></div></div>
<div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: auto 0;"></div>
<div data-expected-height="450" data-offset-y="75" class="horizontal-tb" style="flex: 2 0 auto; height: auto;"><div style="width:200px;height:300px;background-color:orange;"></div></div>
<div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;margin-inline-start:auto;margin-inline-end:auto;margin-block-start:0;margin-block-end:0;;"></div>
<div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr">
<div data-expected-height="150" data-offset-y="0" class="horizontal-tb" style="flex: 1 0 0;margin-inline-start:auto;margin-inline-end:auto;margin-block-start:0;margin-block-end:0;;"></div>
<div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-lr rtl">
<div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0; margin: auto 0;"></div>
<div data-expected-height="350" data-offset-y="175" class="horizontal-tb" style="flex: 2 0 0; padding: 100px 0;"></div>
<div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0; margin-inline-start: 100px;"></div>
</div>
</div>
<div class="flexbox vertical-lr">
<div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></div>
<div data-expected-height="250" style="flex: 1 1 400px;"></div>
</div>
<div style="position:relative">
<div class="flexbox vertical-rl">
<div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="flex: 1 0 0;"></div>
<div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position:relative">
<div class="flexbox vertical-rl">
<div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="flex: 1 0 0; margin: 0 100px 0 50px;"></div>
<div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="flex: 2 0 0;"></div>
<div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0;"></div>
</div>
</div>
<div style="position: relative;">
<div data-expected-width="600" style="direction: rtl; display: flex; margin-left: 10px; margin-right:20px;" class="flexbox">
<div data-expected-width="75" data-offset-x="535" style="flex: 1 0 0; margin: 0 auto;"></div>
<div data-expected-width="350" data-offset-x="185" style="flex: 2 0 0; padding: 0 100px;"></div>
<div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin-right: 100px;"></div>
</div>
</div>
<div style="position: relative;">
<div data-expected-width="700" style="direction: rtl; display: flex; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
<div data-expected-width="75" data-offset-x="565" style="flex: 1 0 0; margin: 0 auto;"></div>
<div data-expected-width="350" data-offset-x="215" style="flex: 2 0 0; padding: 0 100px;"></div>
<div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin-right: 100px;"></div>
</div>
</div>
</body>
</html>