third_party/WebKit/LayoutTests/css3/flexbox/flex-property-parsing.html

   1 <!DOCTYPE html>
   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 setting the flex propery.');
  12
  13 var flexbox = document.getElementById("flexbox");
  14 var flexitem = document.getElementById("flexitem");
  15
  16 // Test default value.
  17 shouldBeEqualToString('flexitem.style.flex', '');
  18 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
  19
  20 // Should not inherit.
  21 flexbox.style.flex = '1 2 3px';
  22 shouldBeEqualToString('flexitem.style.flex', '');
  23 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
  24
  25 // Invalid value.
  26 flexitem.style.flex = 'junk';
  27 shouldBeEqualToString('flexitem.style.flex', '');
  28 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
  29
  30 flexitem.style.flex = '2';
  31 shouldBeEqualToString('flexitem.style.flex', '2 1 0%');
  32 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 0%');
  33
  34 flexitem.style.flex = '0';
  35 shouldBeEqualToString('flexitem.style.flex', '0 1 0%');
  36 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0%');
  37
  38 flexitem.style.flex = '1.5';
  39 shouldBeEqualToString('flexitem.style.flex', '1.5 1 0%');
  40 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.5 1 0%');
  41
  42 flexitem.style.flex = 'auto';
  43 shouldBeEqualToString('flexitem.style.flex', '1 1 auto');
  44 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 auto');
  45
  46 flexitem.style.flex = '1px';
  47 shouldBeEqualToString('flexitem.style.flex', '1 1 1px');
  48 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 1px');
  49
  50 flexitem.style.flex = '2em';
  51 shouldBeEqualToString('flexitem.style.flex', '1 1 2em');
  52 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 32px');
  53
  54 flexitem.style.flex = '0px';
  55 shouldBeEqualToString('flexitem.style.flex', '1 1 0px');
  56 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 0px');
  57
  58 flexitem.style.flex = 'none';
  59 flexitem.style.flex = '-2'; // Invalid, return previous value.
  60 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
  61 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
  62
  63 flexitem.style.flex = '0 0';
  64 shouldBeEqualToString('flexitem.style.flex', '0 0 0%');
  65 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 0%');
  66
  67 flexitem.style.flex = '0 1';
  68 shouldBeEqualToString('flexitem.style.flex', '0 1 0%');
  69 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0%');
  70
  71 flexitem.style.flex = '1 0';
  72 shouldBeEqualToString('flexitem.style.flex', '1 0 0%');
  73 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 0 0%');
  74
  75 flexitem.style.flex = '2 auto';
  76 shouldBeEqualToString('flexitem.style.flex', '2 1 auto');
  77 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 auto');
  78
  79 flexitem.style.flex = '3 4px';
  80 shouldBeEqualToString('flexitem.style.flex', '3 1 4px');
  81 shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 4px');
  82
  83 flexitem.style.flex = 'auto 5.25';
  84 shouldBeEqualToString('flexitem.style.flex', '5.25 1 auto');
  85 shouldBeEqualToString('getComputedStyle(flexitem).flex', '5.25 1 auto');
  86
  87 flexitem.style.flex = '6em 4';
  88 shouldBeEqualToString('flexitem.style.flex', '4 1 6em');
  89 shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 1 96px');
  90
  91 flexitem.style.flex = '4 0px';
  92 shouldBeEqualToString('flexitem.style.flex', '4 1 0px');
  93 shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 1 0px');
  94
  95 flexitem.style.flex = '0 0px';
  96 shouldBeEqualToString('flexitem.style.flex', '0 1 0px');
  97 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');
  98
  99 flexitem.style.flex = 'none';
 100 flexitem.style.flex = '-1 5'; // Invalid, return previous value.
 101 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 102 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 103
 104 flexitem.style.flex = '1 -1'; // Invalid, return previous value.
 105 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 106 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 107
 108 flexitem.style.flex = '-1 -1'; // Invalid, return previous value.
 109 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 110 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 111
 112 flexitem.style.flex = 'auto 2em'; // Invalid, return previous value.
 113 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 114 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 115
 116 flexitem.style.flex = '2px 4px'; // Invalid, return previous value.
 117 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 118 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 119
 120 flexitem.style.flex = '0px 0px'; // Invalid, return previous value.
 121 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 122 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 123
 124 flexitem.style.flex = '1 2 0';
 125 shouldBeEqualToString('flexitem.style.flex', '1 2 0px');
 126 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 0px');
 127
 128 flexitem.style.flex = '0 0 0';
 129 shouldBeEqualToString('flexitem.style.flex', '0 0 0px');
 130 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 0px');
 131
 132 flexitem.style.flex = '1 2 auto';
 133 shouldBeEqualToString('flexitem.style.flex', '1 2 auto');
 134 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 auto');
 135
 136 flexitem.style.flex = '1.75 2 3px';
 137 shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px');
 138 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px');
 139
 140 flexitem.style.flex = '1 3px 2'; // Invalid, return previous value.
 141 shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px');
 142 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px');
 143
 144 flexitem.style.flex = '1 auto 1'; // Invalid, return previous value.
 145 shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px');
 146 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px');
 147
 148 flexitem.style.flex = '3px 1 2';
 149 shouldBeEqualToString('flexitem.style.flex', '1 2 3px');
 150 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 3px');
 151
 152 flexitem.style.flex = 'auto 0 0';
 153 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 154 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 155
 156 flexitem.style.flex = 'auto 0';
 157 shouldBeEqualToString('flexitem.style.flex', '0 1 auto');
 158 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
 159
 160 flexitem.style.flex = 'auto 3';
 161 shouldBeEqualToString('flexitem.style.flex', '3 1 auto');
 162 shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 auto');
 163
 164 flexitem.style.flex = '0px 0';
 165 shouldBeEqualToString('flexitem.style.flex', '0 1 0px');
 166 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');
 167
 168 flexitem.style.flex = '0 0px 0'; // Invalid, return previous value.
 169 shouldBeEqualToString('flexitem.style.flex', '0 1 0px');
 170 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');
 171
 172 flexitem.style.flex = 'none';
 173 flexitem.style.flex = '1 2 3'; // Invalid, return previous value.
 174 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 175 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 176
 177 flexitem.style.flex = '0 2 3'; // Invalid, return previous value.
 178 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 179 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 180
 181 flexitem.style.flex = '1 0 3'; // Invalid, return previous value.
 182 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 183 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 184
 185 flexitem.style.flex = '0 0 1';  // Invalid, return previous value.
 186 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 187 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 188
 189 flexitem.style.flex = '1 -2 3px';  // Invalid, return previous value.
 190 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 191 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 192
 193 flexitem.style.flex = '1 2px 3px';  // Invalid, return previous value.
 194 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 195 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 196
 197 flexitem.style.flex = '1 2px auto';  // Invalid, return previous value.
 198 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 199 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 200
 201 flexitem.style.flex = '0px 0px 0';  // Invalid, return previous value.
 202 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 203 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 204
 205 flexitem.style.flex = '0 0 0 0';  // Invalid, return previous value.
 206 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 207 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 208
 209 flexitem.style.flex = '0 0 0px 0';  // Invalid, return previous value.
 210 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 211 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 212
 213 flexitem.style.flex = '0 0 0px 0px';  // Invalid, return previous value.
 214 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 215 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 216
 217 flexitem.style.flex = '0 0 0px 0';  // Invalid, return previous value.
 218 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 219 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 220
 221 flexitem.style.flex = '1, 2, 3px';  // Invalid, return previous value.
 222 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 223 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 224
 225 flexitem.style.flex = '1,';  // Invalid, return previous value.
 226 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 227 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 228
 229 flexitem.style.flex = 'initial';
 230 shouldBeEqualToString('flexitem.style.flex', 'initial');
 231 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
 232
 233 flexitem.style.flex = 'none';
 234 // FIXME: This test case is failing. https://bugs.webkit.org/show_bug.cgi?id=90020
 235 shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
 236 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
 237 </script>
 238 </body>
 239 </html>