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