LayoutTests/css3/flexbox/script-tests/css-properties.js

   1 description('Tests being able to set the display to -webkit-flexbox and -webkit-inline-flexbox.');
   2
   3 var flexbox = document.getElementById("flexbox");
   4
   5 flexbox.style.display = '-webkit-flexbox';
   6 shouldBeEqualToString('flexbox.style.display', '-webkit-flexbox');
   7
   8 flexbox.style.display = 'inline';
   9 shouldBeEqualToString('flexbox.style.display', 'inline');
  10
  11 flexbox.style.display = '-webkit-inline-flexbox';
  12 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flexbox');
  13
  14 flexbox.style.display = 'junk';
  15 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flexbox');
  16
  17 flexbox.style.display = 'block';
  18 shouldBeEqualToString('flexbox.style.display', 'block');
  19
  20
  21 var flexitem = document.getElementById("flexitem");
  22 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '');
  23
  24 flexitem.style.webkitFlexOrder = 2;
  25 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '2');
  26
  27 flexitem.style.webkitFlexOrder = -1;
  28 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '-1');
  29
  30 flexitem.style.webkitFlexOrder = 0;
  31 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '0');
  32
  33 // -webkit-flex-order must be an integer.
  34 flexitem.style.webkitFlexOrder = 1.5;
  35 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '0');
  36
  37 flexitem.style.webkitFlexOrder = "test";
  38 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '0');
  39
  40 flexitem.style.webkitFlexOrder = '';
  41 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '');
  42
  43
  44 shouldBeEqualToString('flexbox.style.webkitFlexPack', '');
  45 // The initial value is 'start'.
  46 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'start');
  47
  48 flexbox.style.webkitFlexPack = 'foo';
  49 shouldBeEqualToString('flexbox.style.webkitFlexPack', '');
  50
  51 flexbox.style.webkitFlexPack = 'start';
  52 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'start');
  53 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'start');
  54
  55 flexbox.style.webkitFlexPack = 'end';
  56 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'end');
  57 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'end');
  58
  59 flexbox.style.webkitFlexPack = 'center';
  60 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'center');
  61 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'center');
  62
  63 flexbox.style.webkitFlexPack = 'justify';
  64 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'justify');
  65 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'justify');
  66
  67 flexbox.style.webkitFlexPack = '';
  68 shouldBeEqualToString('flexbox.style.webkitFlexPack', '');
  69 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'start');
  70
  71
  72 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
  73 // The initial value is 'stretch'.
  74 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
  75
  76 flexbox.style.webkitFlexItemAlign = 'foo';
  77 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
  78
  79 flexbox.style.webkitFlexItemAlign = 'start';
  80 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'start');
  81 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'start');
  82
  83 flexbox.style.webkitFlexItemAlign = 'end';
  84 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'end');
  85 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'end');
  86
  87 flexbox.style.webkitFlexItemAlign = 'center';
  88 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'center');
  89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'center');
  90
  91 flexbox.style.webkitFlexItemAlign = 'stretch';
  92 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'stretch');
  93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
  94
  95 flexbox.style.webkitFlexItemAlign = 'baseline';
  96 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'baseline');
  97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'baseline');
  98
  99 flexbox.style.webkitFlexItemAlign = '';
 100 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
 101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
 102
 103 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
 104 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
 105
 106 flexbox.style.webkitFlexDirection = 'foo';
 107 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
 108
 109 flexbox.style.webkitFlexDirection = 'row';
 110 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');
 111 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
 112
 113 flexbox.style.webkitFlexDirection = 'row-reverse';
 114 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');
 115 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');
 116
 117 flexbox.style.webkitFlexDirection = 'column';
 118 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');
 119 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');
 120
 121 flexbox.style.webkitFlexDirection = 'column-reverse';
 122 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');
 123 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');
 124
 125 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
 126 // The initial value is 'stretch'.
 127 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
 128
 129 flexbox.style.webkitFlexWrap = 'foo';
 130 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
 131
 132 flexbox.style.webkitFlexWrap = 'nowrap';
 133 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap');
 134 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
 135
 136 flexbox.style.webkitFlexWrap = 'wrap';
 137 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');
 138 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');
 139
 140 flexbox.style.webkitFlexWrap = 'wrap-reverse';
 141 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');
 142 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');
 143
 144 flexbox.style.webkitFlexFlow = '';
 145 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
 146 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
 147
 148 flexbox.style.webkitFlexFlow = 'foo';
 149 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
 150
 151 function testFlexFlowValue(value, expected, expectedComputed)
 152 {
 153     flexbox.style.webkitFlexFlow = value;
 154     shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
 155     shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);
 156 }
 157
 158 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
 159 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
 160 directions.forEach(function(direction) {
 161     wraps.forEach(function(wrap) {
 162         var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
 163         var expected = direction + ' ' + wrap;
 164         testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
 165         testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
 166     });
 167 });
 168
 169 flexbox.style.webkitFlexFlow = '';
 170 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
 171 flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';
 172 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
 173 flexbox.style.webkitFlexFlow = 'column row';
 174 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
 175
 176 flexbox.style.webkitFlexFlow = '';
 177 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
 178 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
 179 flexbox.style.webkitFlexDirection = 'column';
 180 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
 181 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column nowrap');
 182 flexbox.style.webkitFlexWrap = 'wrap';
 183 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');
 184 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');
 185 flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';
 186 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');
 187 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');
 188
 189
 190 successfullyParsed = true;