third_party/WebKit/LayoutTests/css3/flexbox/preferred-widths-orthogonal.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     display: flex;
   6     background-color: #aaa;
   7     float: left;
   8 }
   9 .flexbox > div {
  10     margin: 2px 13px 8px 17px;
  11     flex: none;
  12 }
  13 .flexbox > div:not(.nested) {
  14     width: 10px;
  15     height: 15px;
  16 }
  17 .flexbox > .nested > div:not(.nested) {
  18     width: 20px;
  19     height: 30px;
  20 }
  21 .flexbox > .nested > .nested > div {
  22     width: 30px;
  23     height: 40px;
  24 }
  25
  26 .flexbox > :nth-child(1) {
  27     background-color: blue;
  28 }
  29 .flexbox > :nth-child(2) {
  30     background-color: green;
  31 }
  32 .flexbox > div > :nth-child(1) {
  33     background-color: pink;
  34 }
  35 .flexbox > div > :nth-child(2) {
  36     background-color: purple;
  37 }
  38 .flexbox > div > div > :nth-child(1) {
  39     background-color: red;
  40 }
  41 .flexbox > div > div > :nth-child(2) {
  42     background-color: yellow;
  43 }
  44
  45 .nested {
  46     display: flex;
  47     background-color: #ddd;
  48 }
  49 .horizontal-tb {
  50     -webkit-writing-mode: horizontal-tb;
  51 }
  52 .vertical-lr {
  53     -webkit-writing-mode: vertical-lr;
  54 }
  55 .column {
  56     flex-flow: column;
  57 }
  58 .clear {
  59     clear: both;
  60 }
  61 </style>
  62 <script src="../../resources/check-layout.js"></script>
  63 <body onload="checkLayout('.flexbox')">
  64
  65 <div class="flexbox" data-expected-height=70  data-expect-width=90>
  66     <div class="column nested" data-expected-height=60  data-expect-width=20>
  67         <div></div>
  68         <div></div>
  69     </div>
  70     <div></div>
  71 </div>
  72 <br class=clear>
  73
  74 <div class="flexbox vertical-lr" data-expected-height=115  data-expect-width=80>
  75     <div class="horizontal-tb nested" data-expected-height=80  data-expect-width=50>
  76         <div class="vertical-lr nested" data-expected-height=80  data-expect-width=30>
  77             <div></div>
  78             <div></div>
  79         </div>
  80         <div></div>
  81     </div>
  82     <div></div>
  83 </div>
  84 <br class=clear>
  85
  86 <div class="flexbox vertical-lr" data-expected-height=65  data-expect-width=70>
  87     <div class="column nested" data-expected-height=30  data-expect-width=40>
  88         <div></div>
  89         <div></div>
  90     </div>
  91     <div></div>
  92 </div>
  93 <br class=clear>
  94
  95 <div class="flexbox vertical-lr" data-expected-height=65  data-expect-width=70>
  96     <div class="nested horizontal-tb" data-expected-height=30  data-expect-width=40>
  97         <div></div>
  98         <div></div>
  99     </div>
 100     <div></div>
 101 </div>
 102 <br class=clear>
 103
 104 <div class="flexbox" data-expected-height=70  data-expect-width=90>
 105     <div class="nested vertical-lr" data-expected-height=60  data-expect-width=20>
 106         <div></div>
 107         <div></div>
 108     </div>
 109     <div></div>
 110 </div>
 111 <br class=clear>
 112
 113 </body>
 114 </html>