third_party/WebKit/LayoutTests/css3/flexbox/flex-align-stretch.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
  16 .flexbox > :nth-child(1) {
  17     background-color: blue;
  18 }
  19 .flexbox > :nth-child(2) {
  20     background-color: green;
  21 }
  22 .flexbox > :nth-child(3) {
  23     background-color: red;
  24 }
  25
  26 .absolute {
  27   position: absolute;
  28   width: 50px;
  29   height: 50px;
  30   background-color: yellow !important;
  31 }
  32 </style>
  33 <script src="../../resources/check-layout.js"></script>
  34 <body onload="checkLayout('.flexbox')">
  35 <div class="flexbox" style="width: 600px">
  36   <div data-expected-height="100" class="flex-one" style="position: relative">
  37     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
  38   </div>
  39   <div data-expected-height="100" class="flex-one" style="height: 100px"></div>
  40   <div data-expected-height="100" class="flex-one" style="position: relative">
  41     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
  42   </div>
  43 </div>
  44
  45 <div style="-webkit-writing-mode: horizontal-bt">
  46 <div class="flexbox" style="width: 600px">
  47   <div data-expected-height="100" class="flex-one" style="position: relative">
  48     <div data-offset-x="0" data-offset-y="0" class="absolute" style="top:0;"></div>
  49   </div>
  50   <div data-expected-height="100" class="flex-one" style="height: 100px"></div>
  51   <div data-expected-height="100" class="flex-one" style="position: relative">
  52     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
  53   </div>
  54 </div>
  55 </div>
  56
  57 <div style="-webkit-writing-mode: vertical-rl">
  58 <div class="flexbox" style="height: 200px">
  59   <div data-expected-width="100" class="flex-one" style="position: relative">
  60     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
  61   </div>
  62   <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
  63   <div data-expected-width="100" class="flex-one" style="position: relative">
  64     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
  65   </div>
  66 </div>
  67 </div>
  68
  69 <div style="-webkit-writing-mode: vertical-lr">
  70 <div class="flexbox" style="height: 200px">
  71   <div data-expected-width="100" class="flex-one" style="position: relative">
  72     <div data-offset-x="50" data-offset-y="0" class="absolute" style="right:0;"></div>
  73   </div>
  74   <div data-expected-width="100" class="flex-one" style="width: 100px"></div>
  75   <div data-expected-width="100" class="flex-one" style="position: relative">
  76     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
  77   </div>
  78 </div>
  79 </div>
  80
  81 <div class="flexbox" style="height: 50px; width: 600px;">
  82   <div data-expected-height="50" style="background-color: yellow; width: 300px">
  83     <div data-expected-height="60" style="height: 60px; width: 10px; background-color: orange"></div>
  84   </div>
  85 </div>
  86
  87 <div class="flexbox column" style="width: 100px;">
  88   <div data-expected-width="100" data-expected-height="50" style="background-color: yellow;">
  89     <div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div>
  90   </div>
  91 </div>
  92
  93 </html>