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: -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 .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>
  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, 70, 118, 23],
 104             row: [90, 20, 48, 23]
 105         },
 106         ltr : {
 107             container: physicalContainerSize,
 108             flexbox: physicalFlexBoxPosition,
 109             column: [20, 70, 48, 23],
 110             row: [90, 20, 48, 23]
 111         }
 112     },
 113     'horizontal-bt': {
 114         rtl: {
 115             container: physicalContainerSize,
 116             flexbox: physicalFlexBoxPosition,
 117             column: [20, 70, 118, 23],
 118             row: [90, 20, 48, 73]
 119         },
 120         ltr : {
 121             container: physicalContainerSize,
 122             flexbox: physicalFlexBoxPosition,
 123             column: [20, 70, 48, 23],
 124             row: [90, 20, 48, 73]
 125         }
 126     },
 127     'vertical-lr': {
 128         rtl: {
 129             container: physicalContainerSize,
 130             flexbox: physicalFlexBoxPosition,
 131             column: [90, 20, 48, 73],
 132             row: [20, 70, 48, 23]
 133         },
 134         ltr : {
 135             container: physicalContainerSize,
 136             flexbox: physicalFlexBoxPosition,
 137             column: [90, 20, 48, 23],
 138             row: [20, 70, 48, 23]
 139         }
 140     },
 141     'vertical-rl': {
 142         rtl: {
 143             container: physicalContainerSize,
 144             flexbox: physicalFlexBoxPosition,
 145             column: [90, 20, 48, 73],
 146             row: [20, 70, 118, 23]
 147         },
 148         ltr : {
 149             container: physicalContainerSize,
 150             flexbox: physicalFlexBoxPosition,
 151             column: [90, 20, 48, 23],
 152             row: [20, 70, 118, 23]
 153         }
 154     }
 155 }
 156
 157 var logicalExpectations = {
 158     'horizontal-tb': {
 159         rtl: {
 160             container: [160, 140],
 161             flexbox: [20, 10],
 162             column: [20, 70, 92, 23],
 163             row: [90, 20, 22, 23]
 164         },
 165         ltr : {
 166             container: [160, 140],
 167             flexbox: [40, 10],
 168             column: [20, 70, 48, 23],
 169             row: [90, 20, 48, 23]
 170         }
 171     },
 172     'horizontal-bt': {
 173         rtl: {
 174             container: [160, 140],
 175             flexbox: [20, 30],
 176             column: [20, 70, 92, 47],
 177             row: [90, 20, 22, 97]
 178         },
 179         ltr : {
 180             container: [160, 140],
 181             flexbox: [40, 30],
 182             column: [20, 70, 48, 47],
 183             row: [90, 20, 48, 97]
 184         }
 185     },
 186     'vertical-lr': {
 187         rtl: {
 188             container: [140, 160],
 189             flexbox: [10, 20],
 190             column: [70, 20, 23, 92],
 191             row: [20, 90, 23, 22]
 192         },
 193         ltr : {
 194             container: [140, 160],
 195             flexbox: [10, 40],
 196             column: [70, 20, 23, 48],
 197             row: [20, 90, 23, 48]
 198         }
 199     },
 200     'vertical-rl': {
 201         rtl: {
 202             container: [140, 160],
 203             flexbox: [30, 20],
 204             column: [70, 20, 47, 92],
 205             row: [20, 90, 97, 22]
 206         },
 207         ltr : {
 208             container: [140, 160],
 209             flexbox: [30, 40],
 210             column: [70, 20, 47, 48],
 211             row: [20, 90, 97, 48]
 212         }
 213     }
 214 }
 215
 216 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
 217 // FIXME: Test row-reverse and column-reverse.
 218 var flexFlows = ['row', 'column'];
 219 var directions = ['rtl', 'ltr'];
 220 var marginTypes = ['physical', 'logical'];
 221
 222 writingModes.forEach(function(writingMode) {
 223     flexFlows.forEach(function(flexFlow) {
 224         directions.forEach(function(direction) {
 225             marginTypes.forEach(function(marginType) {
 226                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType;
 227                 var title = document.createElement('div');
 228                 title.className = 'title';
 229                 title.innerHTML = flexboxClassName;
 230                 document.body.appendChild(title);
 231
 232                 var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations;
 233                 expectations = expectations[writingMode][direction];
 234                 var flexboxExpectations = positionAsString(expectations.flexbox);
 235
 236                 var flexItemExpectations = asString(expectations[flexFlow]);
 237
 238                 var container = document.createElement('div');
 239                 container.className = 'container';
 240                 container.setAttribute('data-expected-width', expectations.container[0]);
 241                 container.setAttribute('data-expected-height', expectations.container[1]);
 242
 243                 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" ' + flexboxExpectations + '>\n' +
 244                     '<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" ' + flexItemExpectations + '></div>\n' +
 245                 '</div>';
 246
 247                 document.body.appendChild(container);
 248             })
 249         })
 250     })
 251 })
 252 </script>
 253 </body>
 254 </html>