third_party/WebKit/LayoutTests/css3/flexbox/flex-algorithm-min-max.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 body {
   6     margin: 0;
   7 }
   8 .flexbox {
   9     width: 600px;
  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
  28 .flex1 {
  29     flex: 1;
  30 }
  31 .flex2 {
  32     flex: 2;
  33 }
  34 .flex3 {
  35     flex: 3;
  36 }
  37 .flex1-0-0 {
  38     flex: 1 0 0px;
  39 }
  40 </style>
  41 <script src="../../resources/check-layout.js"></script>
  42 <body onload="checkLayout('.flexbox')">
  43 <div class="flexbox">
  44   <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></div>
  45   <div data-expected-width="250" class="flex1-0-0"></div>
  46   <div data-expected-width="250" class="flex1-0-0"></div>
  47 </div>
  48
  49 <!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
  50 <div class="flexbox">
  51   <div data-expected-width="50" class="flex1-0-0" style="max-width: 50px;"></div>
  52   <div data-expected-width="300" style="flex: 4 0 0; max-width: 300px;"></div>
  53   <div data-expected-width="250" style="flex: 1 0 0;"></div>
  54 </div>
  55
  56 <div class="flexbox">
  57   <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></div>
  58   <div data-expected-width="300" style="flex: 1 0 200px; max-width: 300px;"></div>
  59   <div data-expected-width="200" class="flex1-0-0"></div>
  60 </div>
  61
  62 <!-- Test min-width. -->
  63 <div class="flexbox">
  64   <div data-expected-width="350" style="flex: 1 1 400px; min-width: 350px;"></div>
  65   <div data-expected-width="250" style="flex: 1 1 400px;"></div>
  66 </div>
  67
  68 <!-- The flex items can overflow the flexbox. -->
  69 <div class="flexbox">
  70   <div data-expected-width="350" style="flex: 1 1 400px; min-width: 350px;"></div>
  71   <div data-expected-width="300" style="flex: 2 0 300px; max-width: 300px;"></div>
  72   <div data-expected-width="0" class="flex1-0-0"></div>
  73 </div>
  74
  75 <div class="flexbox">
  76   <div data-expected-width="100" data-offset-x="0" class="flex1-0-0" style="margin: 0 auto; max-width: 100px;"></div>
  77   <div data-expected-width="333" data-offset-x="100" style="flex: 2 0 0;"></div>
  78   <div data-expected-width="167" data-offset-x="433" class="flex1-0-0"></div>
  79 </div>
  80
  81 <!-- min-width and max-width take priority over the preferred size. -->
  82 <div class="flexbox">
  83   <div data-expected-width="500" class="flex1-0-0" style="min-width: 300px"></div>
  84   <div data-expected-width="100" style="flex: 1 0 50%; max-width: 100px"></div>
  85 </div>
  86
  87 <div class="flexbox" style="width: 200px">
  88   <div data-expected-width="150" class="flex1" style="min-width: 150px"></div>
  89   <div data-expected-width="50" class="flex1" style="max-width: 90px"></div>
  90 </div>
  91
  92 <div class="flexbox" style="width: 200px">
  93   <div data-expected-width="150" class="flex1" style="min-width: 120px"></div>
  94   <div data-expected-width="50" class="flex1" style="max-width: 50px"></div>
  95 </div>
  96
  97 <div class="flexbox" style="width: 200px">
  98   <div data-expected-width="100" class="flex1" style="min-width: 100px"></div>
  99   <div data-expected-width="100" class="flex3"></div>
 100 </div>
 101
 102 <div class="flexbox" style="width: 200px">
 103   <div data-expected-width="150" style="flex: 1 50px; min-width: 100px"></div>
 104   <div data-expected-width="50" style="flex: 1 100px; max-width: 50px"></div>
 105 </div>
 106
 107 <div class="flexbox">
 108   <div data-expected-width="80" class="flex1"></div>
 109   <div data-expected-width="160" class="flex2"></div>
 110   <div data-expected-width="360" class="flex1" style="min-width: 360px"></div>
 111 </div>
 112
 113 </body>
 114 </html>