LayoutTests/css3/flexbox/002.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7 .flexbox {
   8     width: 600px;
   9     display: -webkit-flexbox;
  10     background-color: #aaa;
  11     position: relative;
  12 }
  13 .flexbox div {
  14     height: 20px;
  15     border: 0;
  16 }
  17
  18 .flexbox :nth-child(1) {
  19     background-color: blue;
  20 }
  21 .flexbox :nth-child(2) {
  22     background-color: green;
  23 }
  24 .flexbox :nth-child(3) {
  25     background-color: red;
  26 }
  27 </style>
  28 <script>
  29 if (window.layoutTestController)
  30     layoutTestController.dumpAsText();
  31 </script>
  32 <script src="resources/flexbox.js"></script>
  33 <body onload="checkFlexBoxen()">
  34 <div class="flexbox">
  35   <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
  36   <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px;"></div>
  37   <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
  38 </div>
  39
  40 <div data-expected-height="120" class="flexbox">
  41   <div data-expected-width="200" data-offset-y="50" style="width: -webkit-flex(1 0 0); margin: 50px 0;"></div>
  42   <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px;"></div>
  43   <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
  44 </div>
  45
  46 <!-- Margins set to auto have a value of 0. -->
  47 <div class="flexbox">
  48   <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
  49   <div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto;"></div>
  50   <div data-expected-width="200" data-offset-x="400" style="width: -webkit-flex(1 0 0)"></div>
  51 </div>
  52
  53 <div class="flexbox">
  54   <div data-expected-width="133" style="width: -webkit-flex(1 0 0);"></div>
  55   <div data-expected-width="233" data-offset-x="133" style="width: -webkit-flex(1 0 100px); margin-left: auto;"></div>
  56   <div data-expected-width="133" data-offset-x="366" style="width: -webkit-flex(1 0 0); margin-right: 100px"></div>
  57 </div>
  58
  59 <!-- Margins set to auto don't have negative flex either. -->
  60 <div class="flexbox">
  61   <div data-expected-width="150" style="width: -webkit-flex(1 1 300px);"></div>
  62   <div data-expected-width="300" data-offset-x="150" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
  63   <div data-expected-width="150" data-offset-x="450" style="width: -webkit-flex(1 1 300px);"></div>
  64 </div>
  65
  66 <!-- Margins set to auto don't center in flexboxen. -->
  67 <div class="flexbox">
  68   <div data-expected-width="300px" data-offset-x="0" style="width: -webkit-flex(0 0 300px); margin: 0 auto;"></div>
  69 </div>
  70
  71 <div class="flexbox">
  72   <div data-expected-width="600px" data-offset-x="0" style="width: -webkit-flex(1 0 300px); margin: 0 auto;"></div>
  73 </div>
  74
  75 <div class="flexbox">
  76   <div data-expected-width="600" data-offset-x="0" style="width: -webkit-flex(4); margin: 0 auto;">
  77       <div style="width: 100px; height: 100%;"></div>
  78   </div>
  79 </div>
  80
  81 <div class="flexbox" style="margin: 100px;">
  82   <div data-expected-width="300" data-offset-x="0" style="width: -webkit-flex(1); margin: 0 auto;"></div>
  83   <div data-expected-width="300" data-offset-x="300" style="width: -webkit-flex(1); margin: 0 auto;"></div>
  84 </div>
  85
  86 <div class="flexbox" style="padding: 100px;">
  87   <div data-expected-width="300" data-offset-x="100" style="width: -webkit-flex(1 0 0px); margin: 0 auto;"></div>
  88   <div data-expected-width="300" data-offset-x="400" style="width: -webkit-flex(1 0 0em); margin: 0 auto;"></div>
  89 </div>
  90
  91 <div class="flexbox">
  92   <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
  93   <div data-expected-width="350" data-offset-x="75" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
  94   <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
  95 </div>
  96
  97 </body>
  98 </html>