OLD | NEW |
(Empty) | |
| 1 description("Test that -webkit-filter matches filter."); |
| 2 |
| 3 var styleElement = document.createElement("style"); |
| 4 document.head.appendChild(styleElement); |
| 5 var styleSheet = styleElement.sheet; |
| 6 |
| 7 function testComputedFilterRule(description, rule, expected) |
| 8 { |
| 9 styleSheet.insertRule("body { -webkit-filter: " + rule + "; }", 0); |
| 10 debug(description + " : -webkit-filter: " + rule); |
| 11 |
| 12 var style = window.getComputedStyle(document.body).getPropertyValue('filter'
); |
| 13 var value = "computed filter style: " + style; |
| 14 |
| 15 if (style != expected) { |
| 16 testFailed(value + " should have style: " + expected); |
| 17 } else { |
| 18 testPassed(value); |
| 19 } |
| 20 |
| 21 styleSheet.deleteRule(0); |
| 22 debug(""); |
| 23 } |
| 24 |
| 25 testComputedFilterRule("Basic reference", |
| 26 "url('#a')", |
| 27 'url("#a")'); |
| 28 |
| 29 testComputedFilterRule("Bare unquoted reference converting to quoted form", |
| 30 "url(#a)", |
| 31 'url("#a")'); |
| 32 |
| 33 testComputedFilterRule("Multiple references", |
| 34 "url('#a') url('#b')", |
| 35 'url("#a") url("#b")'); |
| 36 |
| 37 testComputedFilterRule("Reference as 2nd value", |
| 38 "grayscale(1) url('#a')", |
| 39 'grayscale(1) url("#a")'); |
| 40 |
| 41 testComputedFilterRule("Float value converts to integer", |
| 42 "grayscale(1.0)", |
| 43 "grayscale(1)"); |
| 44 |
| 45 testComputedFilterRule("Zero value", |
| 46 "grayscale(0)", |
| 47 "grayscale(0)"); |
| 48 |
| 49 testComputedFilterRule("No values", |
| 50 "grayscale()", |
| 51 "grayscale(1)"); |
| 52 |
| 53 testComputedFilterRule("Multiple values", |
| 54 "grayscale(0.5) grayscale(0.25)", |
| 55 "grayscale(0.5) grayscale(0.25)"); |
| 56 |
| 57 testComputedFilterRule("Integer value", |
| 58 "sepia(1)", |
| 59 "sepia(1)"); |
| 60 |
| 61 testComputedFilterRule("Float value converts to integer", |
| 62 "sepia(1.0)", |
| 63 "sepia(1)"); |
| 64 |
| 65 testComputedFilterRule("Zero value", |
| 66 "sepia(0)", |
| 67 "sepia(0)"); |
| 68 |
| 69 testComputedFilterRule("No values", |
| 70 "sepia()", |
| 71 "sepia(1)"); |
| 72 |
| 73 testComputedFilterRule("Multiple values", |
| 74 "sepia(0.5) sepia(0.25)", |
| 75 "sepia(0.5) sepia(0.25)"); |
| 76 |
| 77 testComputedFilterRule("Rule combinations", |
| 78 "sepia(0.5) grayscale(0.25)", |
| 79 "sepia(0.5) grayscale(0.25)"); |
| 80 |
| 81 testComputedFilterRule("Integer value", |
| 82 "saturate(1)", |
| 83 "saturate(1)"); |
| 84 |
| 85 testComputedFilterRule("Float value converts to integer", |
| 86 "saturate(1.0)", |
| 87 "saturate(1)"); |
| 88 |
| 89 testComputedFilterRule("Zero value", |
| 90 "saturate(0)", |
| 91 "saturate(0)"); |
| 92 |
| 93 testComputedFilterRule("No values", |
| 94 "saturate()", |
| 95 "saturate(1)"); |
| 96 |
| 97 testComputedFilterRule("Multiple values", |
| 98 "saturate(0.5) saturate(0.25)", |
| 99 "saturate(0.5) saturate(0.25)"); |
| 100 |
| 101 testComputedFilterRule("Rule combinations", |
| 102 "saturate(0.5) grayscale(0.25)", |
| 103 "saturate(0.5) grayscale(0.25)"); |
| 104 |
| 105 testComputedFilterRule("Degrees value as integer", |
| 106 "hue-rotate(10deg)", |
| 107 "hue-rotate(10deg)"); |
| 108 |
| 109 testComputedFilterRule("Degrees float value converts to integer", |
| 110 "hue-rotate(10.0deg)", |
| 111 "hue-rotate(10deg)"); |
| 112 |
| 113 testComputedFilterRule("Radians value", |
| 114 "hue-rotate(10rad)", |
| 115 "hue-rotate(572.958deg)"); |
| 116 |
| 117 testComputedFilterRule("Gradians value", |
| 118 "hue-rotate(10grad)", |
| 119 "hue-rotate(9deg)"); |
| 120 |
| 121 testComputedFilterRule("Turns value", |
| 122 "hue-rotate(0.5turn)", |
| 123 "hue-rotate(180deg)"); |
| 124 |
| 125 testComputedFilterRule("Zero value", |
| 126 "hue-rotate(0)", |
| 127 "hue-rotate(0deg)"); |
| 128 |
| 129 testComputedFilterRule("No values", |
| 130 "hue-rotate()", |
| 131 "hue-rotate(0deg)"); |
| 132 |
| 133 testComputedFilterRule("Rule combinations", |
| 134 "hue-rotate(10deg) grayscale(0.25)", |
| 135 "hue-rotate(10deg) grayscale(0.25)"); |
| 136 |
| 137 testComputedFilterRule("Integer value", |
| 138 "invert(1)", |
| 139 "invert(1)"); |
| 140 |
| 141 testComputedFilterRule("Float value converts to integer", |
| 142 "invert(1.0)", |
| 143 "invert(1)"); |
| 144 |
| 145 testComputedFilterRule("Zero value", |
| 146 "invert(0)", |
| 147 "invert(0)"); |
| 148 |
| 149 testComputedFilterRule("No values", |
| 150 "invert()", |
| 151 "invert(1)"); |
| 152 |
| 153 testComputedFilterRule("Multiple values", |
| 154 "invert(0.5) invert(0.25)", |
| 155 "invert(0.5) invert(0.25)"); |
| 156 |
| 157 testComputedFilterRule("Rule combinations", |
| 158 "invert(0.5) grayscale(0.25)", |
| 159 "invert(0.5) grayscale(0.25)"); |
| 160 |
| 161 testComputedFilterRule("Integer value", |
| 162 "opacity(1)", |
| 163 "opacity(1)"); |
| 164 |
| 165 testComputedFilterRule("Float value converts to integer", |
| 166 "opacity(1.0)", |
| 167 "opacity(1)"); |
| 168 |
| 169 testComputedFilterRule("Zero value", |
| 170 "opacity(0)", |
| 171 "opacity(0)"); |
| 172 |
| 173 testComputedFilterRule("No values", |
| 174 "opacity()", |
| 175 "opacity(1)"); |
| 176 |
| 177 testComputedFilterRule("Multiple values", |
| 178 "opacity(0.5) opacity(0.25)", |
| 179 "opacity(0.5) opacity(0.25)"); |
| 180 |
| 181 testComputedFilterRule("Rule combinations", |
| 182 "opacity(0.5) grayscale(0.25)", |
| 183 "opacity(0.5) grayscale(0.25)"); |
| 184 |
| 185 testComputedFilterRule("Integer value", |
| 186 "brightness(1)", |
| 187 "brightness(1)"); |
| 188 |
| 189 testComputedFilterRule("Float value converts to integer", |
| 190 "brightness(1.0)", |
| 191 "brightness(1)"); |
| 192 |
| 193 testComputedFilterRule("Zero value", |
| 194 "brightness(0)", |
| 195 "brightness(0)"); |
| 196 |
| 197 testComputedFilterRule("No values", |
| 198 "brightness()", |
| 199 "brightness(0)"); |
| 200 |
| 201 testComputedFilterRule("Multiple values", |
| 202 "brightness(0.5) brightness(0.25)", |
| 203 "brightness(0.5) brightness(0.25)"); |
| 204 |
| 205 testComputedFilterRule("Rule combinations", |
| 206 "brightness(0.5) grayscale(0.25)", |
| 207 "brightness(0.5) grayscale(0.25)"); |
| 208 |
| 209 testComputedFilterRule("Integer value", |
| 210 "contrast(1)", |
| 211 "contrast(1)"); |
| 212 |
| 213 testComputedFilterRule("Value greater than 1", |
| 214 "contrast(2)", |
| 215 "contrast(2)"); |
| 216 |
| 217 testComputedFilterRule("Float value converts to integer", |
| 218 "contrast(1.0)", |
| 219 "contrast(1)"); |
| 220 |
| 221 testComputedFilterRule("Zero value", |
| 222 "contrast(0)", |
| 223 "contrast(0)"); |
| 224 |
| 225 testComputedFilterRule("No values", |
| 226 "contrast()", |
| 227 "contrast(1)"); |
| 228 |
| 229 testComputedFilterRule("Multiple values", |
| 230 "contrast(0.5) contrast(0.25)", |
| 231 "contrast(0.5) contrast(0.25)"); |
| 232 |
| 233 testComputedFilterRule("Rule combinations", |
| 234 "contrast(0.5) grayscale(0.25)", |
| 235 "contrast(0.5) grayscale(0.25)"); |
| 236 |
| 237 testComputedFilterRule("One zero to px", |
| 238 "blur(0)", |
| 239 "blur(0px)"); |
| 240 |
| 241 testComputedFilterRule("One length", |
| 242 "blur(2em)", |
| 243 "blur(32px)"); |
| 244 |
| 245 testComputedFilterRule("One length", |
| 246 "blur(5px)", |
| 247 "blur(5px)"); |
| 248 |
| 249 testComputedFilterRule("No values", |
| 250 "blur()", |
| 251 "blur(0px)"); |
| 252 |
| 253 testComputedFilterRule("Named color then three values", |
| 254 "drop-shadow(red 1px 2px 3px)", |
| 255 "drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"); |
| 256 |
| 257 testComputedFilterRule("Three values then named color", |
| 258 "drop-shadow(1px 2px 3px red)", |
| 259 "drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"); |
| 260 |
| 261 testComputedFilterRule("Color then three values with zero length", |
| 262 "drop-shadow(#abc 0 0 0)", |
| 263 "drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"); |
| 264 |
| 265 testComputedFilterRule("Three values with zero length", |
| 266 "drop-shadow(0 0 0)", |
| 267 "drop-shadow(rgb(0, 0, 0) 0px 0px 0px)"); |
| 268 |
| 269 testComputedFilterRule("Two values no color", |
| 270 "drop-shadow(1px 2px)", |
| 271 "drop-shadow(rgb(0, 0, 0) 1px 2px 0px)"); |
| 272 |
| 273 testComputedFilterRule("Multiple operations", |
| 274 "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35d
eg) invert(0.2) opacity(0.9) blur(5px)", |
| 275 [ "grayscale(0.5)", |
| 276 "sepia(0.25)", |
| 277 "saturate(0.75)", |
| 278 "hue-rotate(35deg)", |
| 279 "invert(0.2)", |
| 280 "opacity(0.9)", |
| 281 "blur(5px)" ].join(" ")); |
| 282 |
| 283 testComputedFilterRule("Percentage values", |
| 284 "grayscale(50%) sepia(25%) saturate(75%) invert(20%) opac
ity(90%) brightness(60%) contrast(30%)", |
| 285 [ "grayscale(0.5)", |
| 286 "sepia(0.25)", |
| 287 "saturate(0.75)", |
| 288 "invert(0.2)", |
| 289 "opacity(0.9)", |
| 290 "brightness(0.6)", |
| 291 "contrast(0.3)" ].join(" ")); |
| 292 |
| 293 successfullyParsed = true; |
OLD | NEW |