third_party/WebKit/LayoutTests/css3/flexbox/columns-height-set-via-top-bottom.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 .container {
   6     position: relative;
   7     height: 100px;
   8     width: 100px;
   9     border: 2px solid orange;
  10 }
  11 .flexbox {
  12     flex-direction: column;
  13     position: absolute;
  14     top: 0;
  15     right: 0;
  16     bottom: 0;
  17     left: 0;
  18     padding: 10px;
  19 }
  20 .flexbox > :nth-child(1) {
  21     background-color: lightblue;
  22 }
  23 .flexbox > :nth-child(2) {
  24     background-color: lightgreen;
  25 }
  26 </style>
  27 <script src="../../resources/check-layout.js"></script>
  28 <body onload="checkLayout('.flexbox')">
  29
  30 <div class="container">
  31     <div data-expected-height=100 class="flexbox column">
  32         <div data-expected-height=30 data-expected-width=80 style="height: 30px"></div>
  33         <div data-expected-height=50 data-expected-width=80 style="flex: 1;"></div>
  34     </div>
  35 </div>
  36
  37 <div class="container">
  38     <div class="flexbox column wrap">
  39         <div data-expected-height=50 data-expected-width=40 style="height: 50px"></div>
  40         <div data-expected-height=80 data-expected-width=40 style="flex: 1 50px;"></div>
  41     </div>
  42 </div>
  43 </body>
  44 </html>