third_party/WebKit/LayoutTests/css3/flexbox/orthogonal-flex-directions.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: #aaa;
  11     position: relative;
  12 }
  13 .flexbox > * {
  14     flex: none;
  15 }
  16 .flexbox > :nth-child(1) {
  17     background-color: blue;
  18 }
  19 .flexbox > :nth-child(2) {
  20     background-color: green;
  21 }
  22
  23 .flexbox > div > :nth-child(1) {
  24     background-color: pink;
  25 }
  26 .flexbox > div > :nth-child(2) {
  27     background-color: purple;
  28 }
  29
  30 .flexbox > div > div > :nth-child(1) {
  31     background-color: red;
  32 }
  33 .flexbox > div > div > :nth-child(2) {
  34     background-color: yellow;
  35 }
  36
  37 .nested {
  38     display: flex;
  39     background-color: #ddd;
  40 }
  41
  42 .rtl {
  43     direction: rtl;
  44 }
  45 .bt {
  46     -webkit-writing-mode: horizontal-bt;
  47 }
  48 .vertical-rl {
  49     -webkit-writing-mode: vertical-rl;
  50 }
  51 .vertical-lr {
  52     -webkit-writing-mode: vertical-lr;
  53 }
  54 .row-reverse {
  55     flex-flow: row-reverse;
  56 }
  57 .column {
  58     flex-flow: column;
  59 }
  60 .column-reverse {
  61     flex-flow: column-reverse;
  62 }
  63
  64 .align-start {
  65     align-self: flex-start;
  66 }
  67 </style>
  68 <script src="../../resources/check-layout.js"></script>
  69 <body onload="checkLayout('.flexbox')">
  70
  71 <div class="flexbox">
  72     <div class="column nested">
  73         <div data-expected-height="50" style="flex: 1 0 0; width: 100px;"></div>
  74         <div data-expected-height="50" style="flex: 1 0 0; width: 100px;"></div>
  75     </div>
  76     <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
  77 </div>
  78
  79 <div class="flexbox">
  80     <div class="column nested align-start">
  81         <div data-expected-height="0" style="flex: 1 0 0; width: 100px;"></div>
  82         <div data-expected-height="0" style="flex: 1 0 0; width: 100px;"></div>
  83     </div>
  84     <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
  85 </div>
  86
  87 <div class="flexbox">
  88     <div class="column nested align-start" style="height: 50px">
  89         <div data-expected-height="25" style="flex: 1 0 0; width: 100px;"></div>
  90         <div data-expected-height="25" style="flex: 1 0 0; width: 100px;"></div>
  91     </div>
  92     <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
  93 </div>
  94
  95 <div class="flexbox">
  96     <div class="column nested" style="height: 50px">
  97         <div class="nested" style="flex: 1; width: 100px;">
  98             <div data-expected-height="25" style="flex: 1 0 auto;"></div>
  99             <div data-expected-height="25" style="flex: 1 0 auto;"></div>
 100         </div>
 101         <div style="flex: 1;"></div>
 102     </div>
 103     <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
 104 </div>
 105
 106 <div class="flexbox column" style="height: 100px">
 107     <div class="row-reverse nested" style="flex: 1; width: 100px;">
 108         <div data-expected-width="50" style="flex: 1 0 auto;"></div>
 109         <div data-expected-width="50" style="flex: 1 0 auto;"></div>
 110     </div>
 111     <div data-expected-height="50" style="flex: 1 0 0;"></div>
 112 </div>
 113
 114 <div class="flexbox column-reverse" style="height: 100px">
 115     <div class="row-reverse nested" style="flex: 1; width: 100px;">
 116         <div data-expected-width="50" style="flex: 1 0 auto;"></div>
 117         <div data-expected-width="50" style="flex: 1 0 auto;"></div>
 118     </div>
 119     <div data-expected-height="50" style="flex: 1 0 0;"></div>
 120 </div>
 121
 122 <div class="flexbox vertical-lr" style="height: 100px">
 123     <div class="column nested" style="flex: 1; width: 100px;">
 124         <div data-expected-width="50" style="flex: 1 0 auto;"></div>
 125         <div data-expected-width="50" style="flex: 1 0 auto;"></div>
 126     </div>
 127     <div data-expected-height="50" style="flex: 1 0 0;"></div>
 128 </div>
 129
 130 </body>
 131 </html>