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