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

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