LayoutTests/css3/flexbox/flex-flow-orientations.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .container {
   5     position: relative;
   6     background-color: pink;
   7     outline: 1px solid black;
   8     display: inline-block;
   9 }
  10 .flexbox {
  11     display: -webkit-flexbox;
  12     background-color: grey;
  13     width: 100px;
  14     height: 100px;
  15 }
  16 .title {
  17     margin-top: 1em;
  18 }
  19 .ltr {
  20     direction: ltr;
  21 }
  22 .rtl {
  23     direction: rtl;
  24 }
  25 .horizontal-tb {
  26     -webkit-writing-mode: horizontal-tb;
  27 }
  28 .horizontal-bt {
  29     -webkit-writing-mode: horizontal-bt;
  30 }
  31 .vertical-rl {
  32     -webkit-writing-mode: vertical-rl;
  33 }
  34 .vertical-lr {
  35     -webkit-writing-mode: vertical-lr;
  36 }
  37 .row {
  38     -webkit-flex-flow: row;
  39 }
  40 .row-reverse {
  41     -webkit-flex-flow: row-reverse;
  42 }
  43 .column {
  44     -webkit-flex-flow: column;
  45 }
  46 .column-reverse {
  47     -webkit-flex-flow: column-reverse;
  48 }
  49 .flexbox > :nth-child(1) {
  50     background-color: blue;
  51 }
  52 .flexbox > :nth-child(2) {
  53     background-color: green;
  54 }
  55 .flexbox > :nth-child(3) {
  56     background-color: red;
  57 }
  58 </style>
  59 <script>
  60 if (window.layoutTestController)
  61     layoutTestController.dumpAsText();
  62 </script>
  63 <script src="resources/flexbox.js"></script>
  64 <body onload="checkFlexBoxen()">
  65
  66 <script>
  67 function asString(position)
  68 {
  69     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
  70 }
  71
  72 var expectations = {
  73     'horizontal-tb': {
  74         column: {
  75             rtl: [[80, 0], [80, 20]],
  76             ltr: [[0, 0], [0, 20]]
  77         },
  78         row: {
  79             rtl: [[80, 0], [60, 0]],
  80             ltr: [[0, 0], [20, 0]]
  81         }
  82     },
  83     'horizontal-bt': {
  84         column: {
  85             rtl: [[80, 80], [80, 60]],
  86             ltr: [[0, 80], [0, 60]]
  87         },
  88         row: {
  89             rtl: [[80, 80], [60, 80]],
  90             ltr: [[0, 80], [20, 80]]
  91         }
  92     },
  93     'vertical-lr': {
  94         column: {
  95             rtl: [[0, 80], [20, 80]],
  96             ltr: [[0, 0], [20, 0]]
  97         },
  98         row: {
  99             rtl: [[0, 80], [0, 60]],
 100             ltr: [[0, 0], [0, 20]]
 101         }
 102     },
 103     'vertical-rl': {
 104         column: {
 105             rtl: [[80, 80], [60, 80]],
 106             ltr: [[80, 0], [60, 0]]
 107         },
 108         row: {
 109             rtl: [[80, 80], [80, 60]],
 110             ltr: [[80, 0], [80, 20]]
 111         }
 112     }
 113 };
 114
 115 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
 116 // FIXME: Test row-reverse and column-reverse.
 117 var flexFlows = ['row', 'column'];
 118 var directions = ['rtl', 'ltr'];
 119
 120 function physicalWritingMode(writingMode, flexFlow, direction)
 121 {
 122     if (flexFlow.indexOf('column') == -1)
 123         return writingMode;
 124
 125     var isReverse = flexFlow.indexOf('reverse') != -1;
 126     switch (writingMode) {
 127     case 'horizontal-tb':
 128     case 'horizontal-bt':
 129         return isReverse ? 'vertical-rl' : 'vertical-lr';
 130     case 'vertical-lr':
 131     case 'vertical-rl':
 132         return isReverse ? 'horizontal-bt' : 'horizontal-tb';
 133     }
 134 }
 135
 136 writingModes.forEach(function(writingMode) {
 137     flexFlows.forEach(function(flexFlow) {
 138         directions.forEach(function(direction) {
 139             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 140             var title = document.createElement('div');
 141             title.className = 'title';
 142             title.innerHTML = flexboxClassName;
 143             document.body.appendChild(title);
 144
 145
 146             var flexItemExpectations = expectations[writingMode][flexFlow][direction];
 147
 148             var container = document.createElement('div');
 149             container.className = 'container';
 150             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '">\n' +
 151                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[0]) + '></div>\n' +
 152                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[1]) + '></div>\n' +
 153             '</div>';
 154
 155             document.body.appendChild(container);
 156         })
 157     })
 158 })
 159 </script>
 160 </body>
 161 </html>