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