third_party/WebKit/LayoutTests/css3/flexbox/flex-align-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     background-color: #aaa;
  10     position: relative;
  11 }
  12 .flexbox div {
  13     border: 0;
  14 }
  15 .vertical-rl {
  16     -webkit-writing-mode: vertical-rl;
  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 src="../../resources/check-layout.js"></script>
  29 <body onload="checkLayout('.flexbox')">
  30
  31 <div class="flexbox">
  32   <div data-expected-height="50" style="flex: 1 0 0; max-height: 100px"></div>
  33   <div data-expected-height="50" style="flex: 1 0 0; height: 50px"></div>
  34   <div data-expected-height="25" style="flex: 1 0 0; max-height: 25px"></div>
  35 </div>
  36
  37 <div class="flexbox column" style="width: 200px">
  38   <div data-expected-width="150" style="flex: 1 0 20px; max-width: 150px"></div>
  39   <div data-expected-width="100" style="flex: 1 0 20px; width: 100px"></div>
  40   <div data-expected-width="200" style="flex: 1 0 20px;"></div>
  41 </div>
  42
  43 <div class="flexbox vertical-rl" style="height: 60px">
  44   <div data-expected-width="100" style="flex: 1 0 20px; max-width: 110px"></div>
  45   <div data-expected-width="100" style="flex: 1 0 20px; width: 100px"></div>
  46   <div data-expected-width="50" style="flex: 1 0 20px; max-width: 50px"></div>
  47 </div>
  48
  49 <div class="flexbox column vertical-rl" style="height: 50px">
  50   <div data-expected-height="50" style="flex: 1 0 100px; max-height: 100px"></div>
  51   <div data-expected-height="50" style="flex: 1 0 100px; height: 50px"></div>
  52   <div data-expected-height="25" style="flex: 1 0 100px; max-height: 25px"></div>
  53 </div>
  54
  55 </body>
  56 </html>