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         'row-reverse': {
  83             rtl: [[0, 0], [20, 0]],
  84             ltr: [[80, 0], [60, 0]]
  85         }
  86     },
  87     'horizontal-bt': {
  88         column: {
  89             rtl: [[80, 80], [80, 60]],
  90             ltr: [[0, 80], [0, 60]]
  91         },
  92         row: {
  93             rtl: [[80, 80], [60, 80]],
  94             ltr: [[0, 80], [20, 80]]
  95         },
  96         'row-reverse': {
  97             rtl: [[0, 80], [20, 80]],
  98             ltr: [[80, 80], [60, 80]]
  99         }
 100     },
 101     'vertical-lr': {
 102         column: {
 103             rtl: [[0, 80], [20, 80]],
 104             ltr: [[0, 0], [20, 0]]
 105         },
 106         row: {
 107             rtl: [[0, 80], [0, 60]],
 108             ltr: [[0, 0], [0, 20]]
 109         },
 110         'row-reverse': {
 111             rtl: [[0, 0], [0, 20]],
 112             ltr: [[0, 80], [0, 60]]
 113         }
 114     },
 115     'vertical-rl': {
 116         column: {
 117             rtl: [[80, 80], [60, 80]],
 118             ltr: [[80, 0], [60, 0]]
 119         },
 120         row: {
 121             rtl: [[80, 80], [80, 60]],
 122             ltr: [[80, 0], [80, 20]]
 123         },
 124         'row-reverse': {
 125             rtl: [[80, 0], [80, 20]],
 126             ltr: [[80, 80], [80, 60]]
 127         }
 128     }
 129 };
 130
 131 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
 132 // FIXME: Test column-reverse.
 133 var flexFlows = ['row', 'column', 'row-reverse'];
 134 var directions = ['rtl', 'ltr'];
 135
 136 function physicalWritingMode(writingMode, flexFlow, direction)
 137 {
 138     if (flexFlow.indexOf('column') == -1)
 139         return writingMode;
 140
 141     var isReverse = flexFlow.indexOf('reverse') != -1;
 142     switch (writingMode) {
 143     case 'horizontal-tb':
 144     case 'horizontal-bt':
 145         return isReverse ? 'vertical-rl' : 'vertical-lr';
 146     case 'vertical-lr':
 147     case 'vertical-rl':
 148         return isReverse ? 'horizontal-bt' : 'horizontal-tb';
 149     }
 150 }
 151
 152 writingModes.forEach(function(writingMode) {
 153     flexFlows.forEach(function(flexFlow) {
 154         directions.forEach(function(direction) {
 155             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 156             var title = document.createElement('div');
 157             title.className = 'title';
 158             title.innerHTML = flexboxClassName;
 159             document.body.appendChild(title);
 160
 161
 162             var flexItemExpectations = expectations[writingMode][flexFlow][direction];
 163
 164             var container = document.createElement('div');
 165             container.className = 'container';
 166             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '">\n' +
 167                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[0]) + '></div>\n' +
 168                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[1]) + '></div>\n' +
 169             '</div>';
 170
 171             document.body.appendChild(container);
 172         })
 173     })
 174 })
 175 </script>
 176 </body>
 177 </html>