Google Git
Sign in
webkit / WebKit / 03e70e7bbd89baf9e6fd704451cb59c4abf5517b / . / LayoutTests / css3 / flexbox / writing-modes.html
blob: edfc353c6a2cc5c4a6f2cc1858eacc320f2507e4 [file] [log] [blame]
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]1<!DOCTYPE html>
2<html>
3<style>
4body {
5 margin: 0;
6}
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]7.flexbox {
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]8 width: 600px;
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]9 display: flex;
ojan@chromium.orgdc783b12011-09-27 21:45:54 +0000[diff] [blame]10 background-color: grey;
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]11}
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]12.flexbox div {
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]13 height: 20px;
14 border: 0;
15}
16
17.rtl {
18 direction: rtl;
19}
20
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]21.horizontal-tb {
22 writing-mode:horizontal-tb;
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]23}
24
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]25
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]26.vertical-rl, .vertical-lr {
27 height: 600px;
28}
29
30:-webkit-any(.vertical-rl, .vertical-lr) div {
31 width: 20px;
32}
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]33.vertical-rl {
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]34 writing-mode: vertical-rl;
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]35}
36
37.vertical-lr {
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]38 writing-mode: vertical-lr;
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]39}
40
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]41.flexbox > :nth-child(1) {
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]42 background-color: blue;
43}
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]44.flexbox > :nth-child(2) {
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]45 background-color: green;
46}
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]47.flexbox > :nth-child(3) {
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]48 background-color: red;
49}
50</style>
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]51<script src="../../resources/testharness.js"></script>
52<script src="../../resources/testharnessreport.js"></script>
53<script src="../../resources/check-layout-th.js"></script>
tony@chromium.orgb1541ca2012-07-13 19:58:47 +0000[diff] [blame]54<body onload="checkLayout('.flexbox')">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]55<div id=log></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]56
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]57<div class="flexbox rtl">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]58 <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
59 <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding: 0 100px;"></div>
60 <div data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-left: 100px;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]61</div>
62
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]63<div class="flexbox rtl">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]64 <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
65 <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding: 0 100px;"></div>
66 <div data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; -webkit-margin-start: 100px;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]67</div>
68
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]69<div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]70 <div data-expected-width="75" data-offset-x="575" style="flex: 1 0 0; margin: 0 auto;"></div>
71 <div data-expected-width="350" data-offset-x="225" style="flex: 2 0 0; padding: 0 100px;"></div>
72 <div data-expected-width="75" data-offset-x="50" style="flex: 1 0 0; -webkit-margin-start: 100px;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]73</div>
74
75<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]76<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]77 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
78 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
79 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]80</div>
81</div>
82
83<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]84<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]85 <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="flex: 1 0 0; margin: 0 100px 0 50px;"></div>
86 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
87 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
ojan@chromium.org82538602011-10-06 00:01:28 +0000[diff] [blame]88</div>
89</div>
90
91<div style="position:relative">
92<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]93 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div>
94 <div data-expected-height="300" data-offset-y="150" class="horizontal-tb" style="flex: 2 0 0;"></div>
95 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]96</div>
97</div>
98
99<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]100<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]101 <div data-expected-height="450" data-offset-y="0" style="flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
102 <div data-expected-height="100" data-offset-y="450" style="flex: 2 0 0;"></div>
103 <div data-expected-height="50" data-offset-y="550" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]104</div>
105</div>
106
107<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]108<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]109 <div data-expected-height="300" data-offset-y="0" class="horizontal-tb" style="flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
110 <div data-expected-height="200" data-offset-y="300" style="flex: 2 0 0;"></div>
111 <div data-expected-height="100" data-offset-y="500" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]112</div>
113</div>
114
115
116<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]117<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]118 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 0;"></div>
119 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
120 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]121</div>
122</div>
123
124<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]125<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]126 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: auto 0;"></div>
127 <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>
128 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]129</div>
130</div>
131
132<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]133<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]134 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: auto 0;"></div>
135 <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>
136 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]137</div>
138</div>
139
140<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]141<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]142 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
143 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
144 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]145</div>
146</div>
147
148<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]149<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]150 <div data-expected-height="150" data-offset-y="0" class="horizontal-tb" style="flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
151 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div>
152 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]153</div>
154</div>
155
156<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]157<div class="flexbox vertical-lr rtl">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]158 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0; margin: auto 0;"></div>
159 <div data-expected-height="350" data-offset-y="175" class="horizontal-tb" style="flex: 2 0 0; padding: 100px 0;"></div>
160 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0; -webkit-margin-start: 100px;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]161</div>
162</div>
163
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]164<div class="flexbox vertical-lr">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]165 <div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></div>
166 <div data-expected-height="250" style="flex: 1 1 400px;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]167</div>
168
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]169<div style="position:relative">
ojan@chromium.org92bf5d32011-09-21 17:00:43 +0000[diff] [blame]170<div class="flexbox vertical-rl">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]171 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="flex: 1 0 0;"></div>
172 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="flex: 2 0 0;"></div>
173 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0;"></div>
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]174</div>
175</div>
176
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]177<div style="position:relative">
ojan@chromium.org82538602011-10-06 00:01:28 +0000[diff] [blame]178<div class="flexbox vertical-rl">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]179 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="flex: 1 0 0; margin: 0 100px 0 50px;"></div>
180 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="flex: 2 0 0;"></div>
181 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0;"></div>
ojan@chromium.org82538602011-10-06 00:01:28 +0000[diff] [blame]182</div>
183</div>
184
ojan@chromium.orgdc783b12011-09-27 21:45:54 +0000[diff] [blame]185<div style="position: relative;">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]186 <div data-expected-width="600" style="direction: rtl; display: flex; margin-left: 10px; margin-right:20px;" class="flexbox">
187 <div data-expected-width="75" data-offset-x="535" style="flex: 1 0 0; margin: 0 auto;"></div>
188 <div data-expected-width="350" data-offset-x="185" style="flex: 2 0 0; padding: 0 100px;"></div>
189 <div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin-right: 100px;"></div>
ojan@chromium.orgdc783b12011-09-27 21:45:54 +0000[diff] [blame]190 </div>
191</div>
192
193<div style="position: relative;">
hyatt@apple.com247170f2017-02-28 16:23:15 +0000[diff] [blame]194 <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 ">
195 <div data-expected-width="75" data-offset-x="565" style="flex: 1 0 0; margin: 0 auto;"></div>
196 <div data-expected-width="350" data-offset-x="215" style="flex: 2 0 0; padding: 0 100px;"></div>
197 <div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin-right: 100px;"></div>
ojan@chromium.orgdc783b12011-09-27 21:45:54 +0000[diff] [blame]198 </div>
199</div>
200
ojan@chromium.orgdc30af12011-09-20 22:46:19 +0000[diff] [blame]201</body>
rniwa@webkit.org42948af2012-06-11 18:23:57 +0000[diff] [blame]202</html>