LayoutTests/css3/flexbox/flex-align-max.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7 .flexbox {
   8     display: -webkit-flexbox;
   9     background-color: #aaa;
  10     position: relative;
  11 }
  12 .flexbox div {
  13     border: 0;
  14 }
  15 .column {
  16     -webkit-flex-flow: column;
  17 }
  18 .vertical-rl {
  19     -webkit-writing-mode: vertical-rl;
  20 }
  21 .flexbox :nth-child(1) {
  22     background-color: blue;
  23 }
  24 .flexbox :nth-child(2) {
  25     background-color: green;
  26 }
  27 .flexbox :nth-child(3) {
  28     background-color: red;
  29 }
  30 </style>
  31 <script>
  32 if (window.layoutTestController)
  33     layoutTestController.dumpAsText();
  34 </script>
  35 <script src="resources/flexbox.js"></script>
  36 <body onload="checkFlexBoxen()">
  37
  38 <div class="flexbox">
  39   <div data-expected-height="50" style="width: -webkit-flex(1 0 0); max-height: 100px"></div>
  40   <div data-expected-height="50" style="width: -webkit-flex(1 0 0); height: 50px"></div>
  41   <div data-expected-height="25" style="width: -webkit-flex(1 0 0); max-height: 25px"></div>
  42 </div>
  43
  44 <div class="flexbox column" style="width: 200px">
  45   <div data-expected-width="150" style="height: -webkit-flex(1 0 20px); max-width: 150px"></div>
  46   <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); width: 100px"></div>
  47   <div data-expected-width="200" style="height: -webkit-flex(1 0 20px);"></div>
  48 </div>
  49
  50 <div class="flexbox vertical-rl" style="height: 60px">
  51   <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); max-width: 110px"></div>
  52   <div data-expected-width="100" style="height: -webkit-flex(1 0 20px); width: 100px"></div>
  53   <div data-expected-width="50" style="height: -webkit-flex(1 0 20px); max-width: 50px"></div>
  54 </div>
  55
  56 <div class="flexbox column vertical-rl" style="height: 50px">
  57   <div data-expected-height="50" style="width: -webkit-flex(1 0 100px); max-height: 100px"></div>
  58   <div data-expected-height="50" style="width: -webkit-flex(1 0 100px); height: 50px"></div>
  59   <div data-expected-height="25" style="width: -webkit-flex(1 0 100px); max-height: 25px"></div>
  60 </div>
  61
  62 </body>
  63 </html>