LayoutTests/css3/flexbox/flex-flow-auto-margins.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-flex;
  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 .physical {
  50     margin: 10px 20px 30px 40px;
  51 }
  52 .physical > div {
  53     margin: 13px auto 17px auto;
  54 }
  55 .logical {
  56     -webkit-margin-before: 10px;
  57     -webkit-margin-after: 30px;
  58     -webkit-margin-start: 40px;
  59     -webkit-margin-end: 20px;
  60 }
  61 .logical > div {
  62     -webkit-margin-before: auto;
  63     -webkit-margin-after: 17px;
  64     -webkit-margin-start: auto;
  65     -webkit-margin-end: 2px;
  66 }
  67 .flexbox > :nth-child(1) {
  68     background-color: blue;
  69 }
  70 .flexbox > :nth-child(2) {
  71     background-color: green;
  72 }
  73 .flexbox > :nth-child(3) {
  74     background-color: red;
  75 }
  76 </style>
  77 <script>
  78 if (window.layoutTestController)
  79     layoutTestController.dumpAsText();
  80 </script>
  81 <script src="resources/flexbox.js"></script>
  82 <body onload="checkFlexBoxen()">
  83
  84 <script>
  85 function positionAsString(position)
  86 {
  87     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
  88 }
  89
  90 function asString(expectations)
  91 {
  92     return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
  93 }
  94
  95 var physicalContainerSize = [160, 140];
  96 var physicalFlexBoxPosition = [40, 10];
  97
  98 var physicalExpectations = {
  99     'horizontal-tb': {
 100         rtl: {
 101             container: physicalContainerSize,
 102             flexbox: physicalFlexBoxPosition,
 103             column: [20, 20, 80, 23],
 104             row: [20, 20, 80, 23],
 105             'column-reverse': [20, 20, 80, 23],
 106             'row-reverse': [20, 20, 80, 23],
 107         },
 108         ltr : {
 109             container: physicalContainerSize,
 110             flexbox: physicalFlexBoxPosition,
 111             column: [20, 20, 80, 23],
 112             row: [20, 20, 80, 23],
 113             'column-reverse': [20, 20, 80, 23],
 114             'row-reverse': [20, 20, 80, 23],
 115         }
 116     },
 117     'horizontal-bt': {
 118         rtl: {
 119             container: physicalContainerSize,
 120             flexbox: physicalFlexBoxPosition,
 121             column: [20, 20, 80, 73],
 122             row: [20, 20, 80, 73],
 123             'column-reverse': [20, 20, 80, 73],
 124             'row-reverse': [20, 20, 80, 73],
 125         },
 126         ltr : {
 127             container: physicalContainerSize,
 128             flexbox: physicalFlexBoxPosition,
 129             column: [20, 20, 80, 73],
 130             row: [20, 20, 80, 73],
 131             'column-reverse': [20, 20, 80, 73],
 132             'row-reverse': [20, 20, 80, 73],
 133         }
 134     },
 135     'vertical-lr': {
 136         rtl: {
 137             container: physicalContainerSize,
 138             flexbox: physicalFlexBoxPosition,
 139             column: [20, 20, 80, 73],
 140             row: [20, 20, 40, 73],
 141             'column-reverse': [20, 20, 40, 73],
 142             'row-reverse': [20, 20, 40, 23],
 143         },
 144         ltr : {
 145             container: physicalContainerSize,
 146             flexbox: physicalFlexBoxPosition,
 147             column: [20, 20, 80, 23],
 148             row: [20, 20, 40, 23],
 149             'column-reverse': [20, 20, 40, 23],
 150             'row-reverse': [20, 20, 40, 73],
 151         }
 152     },
 153     'vertical-rl': {
 154         rtl: {
 155             container: physicalContainerSize,
 156             flexbox: physicalFlexBoxPosition,
 157             column: [20, 20, 80, 73],
 158             row: [20, 20, 120, 73],
 159             'column-reverse': [20, 20, 48, 73],
 160             'row-reverse': [20, 20, 120, 23],
 161         },
 162         ltr : {
 163             container: physicalContainerSize,
 164             flexbox: physicalFlexBoxPosition,
 165             column: [20, 20, 80, 23],
 166             row: [20, 20, 120, 23],
 167             'column-reverse': [20, 20, 48, 23],
 168             'row-reverse': [20, 20, 120, 73],
 169         }
 170     }
 171 }
 172
 173 var logicalExpectations = {
 174     'horizontal-tb': {
 175         rtl: {
 176             container: [160, 140],
 177             flexbox: [20, 10],
 178             column: [20, 20, 22, 73],
 179             row: [20, 20, 22, 10],
 180             'column-reverse': [20, 20, 92, 10],
 181             'row-reverse': [20, 20, 22, 10],
 182         },
 183         ltr : {
 184             container: [160, 140],
 185             flexbox: [40, 10],
 186             column: [20, 20, 118, 73],
 187             row: [20, 20, 118, 10],
 188             'column-reverse': [20, 20, 48, 10],
 189             'row-reverse': [20, 20, 118, 10],
 190         }
 191     },
 192     'horizontal-bt': {
 193         rtl: {
 194             container: [160, 140],
 195             flexbox: [20, 30],
 196             column: [20, 20, 22, 47],
 197             row: [20, 20, 22, 110],
 198             'column-reverse': [20, 20, 92, 47],
 199             'row-reverse': [20, 20, 22, 110],
 200         },
 201         ltr : {
 202             container: [160, 140],
 203             flexbox: [40, 30],
 204             column: [20, 20, 118, 47],
 205             row: [20, 20, 118, 110],
 206             'column-reverse': [20, 20, 48, 47],
 207             'row-reverse': [20, 20, 118, 110],
 208         }
 209     },
 210     'vertical-lr': {
 211         rtl: {
 212             container: [140, 160],
 213             flexbox: [10, 20],
 214             column: [20, 20, 73, 22],
 215             row: [20, 20, 10, 22],
 216             'column-reverse': [20, 20, 23, 92],
 217             'row-reverse': [20, 20, 10, 22],
 218         },
 219         ltr : {
 220             container: [140, 160],
 221             flexbox: [10, 40],
 222             column: [20, 20, 73, 118],
 223             row: [20, 20, 10, 118],
 224             'column-reverse': [20, 20, 23, 48],
 225             'row-reverse': [20, 20, 10, 118],
 226         }
 227     },
 228     'vertical-rl': {
 229         rtl: {
 230             container: [140, 160],
 231             flexbox: [30, 20],
 232             column: [20, 20, 47, 22],
 233             row: [20, 20, 110, 22],
 234             'column-reverse': [20, 20, 47, 92],
 235             'row-reverse': [20, 20, 110, 22],
 236         },
 237         ltr : {
 238             container: [140, 160],
 239             flexbox: [30, 40],
 240             column: [20, 20, 47, 118],
 241             row: [20, 20, 110, 118],
 242             'column-reverse': [20, 20, 47, 48],
 243             'row-reverse': [20, 20, 110, 118],
 244         }
 245     }
 246 }
 247
 248 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
 249 var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];
 250 var directions = ['ltr', 'rtl'];
 251 var marginTypes = ['physical', 'logical'];
 252
 253 marginTypes.forEach(function(marginType) {
 254     writingModes.forEach(function(writingMode) {
 255         flexFlows.forEach(function(flexFlow) {
 256             directions.forEach(function(direction) {
 257                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
 258                 var title = document.createElement('div');
 259                 title.className = 'title';
 260                 title.innerHTML = flexboxClassName;
 261                 document.body.appendChild(title);
 262
 263                 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
 264                 expectations = expectations[writingMode][direction];
 265                 var flexboxExpectations = positionAsString(expectations.flexbox);
 266
 267                 var flexItemExpectations = asString(expectations[flexFlow]);
 268
 269                 var container = document.createElement('div');
 270                 container.className = 'container';
 271                 container.setAttribute('data-expected-width', expectations.container[0]);
 272                 container.setAttribute('data-expected-height', expectations.container[1]);
 273
 274                 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
 275                     '<div style="height: 20px; width: 20px;" ' + flexItemExpectations + '></div>\n' +
 276                 '</div>';
 277
 278                 document.body.appendChild(container);
 279             })
 280         })
 281     })
 282 })
 283 </script>
 284 </body>
 285 </html>