third_party/WebKit/LayoutTests/css3/flexbox/writing-modes.html

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