third_party/WebKit/LayoutTests/css3/flexbox/flex-flow-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 .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     flex-flow: row;
  39 }
  40 .row-reverse {
  41     flex-flow: row-reverse;
  42 }
  43 .column {
  44     flex-flow: column;
  45 }
  46 .column-reverse {
  47     flex-flow: column-reverse;
  48 }
  49 .physical {
  50     margin: 10px 20px 30px 40px;
  51 }
  52 .physical > div {
  53     margin: 13px 2px 17px 8px;
  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: 13px;
  63     -webkit-margin-after: 17px;
  64     -webkit-margin-start: 8px;
  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 src="../../resources/check-layout.js"></script>
  78 <body onload="checkLayout('.flexbox')">
  79
  80 <script>
  81 function positionAsString(position)
  82 {
  83     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
  84 }
  85
  86 function asString(expectations)
  87 {
  88     return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4));
  89 }
  90
  91 var physicalContainerSize = [160, 140];
  92 var physicalFlexBoxPosition = [40, 10];
  93
  94 var physicalExpectations = {
  95     'horizontal-tb': {
  96         rtl: {
  97             container: physicalContainerSize,
  98             flexbox: physicalFlexBoxPosition,
  99             column: [20, 70, 118, 23],
 100             row: [90, 20, 48, 23]
 101         },
 102         ltr : {
 103             container: physicalContainerSize,
 104             flexbox: physicalFlexBoxPosition,
 105             column: [20, 70, 48, 23],
 106             row: [90, 20, 48, 23]
 107         }
 108     },
 109     'horizontal-bt': {
 110         rtl: {
 111             container: physicalContainerSize,
 112             flexbox: physicalFlexBoxPosition,
 113             column: [20, 70, 118, 23],
 114             row: [90, 20, 48, 73]
 115         },
 116         ltr : {
 117             container: physicalContainerSize,
 118             flexbox: physicalFlexBoxPosition,
 119             column: [20, 70, 48, 23],
 120             row: [90, 20, 48, 73]
 121         }
 122     },
 123     'vertical-lr': {
 124         rtl: {
 125             container: physicalContainerSize,
 126             flexbox: physicalFlexBoxPosition,
 127             column: [90, 20, 48, 73],
 128             row: [20, 70, 48, 23]
 129         },
 130         ltr : {
 131             container: physicalContainerSize,
 132             flexbox: physicalFlexBoxPosition,
 133             column: [90, 20, 48, 23],
 134             row: [20, 70, 48, 23]
 135         }
 136     },
 137     'vertical-rl': {
 138         rtl: {
 139             container: physicalContainerSize,
 140             flexbox: physicalFlexBoxPosition,
 141             column: [90, 20, 48, 73],
 142             row: [20, 70, 118, 23]
 143         },
 144         ltr : {
 145             container: physicalContainerSize,
 146             flexbox: physicalFlexBoxPosition,
 147             column: [90, 20, 48, 23],
 148             row: [20, 70, 118, 23]
 149         }
 150     }
 151 }
 152
 153 var logicalExpectations = {
 154     'horizontal-tb': {
 155         rtl: {
 156             container: [160, 140],
 157             flexbox: [20, 10],
 158             column: [20, 70, 92, 23],
 159             row: [90, 20, 22, 23]
 160         },
 161         ltr : {
 162             container: [160, 140],
 163             flexbox: [40, 10],
 164             column: [20, 70, 48, 23],
 165             row: [90, 20, 48, 23]
 166         }
 167     },
 168     'horizontal-bt': {
 169         rtl: {
 170             container: [160, 140],
 171             flexbox: [20, 30],
 172             column: [20, 70, 92, 47],
 173             row: [90, 20, 22, 97]
 174         },
 175         ltr : {
 176             container: [160, 140],
 177             flexbox: [40, 30],
 178             column: [20, 70, 48, 47],
 179             row: [90, 20, 48, 97]
 180         }
 181     },
 182     'vertical-lr': {
 183         rtl: {
 184             container: [140, 160],
 185             flexbox: [10, 20],
 186             column: [70, 20, 23, 92],
 187             row: [20, 90, 23, 22]
 188         },
 189         ltr : {
 190             container: [140, 160],
 191             flexbox: [10, 40],
 192             column: [70, 20, 23, 48],
 193             row: [20, 90, 23, 48]
 194         }
 195     },
 196     'vertical-rl': {
 197         rtl: {
 198             container: [140, 160],
 199             flexbox: [30, 20],
 200             column: [70, 20, 47, 92],
 201             row: [20, 90, 97, 22]
 202         },
 203         ltr : {
 204             container: [140, 160],
 205             flexbox: [30, 40],
 206             column: [70, 20, 47, 48],
 207             row: [20, 90, 97, 48]
 208         }
 209     }
 210 }
 211
 212 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
 213 var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];
 214 var directions = ['rtl', 'ltr'];
 215 var marginTypes = ['physical', 'logical'];
 216
 217 writingModes.forEach(function(writingMode) {
 218     flexFlows.forEach(function(flexFlow) {
 219         directions.forEach(function(direction) {
 220             marginTypes.forEach(function(marginType) {
 221                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
 222                 var title = document.createElement('div');
 223                 title.className = 'title';
 224                 title.innerHTML = flexboxClassName;
 225                 document.body.appendChild(title);
 226
 227                 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
 228                 expectations = expectations[writingMode][direction];
 229                 var flexboxExpectations = positionAsString(expectations.flexbox);
 230
 231                 var flexItemExpectations = asString(expectations[flexFlow.replace("-reverse", "")]);
 232
 233                 var container = document.createElement('div');
 234                 container.className = 'container';
 235                 container.setAttribute('data-expected-width', expectations.container[0]);
 236                 container.setAttribute('data-expected-height', expectations.container[1]);
 237
 238                 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
 239                     '<div style="flex: 1 auto; height: 20px; width: 20px;" ' + flexItemExpectations + '></div>\n' +
 240                 '</div>';
 241
 242                 document.body.appendChild(container);
 243             })
 244         })
 245     })
 246 })
 247 </script>
 248 </body>
 249 </html>