LayoutTests/css3/flexbox/003.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" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
  36   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
  37   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
  38 </div>
  39
  40 <!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
  41 <div class="flexbox">
  42   <div data-expected-width="50" style="width: -webkit-flex(1 0 0); max-width: 50px;"></div>
  43   <div data-expected-width="300" style="width: -webkit-flex(4 0 0); max-width: 300px;"></div>
  44   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
  45 </div>
  46
  47 <div class="flexbox">
  48   <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
  49   <div data-expected-width="300" style="width: -webkit-flex(1 0 200px); max-width: 300px;"></div>
  50   <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
  51 </div>
  52
  53 <!-- Test min-width. -->
  54 <div class="flexbox">
  55   <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
  56   <div data-expected-width="250" style="width: -webkit-flex(1 1 400px);"></div>
  57 </div>
  58
  59 <!-- The flex items can overflow the flexbox. -->
  60 <div class="flexbox">
  61   <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
  62   <div data-expected-width="300" style="width: -webkit-flex(2 0 300px); max-width: 300px;"></div>
  63   <div data-expected-width="0" style="width: -webkit-flex(1 0 0);"></div>
  64 </div>
  65
  66 <div class="flexbox">
  67   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
  68   <div data-expected-width="333" data-offset-x="100" style="width: -webkit-flex(2 0 0);"></div>
  69   <div data-expected-width="167" data-offset-x="433" style="width: -webkit-flex(1 0 0);"></div>
  70 </div>
  71
  72 <!-- min-width and max-width take priority over the preferred size. -->
  73 <div class="flexbox">
  74   <div data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
  75   <div data-expected-width="100" style="width: -webkit-flex(1 0 50%); max-width: 100px"></div>
  76 </div>
  77
  78 </body>
  79 </html>