third_party/WebKit/LayoutTests/css3/flexbox/flex-align-column.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     width: 600px;
  10     height: 240px;
  11     background-color: #aaa;
  12     position: relative;
  13 }
  14 .vertical {
  15     -webkit-writing-mode: vertical-lr;
  16 }
  17 .flexbox :nth-child(1) {
  18     background-color: blue;
  19 }
  20 .flexbox :nth-child(2) {
  21     background-color: green;
  22 }
  23 .flexbox :nth-child(3) {
  24     background-color: red;
  25 }
  26 .flexbox :nth-child(4) {
  27     background-color: yellow;
  28 }
  29 .flexbox :nth-child(5) {
  30     background-color: purple;
  31 }
  32 .flexbox :nth-child(6) {
  33     background-color: orange;
  34 }
  35 .flexbox :nth-child(7) {
  36     background-color: lime;
  37 }
  38 </style>
  39 <script src="../../resources/check-layout.js"></script>
  40 <body onload="checkLayout('.flexbox')">
  41
  42 <div class="flexbox column">
  43     <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="flex: 1;"></div>
  44     <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="flex: 1; align-self: stretch; "></div>
  45     <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: flex-start; width: 20px;"></div>
  46     <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: flex-end; width: 20px;"></div>
  47     <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: center; width: 20px;"></div>
  48     <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="flex: 1; align-self: baseline; width: 20px;"></div>
  49 </div>
  50
  51 <div class="flexbox column vertical">
  52     <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="flex: 1;"></div>
  53     <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="flex: 1; align-self: stretch; "></div>
  54     <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: flex-start; height: 20px;"></div>
  55     <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: flex-end; height: 20px;"></div>
  56     <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: center; height: 20px;"></div>
  57     <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="flex: 1; align-self: baseline; height: 20px;"></div>
  58 </div>
  59
  60 </body>
  61 </html>