LayoutTests/css3/flexbox/flex-flow-padding.html

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