third_party/WebKit/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: flex;
  12     background-color: grey;
  13     width: 100px;
  14     height: 100px;
  15 }
  16 .flexbox > * {
  17     flex: none;
  18 }
  19 .title {
  20     margin-top: 1em;
  21 }
  22 .ltr {
  23     direction: ltr;
  24 }
  25 .rtl {
  26     direction: rtl;
  27 }
  28 .horizontal-tb {
  29     -webkit-writing-mode: horizontal-tb;
  30 }
  31 .horizontal-bt {
  32     -webkit-writing-mode: horizontal-bt;
  33 }
  34 .vertical-rl {
  35     -webkit-writing-mode: vertical-rl;
  36 }
  37 .vertical-lr {
  38     -webkit-writing-mode: vertical-lr;
  39 }
  40 .row {
  41     flex-flow: row;
  42 }
  43 .row-reverse {
  44     flex-flow: row-reverse;
  45 }
  46 .column {
  47     flex-flow: column;
  48 }
  49 .column-reverse {
  50     flex-flow: column-reverse;
  51 }
  52 .flexbox > :nth-child(1) {
  53     background-color: blue;
  54 }
  55 .flexbox > :nth-child(2) {
  56     background-color: green;
  57 }
  58 .flexbox > :nth-child(3) {
  59     background-color: red;
  60 }
  61 </style>
  62 <script src="../../resources/check-layout.js"></script>
  63 <body onload="checkLayout('.flexbox')">
  64
  65 <script>
  66 function asString(position)
  67 {
  68     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
  69 }
  70
  71 var expectations = {
  72     'horizontal-tb': {
  73         column: {
  74             rtl: [[80, 0], [80, 20]],
  75             ltr: [[0, 0], [0, 20]]
  76         },
  77         'column-reverse': {
  78             rtl: [[80, 80], [80, 60]],
  79             ltr: [[0, 80], [0, 60]]
  80         },
  81         row: {
  82             rtl: [[80, 0], [60, 0]],
  83             ltr: [[0, 0], [20, 0]]
  84         },
  85         'row-reverse': {
  86             rtl: [[0, 0], [20, 0]],
  87             ltr: [[80, 0], [60, 0]]
  88         }
  89     },
  90     'horizontal-bt': {
  91         column: {
  92             rtl: [[80, 80], [80, 60]],
  93             ltr: [[0, 80], [0, 60]]
  94         },
  95         'column-reverse': {
  96             rtl: [[80, 0], [80, 20]],
  97             ltr: [[0, 0], [0, 20]]
  98         },
  99         row: {
 100             rtl: [[80, 80], [60, 80]],
 101             ltr: [[0, 80], [20, 80]]
 102         },
 103         'row-reverse': {
 104             rtl: [[0, 80], [20, 80]],
 105             ltr: [[80, 80], [60, 80]]
 106         }
 107     },
 108     'vertical-lr': {
 109         column: {
 110             rtl: [[0, 80], [20, 80]],
 111             ltr: [[0, 0], [20, 0]]
 112         },
 113         'column-reverse': {
 114             rtl: [[80, 80], [60, 80]],
 115             ltr: [[80, 0], [60, 0]]
 116         },
 117         row: {
 118             rtl: [[0, 80], [0, 60]],
 119             ltr: [[0, 0], [0, 20]]
 120         },
 121         'row-reverse': {
 122             rtl: [[0, 0], [0, 20]],
 123             ltr: [[0, 80], [0, 60]]
 124         }
 125     },
 126     'vertical-rl': {
 127         column: {
 128             rtl: [[80, 80], [60, 80]],
 129             ltr: [[80, 0], [60, 0]]
 130         },
 131         'column-reverse': {
 132             rtl: [[0, 80], [20, 80]],
 133             ltr: [[0, 0], [20, 0]]
 134         },
 135         row: {
 136             rtl: [[80, 80], [80, 60]],
 137             ltr: [[80, 0], [80, 20]]
 138         },
 139         'row-reverse': {
 140             rtl: [[80, 0], [80, 20]],
 141             ltr: [[80, 80], [80, 60]]
 142         }
 143     }
 144 };
 145
 146 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
 147 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
 148 var directions = ['rtl', 'ltr'];
 149
 150 function physicalWritingMode(writingMode, flexFlow, direction)
 151 {
 152     if (flexFlow.indexOf('column') == -1)
 153         return writingMode;
 154
 155     var isReverse = flexFlow.indexOf('reverse') != -1;
 156     switch (writingMode) {
 157     case 'horizontal-tb':
 158     case 'horizontal-bt':
 159         return isReverse ? 'vertical-rl' : 'vertical-lr';
 160     case 'vertical-lr':
 161     case 'vertical-rl':
 162         return isReverse ? 'horizontal-bt' : 'horizontal-tb';
 163     }
 164 }
 165
 166 writingModes.forEach(function(writingMode) {
 167     flexFlows.forEach(function(flexFlow) {
 168         directions.forEach(function(direction) {
 169             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 170             var title = document.createElement('div');
 171             title.className = 'title';
 172             title.innerHTML = flexboxClassName;
 173             document.body.appendChild(title);
 174
 175
 176             var flexItemExpectations = expectations[writingMode][flexFlow][direction];
 177
 178             var container = document.createElement('div');
 179             container.className = 'container';
 180             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '">\n' +
 181                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[0]) + '></div>\n' +
 182                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[1]) + '></div>\n' +
 183             '</div>';
 184
 185             document.body.appendChild(container);
 186         })
 187     })
 188 })
 189 </script>
 190 </body>
 191 </html>