third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content-horizontal-column.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     position: relative;
   6     display: flex;
   7     background-color: grey;
   8     width: 600px;
   9     height: 20px;
  10 }
  11 .title {
  12     margin-top: 1em;
  13 }
  14 .ltr {
  15     direction: ltr;
  16 }
  17 .rtl {
  18     direction: rtl;
  19 }
  20 .horizontal-tb {
  21     -webkit-writing-mode: horizontal-tb;
  22 }
  23 .horizontal-bt {
  24     -webkit-writing-mode: horizontal-bt;
  25 }
  26 .column {
  27     flex-flow: column;
  28 }
  29 .column-reverse {
  30     flex-flow: column-reverse;
  31 }
  32 .wrap {
  33     flex-wrap: wrap;
  34 }
  35 .wrap-reverse {
  36     flex-wrap: wrap-reverse;
  37 }
  38 .align-content-flex-start {
  39     align-content: flex-start;
  40 }
  41 .align-content-flex-end {
  42     align-content: flex-end;
  43 }
  44 .align-content-center {
  45     align-content: center;
  46 }
  47 .align-content-space-between {
  48     align-content: space-between;
  49 }
  50 .align-content-space-around {
  51     align-content: space-around;
  52 }
  53 .align-content-stretch {
  54     align-content: stretch;
  55 }
  56 .flexbox > :nth-child(1) {
  57     background-color: blue;
  58 }
  59 .flexbox > :nth-child(2) {
  60     background-color: green;
  61 }
  62 </style>
  63 <script src="../../resources/check-layout.js"></script>
  64 <body onload="checkLayout('.flexbox')">
  65
  66 <script>
  67 var expectations = {
  68     'horizontal-tb': {
  69         'column': {
  70             'ltr': {
  71                 'wrap': {
  72                     'flex-start': [0, 100],
  73                     'flex-end': [400, 500],
  74                     'center': [200, 300],
  75                     'space-between': [0, 500],
  76                     'space-around': [100, 400],
  77                     'stretch': [0, 300],
  78                 },
  79                 'wrap-reverse': {
  80                     'flex-start': [500, 400],
  81                     'flex-end': [100, 0],
  82                     'center': [300, 200],
  83                     'space-between': [500, 0],
  84                     'space-around': [400, 100],
  85                     'stretch': [300, 0],
  86                 },
  87             },
  88             'rtl': {
  89                 'wrap': {
  90                     'flex-start': [500, 400],
  91                     'flex-end': [100, 0],
  92                     'center': [300, 200],
  93                     'space-between': [500, 0],
  94                     'space-around': [400, 100],
  95                     'stretch': [300, 0],
  96                 },
  97                 'wrap-reverse': {
  98                     'flex-start': [0, 100],
  99                     'flex-end': [400, 500],
 100                     'center': [200, 300],
 101                     'space-between': [0, 500],
 102                     'space-around': [100, 400],
 103                     'stretch': [0, 300],
 104                 },
 105             },
 106         },
 107         // Same as column.
 108         'column-reverse': {
 109             'ltr': {
 110                 'wrap': {
 111                     'flex-start': [0, 100],
 112                     'flex-end': [400, 500],
 113                     'center': [200, 300],
 114                     'space-between': [0, 500],
 115                     'space-around': [100, 400],
 116                     'stretch': [0, 300],
 117                 },
 118                 'wrap-reverse': {
 119                     'flex-start': [500, 400],
 120                     'flex-end': [100, 0],
 121                     'center': [300, 200],
 122                     'space-between': [500, 0],
 123                     'space-around': [400, 100],
 124                     'stretch': [300, 0],
 125                 },
 126             },
 127             'rtl': {
 128                 'wrap': {
 129                     'flex-start': [500, 400],
 130                     'flex-end': [100, 0],
 131                     'center': [300, 200],
 132                     'space-between': [500, 0],
 133                     'space-around': [400, 100],
 134                     'stretch': [300, 0],
 135                 },
 136                 'wrap-reverse': {
 137                     'flex-start': [0, 100],
 138                     'flex-end': [400, 500],
 139                     'center': [200, 300],
 140                     'space-between': [0, 500],
 141                     'space-around': [100, 400],
 142                     'stretch': [0, 300],
 143                 },
 144             },
 145         },
 146     },
 147     'horizontal-bt': {
 148         // Same as horizontal-tb.
 149         'column': {
 150             'ltr': {
 151                 'wrap': {
 152                     'flex-start': [0, 100],
 153                     'flex-end': [400, 500],
 154                     'center': [200, 300],
 155                     'space-between': [0, 500],
 156                     'space-around': [100, 400],
 157                     'stretch': [0, 300],
 158                 },
 159                 'wrap-reverse': {
 160                     'flex-start': [500, 400],
 161                     'flex-end': [100, 0],
 162                     'center': [300, 200],
 163                     'space-between': [500, 0],
 164                     'space-around': [400, 100],
 165                     'stretch': [300, 0],
 166                 },
 167             },
 168             'rtl': {
 169                 'wrap': {
 170                     'flex-start': [500, 400],
 171                     'flex-end': [100, 0],
 172                     'center': [300, 200],
 173                     'space-between': [500, 0],
 174                     'space-around': [400, 100],
 175                     'stretch': [300, 0],
 176                 },
 177                 'wrap-reverse': {
 178                     'flex-start': [0, 100],
 179                     'flex-end': [400, 500],
 180                     'center': [200, 300],
 181                     'space-between': [0, 500],
 182                     'space-around': [100, 400],
 183                     'stretch': [0, 300],
 184                 },
 185             },
 186         },
 187         'column-reverse': {
 188             'ltr': {
 189                 'wrap': {
 190                     'flex-start': [0, 100],
 191                     'flex-end': [400, 500],
 192                     'center': [200, 300],
 193                     'space-between': [0, 500],
 194                     'space-around': [100, 400],
 195                     'stretch': [0, 300],
 196                 },
 197                 'wrap-reverse': {
 198                     'flex-start': [500, 400],
 199                     'flex-end': [100, 0],
 200                     'center': [300, 200],
 201                     'space-between': [500, 0],
 202                     'space-around': [400, 100],
 203                     'stretch': [300, 0],
 204                 },
 205             },
 206             'rtl': {
 207                 'wrap': {
 208                     'flex-start': [500, 400],
 209                     'flex-end': [100, 0],
 210                     'center': [300, 200],
 211                     'space-between': [500, 0],
 212                     'space-around': [400, 100],
 213                     'stretch': [300, 0],
 214                 },
 215                 'wrap-reverse': {
 216                     'flex-start': [0, 100],
 217                     'flex-end': [400, 500],
 218                     'center': [200, 300],
 219                     'space-between': [0, 500],
 220                     'space-around': [100, 400],
 221                     'stretch': [0, 300],
 222                 },
 223             },
 224         },
 225     },
 226 };
 227
 228 function mainAxisDirection(writingMode, flexDirection)
 229 {
 230     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
 231         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
 232         return 'width';
 233     return 'height';
 234 }
 235
 236 function addChild(flexbox, preferredSize, alignContent, expected_x_offset)
 237 {
 238     var child = document.createElement('div');
 239     child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;'
 240         + 'min-width: 100px');
 241
 242     child.setAttribute("data-expected-width", alignContent == "stretch" ? "300" : "100");
 243     child.setAttribute("data-expected-height", "20");
 244     child.setAttribute("data-offset-y", "0");
 245     child.setAttribute("data-offset-x", expected_x_offset);
 246
 247     flexbox.appendChild(child);
 248 }
 249
 250 var writingModes = ['horizontal-tb', 'horizontal-bt'];
 251 var flexDirections = ['column', 'column-reverse'];
 252 var directions = ['ltr', 'rtl'];
 253 var wraps = ['wrap', 'wrap-reverse'];
 254 var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'];
 255
 256 writingModes.forEach(function(writingMode) {
 257     flexDirections.forEach(function(flexDirection) {
 258         directions.forEach(function(direction) {
 259             wraps.forEach(function(wrap) {
 260                 alignContents.forEach(function(alignContent) {
 261                     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap + ' align-content-' + alignContent;
 262                     var title = document.createElement('div');
 263                     title.className = 'title';
 264                     title.innerHTML = flexboxClassName;
 265                     document.body.appendChild(title);
 266
 267                     var mainAxis = 'height';
 268                     var crossAxis = 'width';
 269
 270                     var flexbox = document.createElement('div');
 271                     flexbox.className = 'flexbox ' + flexboxClassName;
 272                     flexbox.setAttribute("data-expected-width", "600");
 273                     flexbox.setAttribute("data-expected-height", "20");
 274
 275                     var testExpectations = expectations[writingMode][flexDirection][direction][wrap][alignContent];
 276                     addChild(flexbox, 20, alignContent, testExpectations[0]);
 277                     addChild(flexbox, 5, alignContent, testExpectations[1]);
 278
 279                     document.body.appendChild(flexbox);
 280                 })
 281             })
 282         })
 283     })
 284 })
 285 </script>
 286 </body>
 287 </html>