third_party/WebKit/LayoutTests/css3/flexbox/nested-stretch.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 div {
   6   outline: 1px solid black;
   7   background: hsla(210,100%,90%, .8);
   8   padding: 5px;
   9   margin: 5px;
  10 }
  11
  12 .flexbox {
  13   display: flex;
  14 }
  15
  16 .row {
  17   flex-direction: row;
  18 }
  19
  20 .column {
  21   display: flex;
  22   flex-direction: column;
  23 }
  24
  25 .flex {
  26   flex: 1 0 auto;
  27 }
  28 </style>
  29 <script src="../../resources/check-layout.js"></script>
  30 </head>
  31 <body onload="checkLayout('.flexbox')">
  32 There should be two boxes of equal height on the left and 3 boxes of equal
  33 height on the right.
  34 <div class="flexbox row" style="width: 600px">
  35   <div data-expected-width=290 data-expected-height=220 class="column flex">
  36     <div data-expected-width=270 data-expected-height=95 class="flex"></div>
  37     <div data-expected-width=270 data-expected-height=95 class="flex"></div>
  38   </div>
  39   <div data-expected-width=290 data-expected-height=220 class="column flex">
  40     <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
  41     <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
  42     <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
  43   </div>
  44 </div>
  45
  46 None of the boxes should overflow and the inner most boxes should be end aligned.
  47 <div class="flexbox column" style="width: 600px; height: 300px; position: relative;">
  48   <div data-expected-width=590 data-expected-height=250 class="column flex" style="justify-content: flex-end">
  49     <div data-offset-y="180" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
  50     <div data-offset-y="220" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
  51   </div>
  52   <div data-expected-width=590 data-expected-height=30 style="height: 20px; flex: none;"></div>
  53 </div>
  54
  55
  56 </body>
  57 </html>