LayoutTests/css3/flexbox/flex-align-column.html

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