image-set-parsing.html (11464B)
1 <!DOCTYPE html> 2 <title>Image set parsing</title> 3 <link rel="author" title="Noam Rosenthal" href="mailto:noam.j.rosenthal@gmail.com"> 4 <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> 6 <meta name="assert" content="General image-set parsing follows CSS Images 4 rules."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/parsing-testcommon.js"></script> 10 <body> 11 <script> 12 function test_valid_value_variants(property, value, serializedValue) { 13 if (!serializedValue) serializedValue = value; 14 test_valid_value(property, value, serializedValue); 15 16 // The '-webkit-' prefixed 'image-set' is expected to serialize to the same 17 // value as standard 'image-set'. 18 // https://drafts.csswg.org/css-images-4/#deprecated 19 // "Implementations must accept -webkit-image-set() as a parse-time alias of 20 // image-set(). (It’s a valid value, with identical arguments to image-set(), 21 // and is turned into image-set() during parsing.)" 22 test_valid_value(property, "-webkit-" + value, serializedValue); 23 } 24 25 function test_invalid_value_variants(property, value) { 26 test_invalid_value(property, value); 27 test_invalid_value(property, "-webkit-" + value); 28 } 29 30 function test_default_resolution_parsing() { 31 // Based on the spec, the resolution is optional and should default 32 // to 1x if not specified. 33 // This set of tests verify this expectation. 34 35 // Test when the only image is missing it's resolution 36 test_valid_value_variants( 37 'background-image', 38 'image-set(url(foo))', 39 'image-set(url("foo") 1x)' 40 ); 41 42 // Test when the 1st of 2 images is missing it's resolution 43 test_valid_value_variants( 44 'background-image', 45 'image-set(url(foo), url(bar) 1x)', 46 'image-set(url("foo") 1x, url("bar") 1x)' 47 ); 48 49 // Test when the 2nd of 2 images is missing it's resolution 50 test_valid_value_variants( 51 'background-image', 52 'image-set(url(foo) 1x, url(bar))', 53 'image-set(url("foo") 1x, url("bar") 1x)' 54 ); 55 56 // Test when both images are missing their resolutions 57 test_valid_value_variants( 58 'background-image', 59 'image-set(url(foo), url(bar))', 60 'image-set(url("foo") 1x, url("bar") 1x)' 61 ); 62 63 // Test when the middle of 3 images is missing it's resolution 64 test_valid_value_variants( 65 'background-image', 66 'image-set(url(foo) 1x, url(bar), url(baz) 2x)', 67 'image-set(url("foo") 1x, url("bar") 1x, url("baz") 2x)' 68 ); 69 } 70 71 function test_resolution_units_parsing() { 72 test_valid_value_variants( 73 'background-image', 74 'image-set(url("example.png") 1x)' 75 ); 76 test_valid_value_variants( 77 'background-image', 78 'image-set(url("example.png") calc(2x * 3))', 79 'image-set(url("example.png") calc(6dppx))' 80 ); 81 test_valid_value_variants( 82 'background-image', 83 'image-set(url("example.png") 1dppx)' 84 ); 85 test_valid_value_variants( 86 'background-image', 87 'image-set(url("example.png") calc(1dppx * 1))', 88 'image-set(url("example.png") calc(1dppx))' 89 ); 90 test_valid_value_variants( 91 'background-image', 92 'image-set(url("example.png") 1dpi)' 93 ); 94 test_valid_value_variants( 95 'background-image', 96 'image-set(url("example.png") calc(96dpi * 2))', 97 'image-set(url("example.png") calc(2dppx))' 98 ); 99 test_valid_value_variants( 100 'background-image', 101 'image-set(url("example.png") 1dpcm)' 102 ); 103 test_valid_value_variants( 104 'background-image', 105 'image-set(url("example.png") calc(1dpcm * 96/2.54))', 106 'image-set(url("example.png") calc(1dppx))' 107 ); 108 test_valid_value_variants( 109 'background-image', 110 'image-set(url("example.png") 1x, url("example.png") 2dppx, "example.png" 250dpi, "example.png" 1dpcm)', 111 'image-set(url("example.png") 1x, url("example.png") 2dppx, url("example.png") 250dpi, url("example.png") 1dpcm)' 112 ); 113 test_valid_value_variants( 114 'content', 115 'image-set(url("example.png") 1dpi)' 116 ); 117 test_valid_value_variants( 118 'content', 119 'image-set(url("example.png") calc(1 * 96dpi))', 120 'image-set(url("example.png") calc(1dppx))' 121 ); 122 test_valid_value_variants( 123 'background-image', 124 'image-set(url("example.png") calc(1dppx * sibling-index()))', 125 ); 126 test_valid_value_variants( 127 'background-image', 128 'image-set(url("example.png") calc(1dppx * sign(1em - 10px)))', 129 ); 130 test_valid_value_variants( 131 'background-image', 132 'image-set(url("example.png") calc(1dppx * sign(10px)))', 133 'image-set(url("example.png") calc(1dppx))', 134 ); 135 136 test_invalid_value_variants( 137 'background-image', 138 'image-set(url("example.png") 1invalidResUnit)' 139 ); 140 test_invalid_value_variants( 141 'background-image', 142 'image-set(url("example.png") calc(3 * 4))' 143 ); 144 test_invalid_value_variants( 145 'background-image', 146 'image-set(url("example.png") calc(2 - 1))' 147 ); 148 test_invalid_value_variants( 149 'background-image', 150 'image-set(url("example.png") calc(2x - 1))' 151 ); 152 test_invalid_value_variants( 153 'background-image', 154 'image-set(url("example.png") calc(1 + 4dpi))' 155 ); 156 } 157 158 function test_non_positive_resolutions_parsing() { 159 test_valid_value_variants( 160 'background-image', 161 'image-set(url("example.png") 0x)' 162 ); 163 test_valid_value_variants( 164 'background-image', 165 'image-set(url("example.png") 0dppx)' 166 ); 167 test_valid_value_variants( 168 'background-image', 169 'image-set(url("example.png") 0dpi)' 170 ); 171 test_valid_value_variants( 172 'background-image', 173 'image-set(url("example.png") 0dpcm)' 174 ); 175 test_valid_value_variants( 176 'background-image', 177 'image-set(url("example.png") calc(-1 * 1x))', 178 'image-set(url("example.png") calc(-1dppx))', 179 ); 180 test_valid_value_variants( 181 'background-image', 182 'image-set(url("example.png") calc(1x + -1x))', 183 'image-set(url("example.png") calc(0dppx))', 184 ); 185 186 test_invalid_value_variants( 187 'background-image', 188 'image-set(url("example.png") -1x)' 189 ); 190 test_invalid_value_variants( 191 'background-image', 192 'image-set(url("example.png") -3dppx)' 193 ); 194 test_invalid_value_variants( 195 'background-image', 196 'image-set(url("example.png") -96dpi)' 197 ); 198 test_invalid_value_variants( 199 'background-image', 200 'image-set(url("example.png") -113dpcm)' 201 ); 202 } 203 204 function test_gradient_images_parsing() { 205 test_valid_value_variants( 206 'background-image', 207 "image-set(linear-gradient(black, white) 1x)" 208 ); 209 test_valid_value_variants( 210 'background-image', 211 "image-set(repeating-linear-gradient(red, blue 25%) 1x)" 212 ); 213 test_valid_value_variants( 214 'background-image', 215 "image-set(radial-gradient(black, white) 1x)" 216 ); 217 test_valid_value_variants( 218 'background-image', 219 "image-set(repeating-radial-gradient(red, blue 25%) 1x)" 220 ); 221 test_valid_value_variants( 222 'background-image', 223 "image-set(conic-gradient(black, white) 1x)" 224 ); 225 test_valid_value_variants( 226 'background-image', 227 "image-set(repeating-conic-gradient(red, blue 25%) 1x)" 228 ); 229 test_valid_value_variants( 230 'content', 231 'image-set(linear-gradient(black, white) 1x, url("example.png") 4x)' 232 ); 233 test_valid_value_variants( 234 'content', 235 'image-set(url("example.png") 192dpi, linear-gradient(black, white) 1x)' 236 ); 237 test_valid_value_variants( 238 'background-image', 239 "image-set(linear-gradient(red) 1x)" 240 ); 241 242 test_invalid_value_variants( 243 'cursor', 244 "image-set(linear-gradient(black, white) 1x)" 245 ); 246 } 247 248 function test_image_type_parsing() { 249 test_valid_value_variants( 250 'background-image', 251 'image-set(url("example.png") 1x type("image/png"))' 252 ); 253 test_valid_value_variants( 254 'background-image', 255 "image-set(url(example.png) type('image/png'))", 256 'image-set(url("example.png") 1x type("image/png"))' 257 ); 258 test_valid_value_variants( 259 'background-image', 260 "image-set(url(example.png) type('image/png') 1x)", 261 'image-set(url("example.png") 1x type("image/png"))' 262 ); 263 test_valid_value_variants( 264 'background-image', 265 "image-set(url(example.png) 1x type('image/jpeg'))", 266 'image-set(url("example.png") 1x type("image/jpeg"))' 267 ); 268 269 test_invalid_value_variants( 270 'background-image', 271 "image-set(url(example.png) type(image/png))" 272 ); 273 test_invalid_value_variants( 274 'background-image', 275 "image-set(url(example.png) type('image/png') type('image/png'))" 276 ); 277 test_invalid_value_variants( 278 'background-image', 279 "image-set(url(example.png) type('image/png' 'image/png'))" 280 ); 281 test_invalid_value_variants( 282 'background-image', 283 "image-set(url(example.png) type(url('image/png')))" 284 ); 285 test_invalid_value_variants( 286 'background-image', 287 "image-set(url(example.png) 1xtype('image/png'))" 288 ); 289 test_invalid_value_variants( 290 'background-image', 291 "image-set(type('image/png') url(example.png) 1x)" 292 ); 293 } 294 295 function test_no_images_set_nesting() { 296 // Spec definition: 297 // "The image-set() function can not be nested inside of itself, 298 // either directly or indirectly (as an argument to another <image> type)." 299 300 // Direct nesting 301 test_invalid_value_variants( 302 'background-image', 303 "image-set(image-set(url(example.png)) 2x)" 304 ); 305 306 // Indirect nesting 307 test_invalid_value_variants( 308 'background-image', 309 "image-set(image(image-set(url(example.png)) 2x) 2x)" 310 ); 311 } 312 313 function test_image_set_parsing() { 314 test_valid_value_variants('background-image', "image-set(url(example.png) 1x)", 'image-set(url("example.png") 1x)'); 315 test_valid_value_variants('background-image', "image-set('example.jpg' 1x)", 'image-set(url("example.jpg") 1x)'); 316 test_valid_value_variants('background-image', "image-set(url(example.png) 1x, 'example.png' 2x)", 'image-set(url("example.png") 1x, url("example.png") 2x)'); 317 test_valid_value_variants('background-image', "image-set(url(example.png) 1dpcm, 'example.png' 2x)", 'image-set(url("example.png") 1dpcm, url("example.png") 2x)'); 318 test_valid_value_variants('background-image', "image-set('example.jpeg' 222dpi, url(example.png) 3.5x)", 'image-set(url("example.jpeg") 222dpi, url("example.png") 3.5x)'); 319 320 test_valid_value_variants('content', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)'); 321 test_valid_value_variants('content', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)'); 322 test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)'); 323 test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)'); 324 325 test_invalid_value_variants('background-image', 'image-set(url("example.png") -20x)'); 326 test_invalid_value_variants('background-image', "image-set(none, url(example.png) 1x)"); 327 test_invalid_value_variants('background-image', "image-set()"); 328 test_invalid_value_variants('background-image', "image-set('example.jpeg' 92pid url(example.png) 1x)"); 329 test_invalid_value_variants('background-image', "image-set(url(example.png) 1x url(example.jpeg))"); 330 test_invalid_value_variants('background-image', "image-set(url(example.png) 1x 2x)"); 331 332 test_default_resolution_parsing(); 333 test_resolution_units_parsing(); 334 test_non_positive_resolutions_parsing(); 335 test_gradient_images_parsing(); 336 test_image_type_parsing(); 337 test_no_images_set_nesting(); 338 } 339 340 test_image_set_parsing(); 341 </script>