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