LayoutTests/css3/flexbox/004.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="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
  36   <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div>
  37   <div data-expected-width="100" data-offset-x="200" style="width: 100px;"></div>
  38 </div>
  39
  40 <div class="flexbox" style="-webkit-flex-pack: end">
  41   <div data-expected-width="100" data-offset-x="300" style="width: -webkit-flex(0 0 100px);"></div>
  42   <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div>
  43   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
  44 </div>
  45
  46 <div class="flexbox" style="-webkit-flex-pack: center">
  47   <div data-expected-width="100" data-offset-x="150" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
  48   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
  49   <div data-expected-width="100" data-offset-x="350" style="width: 100px;"></div>
  50 </div>
  51
  52 <div class="flexbox" style="-webkit-flex-pack: justify">
  53   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
  54   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
  55   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
  56 </div>
  57
  58 <!-- If there's only one child, we pack start. -->
  59 <div class="flexbox" style="-webkit-flex-pack: justify">
  60   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
  61 </div>
  62
  63 <!-- margin:auto does nothing here. -->
  64 <div class="flexbox" style="-webkit-flex-pack: end">
  65   <div data-expected-width="100" data-offset-x="300" style="width: 100px;"></div>
  66   <div data-expected-width="100" data-offset-x="400" style="width: 100px; margin-right: auto"></div>
  67   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
  68 </div>
  69
  70 <!-- The flex-pack does nothing here because we are shrinking. -->
  71 <div class="flexbox" style="-webkit-flex-pack: end">
  72   <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(0 1 300px);"></div>
  73   <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div>
  74   <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div>
  75 </div>
  76
  77 </body>
  78 </html>