third_party/WebKit/LayoutTests/css3/flexbox/css-properties.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <div id="flexbox">
   8     <div id="flexitem"></div>
   9 </div>
  10 <script>
  11 description('Tests being able to set the display to flex and inline-flex.');
  12
  13 var flexbox = document.getElementById("flexbox");
  14
  15 flexbox.style.display = 'flex';
  16 shouldBeEqualToString('flexbox.style.display', 'flex');
  17
  18 flexbox.style.display = 'inline';
  19 shouldBeEqualToString('flexbox.style.display', 'inline');
  20
  21 flexbox.style.display = 'inline-flex';
  22 shouldBeEqualToString('flexbox.style.display', 'inline-flex');
  23
  24 flexbox.style.display = 'junk';
  25 shouldBeEqualToString('flexbox.style.display', 'inline-flex');
  26
  27 flexbox.style.display = 'block';
  28 shouldBeEqualToString('flexbox.style.display', 'block');
  29
  30 flexbox.style.display = 'flex';
  31
  32 var flexitem = document.getElementById("flexitem");
  33 shouldBeEqualToString('flexitem.style.order', '');
  34
  35 flexitem.style.order = 2;
  36 shouldBeEqualToString('flexitem.style.order', '2');
  37
  38 flexitem.style.order = -1;
  39 shouldBeEqualToString('flexitem.style.order', '-1');
  40
  41 flexitem.style.order = 0;
  42 shouldBeEqualToString('flexitem.style.order', '0');
  43
  44 // order must be an integer.
  45 flexitem.style.order = 1.5;
  46 shouldBeEqualToString('flexitem.style.order', '0');
  47
  48 flexitem.style.order = "test";
  49 shouldBeEqualToString('flexitem.style.order', '0');
  50
  51 flexitem.style.order = '';
  52 shouldBeEqualToString('flexitem.style.order', '');
  53
  54
  55 shouldBeEqualToString('flexbox.style.justifyContent', '');
  56 // The initial value is 'flex-start'.
  57 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-start');
  58
  59 flexbox.style.justifyContent = 'foo';
  60 shouldBeEqualToString('flexbox.style.justifyContent', '');
  61
  62 flexbox.style.justifyContent = 'flex-start';
  63 shouldBeEqualToString('flexbox.style.justifyContent', 'flex-start');
  64 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-start');
  65
  66 flexbox.style.justifyContent = 'flex-end';
  67 shouldBeEqualToString('flexbox.style.justifyContent', 'flex-end');
  68 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-end');
  69
  70 flexbox.style.justifyContent = 'center';
  71 shouldBeEqualToString('flexbox.style.justifyContent', 'center');
  72 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'center');
  73
  74 flexbox.style.justifyContent = 'space-between';
  75 shouldBeEqualToString('flexbox.style.justifyContent', 'space-between');
  76 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'space-between');
  77
  78 flexbox.style.justifyContent = '';
  79 shouldBeEqualToString('flexbox.style.justifyContent', '');
  80 shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-start');
  81
  82 shouldBeEqualToString('flexbox.style.alignSelf', '');
  83 // The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
  84 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start');
  85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'start');
  86
  87 flexbox.style.alignSelf = 'foo';
  88 shouldBeEqualToString('flexbox.style.alignSelf', '');
  89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start');
  90
  91 flexbox.style.alignSelf = 'auto';
  92 shouldBeEqualToString('flexbox.style.alignSelf', 'auto');
  93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start');
  94
  95 flexbox.style.alignSelf = 'flex-start';
  96 shouldBeEqualToString('flexbox.style.alignSelf', 'flex-start');
  97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex-start');
  98
  99 flexbox.style.alignSelf = 'flex-end';
 100 shouldBeEqualToString('flexbox.style.alignSelf', 'flex-end');
 101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex-end');
 102
 103 flexbox.style.alignSelf = 'center';
 104 shouldBeEqualToString('flexbox.style.alignSelf', 'center');
 105 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'center');
 106
 107 flexbox.style.alignSelf = 'stretch';
 108 shouldBeEqualToString('flexbox.style.alignSelf', 'stretch');
 109 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'stretch');
 110
 111 flexbox.style.alignSelf = 'baseline';
 112 shouldBeEqualToString('flexbox.style.alignSelf', 'baseline');
 113 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'baseline');
 114
 115 flexbox.style.alignSelf = '';
 116 shouldBeEqualToString('flexbox.style.alignSelf', '');
 117 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start');
 118
 119 shouldBeEqualToString('flexbox.style.alignItems', '');
 120 shouldBeEqualToString('flexitem.style.alignSelf', '');
 121 // The initial value is 'auto', which will be resolved to 'stretch' in case of flexbox containers.
 122 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
 123 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');
 124
 125 flexbox.style.alignItems = 'foo';
 126 shouldBeEqualToString('flexbox.style.alignItems', '');
 127 shouldBeEqualToString('flexitem.style.alignSelf', '');
 128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
 129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');
 130
 131 flexbox.style.alignItems = 'auto';
 132 shouldBeEqualToString('flexbox.style.alignItems', 'auto');
 133 shouldBeEqualToString('flexitem.style.alignSelf', '');
 134 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
 135 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');
 136
 137 flexbox.style.alignItems = 'flex-start';
 138 shouldBeEqualToString('flexbox.style.alignItems', 'flex-start');
 139 shouldBeEqualToString('flexitem.style.alignSelf', '');
 140 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-start');
 141 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-start');
 142
 143 flexbox.style.alignItems = 'flex-end';
 144 shouldBeEqualToString('flexbox.style.alignItems', 'flex-end');
 145 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-end');
 146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'flex-end');
 147
 148 flexbox.style.alignItems = 'center';
 149 shouldBeEqualToString('flexbox.style.alignItems', 'center');
 150 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'center');
 151 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'center');
 152
 153 flexbox.style.alignItems = 'stretch';
 154 shouldBeEqualToString('flexbox.style.alignItems', 'stretch');
 155 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
 156 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');
 157
 158 flexbox.style.alignItems = 'baseline';
 159 shouldBeEqualToString('flexbox.style.alignItems', 'baseline');
 160 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'baseline');
 161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'baseline');
 162
 163 flexbox.style.alignItems = '';
 164 shouldBeEqualToString('flexbox.style.alignItems', '');
 165 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
 166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stretch');
 167
 168 flexbox.style.display = 'none';
 169 shouldBeEqualToString('flexbox.style.alignItems', '');
 170 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'start');
 171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'start');
 172 flexbox.style.display = 'flex';
 173
 174
 175 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.
 176 var detachedFlexbox = document.createElement('div');
 177 var detachedFlexItem = document.createElement('div');
 178 detachedFlexbox.appendChild(detachedFlexItem);
 179 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).alignSelf', '');
 180 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).alignSelf', '');
 181
 182
 183 shouldBeEqualToString('flexbox.style.flexDirection', '');
 184 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row');
 185
 186 flexbox.style.flexDirection = 'foo';
 187 shouldBeEqualToString('flexbox.style.flexDirection', '');
 188
 189 flexbox.style.flexDirection = 'row';
 190 shouldBeEqualToString('flexbox.style.flexDirection', 'row');
 191 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row');
 192
 193 flexbox.style.flexDirection = 'row-reverse';
 194 shouldBeEqualToString('flexbox.style.flexDirection', 'row-reverse');
 195 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row-reverse');
 196
 197 flexbox.style.flexDirection = 'column';
 198 shouldBeEqualToString('flexbox.style.flexDirection', 'column');
 199 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'column');
 200
 201 flexbox.style.flexDirection = 'column-reverse';
 202 shouldBeEqualToString('flexbox.style.flexDirection', 'column-reverse');
 203 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'column-reverse');
 204
 205 shouldBeEqualToString('flexbox.style.flexWrap', '');
 206 // The initial value is 'nowrap'.
 207 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap');
 208
 209 flexbox.style.flexWrap = 'foo';
 210 shouldBeEqualToString('flexbox.style.flexWrap', '');
 211
 212 flexbox.style.flexWrap = 'nowrap';
 213 shouldBeEqualToString('flexbox.style.flexWrap', 'nowrap');
 214 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap');
 215
 216 flexbox.style.flexWrap = 'wrap';
 217 shouldBeEqualToString('flexbox.style.flexWrap', 'wrap');
 218 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap');
 219
 220 flexbox.style.flexWrap = 'wrap-reverse';
 221 shouldBeEqualToString('flexbox.style.flexWrap', 'wrap-reverse');
 222 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap-reverse');
 223
 224 flexbox.style.flexFlow = '';
 225 shouldBeEqualToString('flexbox.style.flexFlow', '');
 226 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row nowrap');
 227
 228 flexbox.style.flexFlow = 'foo';
 229 shouldBeEqualToString('flexbox.style.flexFlow', '');
 230
 231 function testFlexFlowValue(value, expected, expectedComputed)
 232 {
 233     flexbox.style.flexFlow = value;
 234     shouldBeEqualToString('flexbox.style.flexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
 235     shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', expectedComputed);
 236 }
 237
 238 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
 239 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
 240 directions.forEach(function(direction) {
 241     wraps.forEach(function(wrap) {
 242         var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
 243         var expected = direction + ' ' + wrap;
 244         testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
 245         testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
 246     });
 247 });
 248
 249 flexbox.style.flexFlow = '';
 250 shouldBeEqualToString('flexbox.style.flexFlow', '');
 251 flexbox.style.flexFlow = 'wrap wrap-reverse';
 252 shouldBeEqualToString('flexbox.style.flexFlow', '');
 253 flexbox.style.flexFlow = 'column row';
 254 shouldBeEqualToString('flexbox.style.flexFlow', '');
 255
 256 flexbox.style.flexFlow = '';
 257 shouldBeEqualToString('flexbox.style.flexFlow', '');
 258 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row nowrap');
 259 flexbox.style.flexDirection = 'column';
 260 flexbox.style.flexWrap = 'initial';
 261 shouldBeEqualToString('flexbox.style.flexFlow', 'column');
 262 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column nowrap');
 263 flexbox.style.flexWrap = 'wrap';
 264 shouldBeEqualToString('flexbox.style.flexFlow', 'column wrap');
 265 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column wrap');
 266 flexbox.style.flexFlow = 'row-reverse wrap-reverse';
 267 shouldBeEqualToString('flexbox.style.flexFlow', 'row-reverse wrap-reverse');
 268 shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row-reverse wrap-reverse');
 269
 270 // flex-flow is a shorthand, so it shouldn't show up as a computed property.
 271 var computedStyle = getComputedStyle(flexbox);
 272 var foundFlexFlow = false;
 273 for (var i = 0; i < computedStyle.length; ++i) {
 274     if (computedStyle[i] == 'flexFlow')
 275         foundFlexFlow = true;
 276 }
 277 shouldBeFalse('foundFlexFlow');
 278
 279 // The initial value is 'auto', which will be resolved to 'stretch' in case of flexbox containers.
 280 shouldBeEqualToString('flexbox.style.alignContent', '');
 281 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'stretch');
 282
 283 flexbox.style.alignContent = 'flex-start';
 284 shouldBeEqualToString('flexbox.style.alignContent', 'flex-start');
 285 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'flex-start');
 286
 287 flexbox.style.alignContent = 'flex-end';
 288 shouldBeEqualToString('flexbox.style.alignContent', 'flex-end');
 289 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'flex-end');
 290
 291 flexbox.style.alignContent = 'center';
 292 shouldBeEqualToString('flexbox.style.alignContent', 'center');
 293 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'center');
 294
 295 flexbox.style.alignContent = 'space-between';
 296 shouldBeEqualToString('flexbox.style.alignContent', 'space-between');
 297 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-between');
 298
 299 flexbox.style.alignContent = 'space-around';
 300 shouldBeEqualToString('flexbox.style.alignContent', 'space-around');
 301 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-around');
 302
 303 flexbox.style.alignContent = 'stretch';
 304 shouldBeEqualToString('flexbox.style.alignContent', 'stretch');
 305 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'stretch');
 306
 307 flexbox.style.alignContent = '';
 308 shouldBeEqualToString('flexbox.style.alignContent', '');
 309 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'stretch');
 310
 311 flexbox.style.alignContent = 'foo';
 312 shouldBeEqualToString('flexbox.style.alignContent', '');
 313 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'stretch');
 314 </script>
 315 </body>
 316 </html>