LayoutTests/css3/flexbox/flex-align-percent-height.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7
   8 body, html {
   9     height: 600px;
  10 }
  11
  12 .flexbox {
  13     width: 600px;
  14     display: -webkit-flexbox;
  15     background-color: #aaa;
  16     position: relative;
  17 }
  18
  19 .flexbox div {
  20     border: 0;
  21 }
  22
  23 .flexbox :nth-child(1) {
  24     background-color: blue;
  25 }
  26 .flexbox :nth-child(2) {
  27     background-color: green;
  28 }
  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" style="height: 50%;">
  39   <div data-expected-height="50"  data-offset-y="0" style="width: -webkit-flex(1); height: 50px;"></div>
  40   <div data-expected-height="300" data-offset-y="0" style="width: -webkit-flex(1);"></div>
  41 </div>
  42
  43 </body>
  44 </html>