LayoutTests/css3/flexbox/001.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7 .flexbox {
   8     width: 600px;
   9 }
  10 .flexbox div {
  11     height: 20px;
  12     border: 0;
  13 }
  14
  15 .flexbox :nth-child(1) {
  16     background-color: blue;
  17 }
  18 .flexbox :nth-child(2) {
  19     background-color: green;
  20 }
  21 .flexbox :nth-child(3) {
  22     background-color: red;
  23 }
  24 </style>
  25 <script>
  26 if (window.layoutTestController)
  27     layoutTestController.dumpAsText();
  28 </script>
  29 <script src="resources/flexbox.js"></script>
  30 <body onload="checkFlexBoxen()">
  31
  32 <div style="display: -webkit-flexbox" class="flexbox">
  33   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
  34   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
  35   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
  36 </div>
  37
  38 <div style="display: -webkit-flexbox" class="flexbox">
  39   <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
  40   <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
  41   <div data-expected-width="200" style="width: -webkit-flex(.5)"></div>
  42 </div>
  43
  44 <div style="display: -webkit-flexbox" class="flexbox">
  45   <div data-expected-width="300" style="width: -webkit-flex(3)"></div>
  46   <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
  47   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
  48 </div>
  49
  50 <div style="display: -webkit-flexbox" class="flexbox">
  51   <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
  52   <div data-expected-width="250" style="width: -webkit-flex(1)"></div>
  53   <div data-expected-width="100" style="width: 100px"></div>
  54 </div>
  55
  56 <div style="display: -webkit-flexbox" class="flexbox">
  57   <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
  58   <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
  59   <div data-expected-width="300" style="width: 50%"></div>
  60 </div>
  61
  62 <!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
  63 <div style="display: -webkit-flexbox" class="flexbox">
  64   <div data-expected-width="150" style="width: -webkit-flex(1)"></div>
  65   <div data-expected-width="350" style="width: -webkit-flex(1 200px)"></div>
  66   <div data-expected-width="100" style="width: 100px"></div>
  67 </div>
  68
  69 <!-- Like the last test, except the middle box gets more space than the first box. -->
  70 <div style="display: -webkit-flexbox" class="flexbox">
  71   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
  72   <div data-expected-width="400" style="width: -webkit-flex(2 33.333333%)"></div>
  73   <div data-expected-width="100" style="width: 100px"></div>
  74 </div>
  75
  76 <!-- Test some negative flexing. -->
  77 <div style="display: -webkit-flexbox" class="flexbox">
  78   <div data-expected-width="200" style="width: -webkit-flex(1 1 300px)"></div>
  79   <div data-expected-width="200" style="width: -webkit-flex(2 1 300px)"></div>
  80   <div data-expected-width="200" style="width: -webkit-flex(3 1 300px)"></div>
  81 </div>
  82
  83 <div style="display: -webkit-flexbox" class="flexbox">
  84   <div data-expected-width="250" style="width: -webkit-flex(1 1 300px)"></div>
  85   <div data-expected-width="150" style="width: -webkit-flex(2 3 300px)"></div>
  86   <div data-expected-width="200" style="width: 200px"></div>
  87 </div>
  88
  89 <!-- Test flexitem borders. -->
  90 <div style="display: -webkit-flexbox" class="flexbox">
  91   <div data-expected-width="250" style="width: -webkit-flex(1); border-left: 150px solid black"></div>
  92   <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); border-right: 150px solid orange"></div>
  93   <div data-expected-width="100" style="width: -webkit-flex(1 0 0px)"></div>
  94 </div>
  95
  96 <div style="display: -webkit-flexbox" class="flexbox">
  97   <div data-expected-width="300" style="width: 100px; border: 100px solid black"></div>
  98   <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
  99   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
 100 </div>
 101
 102 <!-- Test flexitem padding. -->
 103 <div style="display: -webkit-flexbox" class="flexbox">
 104   <div data-expected-width="250" style="width: -webkit-flex(1); padding-left: 150px"></div>
 105   <div data-expected-width="250" style="width: -webkit-flex(1 0 0px); padding-right: 150px"></div>
 106   <div data-expected-width="100" style="width: -webkit-flex(1 0 0px)"></div>
 107 </div>
 108
 109 <div style="display: -webkit-flexbox" class="flexbox">
 110   <div data-expected-width="300" style="width: 100px; padding: 100px"></div>
 111   <div data-expected-width="200" style="width: -webkit-flex(2)"></div>
 112   <div data-expected-width="100" style="width: -webkit-flex(1)"></div>
 113 </div>
 114
 115 <div style="display: -webkit-flexbox" class="flexbox">
 116   <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 25%"></div>
 117   <div data-expected-width="150" style="width: -webkit-flex(3);"></div>
 118   <div data-expected-width="250" style="width: 100px; padding-right: 25%"></div>
 119 </div>
 120
 121 <div style="display: -webkit-flexbox" class="flexbox">
 122   <div data-expected-width="200" style="width: -webkit-flex(1); padding-left: 50px; border-right: 50px solid black"></div>
 123   <div data-expected-width="250" style="width: -webkit-flex(2); border-right: 50px solid orange"></div>
 124   <div data-expected-width="150" style="width: -webkit-flex(1); padding-right: 50px;"></div>
 125 </div>
 126
 127 <!-- Test items with an intrinsic size. -->
 128 <div style="display: -webkit-flexbox" class="flexbox">
 129   <div data-expected-width="120" style="width: -webkit-flex(1)">
 130       <div style="width: 100px; height: 100%;"></div>
 131   </div>
 132   <div data-expected-width="240" style="width: -webkit-flex(2)"></div>
 133   <div data-expected-width="240" style="width: -webkit-flex(2)"></div>
 134 </div>
 135
 136 <div style="display: -webkit-flexbox" class="flexbox">
 137   <div data-expected-width="200" style="width: -webkit-flex(1 0 0)">
 138       <div style="width: 100px; height: 100%;"></div>
 139   </div>
 140   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
 141   <div data-expected-width="200" style="width: -webkit-flex(1)"></div>
 142 </div>
 143
 144 <!-- Test border/padding/margin on the flexbox itself. -->
 145 <div data-expected-width="830" style="border: 10px solid; display: inline-block;">
 146     <div data-expected-width="700" style="display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox ">
 147       <div data-offset-x="100" data-expected-width="200" style="width: -webkit-flex(1)"></div>
 148       <div data-offset-x="300" data-expected-width="200" style="width: -webkit-flex(1)"></div>
 149       <div data-offset-x="500" data-expected-width="200" style="width: -webkit-flex(1)"></div>
 150     </div>
 151 </div>
 152
 153 </body>
 154 </html>