Chromium Code Reviews Chromium Code Reviews
Issue 1987943002:
[wip] unprefix filter
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 description("Test that -webkit-filter matches filter."); | |
|
fs
2016/05/23 12:29:52
This looks like it could quite trivially be conver
Noel Gordon
2016/05/29 04:15:28
Maybe, but I won't have the time for it, so it can
fs
2016/05/30 11:58:52
Fair enough, I can fix it up later.
| |
| 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 |
