| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Image set parsing</title> |
| <link rel="author" title="Noam Rosenthal" href="mailto:noam.j.rosenthal@gmail.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> |
| <meta name="assert" content="General image-set parsing follows CSS Images 4 rules."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <script> |
| const tests = [ |
| { property: 'background-image', imageSet: "url(example.png) 1x", valid: true }, |
| { property: 'background-image', imageSet: "url('example.png') 1x", valid: true }, |
| { property: 'background-image', imageSet: "'example.jpg' 1x", valid: true }, |
| { property: 'background-image', imageSet: "url(example.png) 1x, 'example.png' 2x", valid: true }, |
| { property: 'background-image', imageSet: "url(example.png) 1dppx", valid: true }, |
| { property: 'background-image', imageSet: "url(example.png) 1dpi", valid: true }, |
| { property: 'background-image', imageSet: "url(example.png) 1dpcm, 'example.png' 2x", valid: true }, |
| { property: 'background-image', imageSet: "'example.jpeg' 222dpi, url(example.png) 3.5x", valid: true }, |
| { property: 'background-image', imageSet: "linear-gradient(black, white) 1x", valid: true }, |
| { property: 'content', imageSet: "linear-gradient(black, white) 1x, 'example.png' 4x", valid: true }, |
| { property: 'content', imageSet: "url('example.png') 192dpi, linear-gradient(black, white) 1x", valid: true }, |
| |
| { property: 'background-image', imageSet: "none, url(example.png) 1x", valid: false }, |
| { property: 'background-image', imageSet: "", valid: false }, |
| { property: 'background-image', imageSet: "url(example.png) 0x", valid: false }, |
| { property: 'background-image', imageSet: "url(example.png) -20x", valid: false }, |
| { property: 'background-image', imageSet: "'example.jpeg' 92pid url(example.png) 1x", valid: false }, |
| { property: 'cursor', imageSet: "linear-gradient(black, white) 1x", valid: false } |
| ] |
| |
| function check_image_set(tst) { |
| var div = document.createElement('div'); |
| div.setAttribute("style", `${tst.property}: image-set(${tst.imageSet})`) |
| |
| var inline_style = div.style.getPropertyValue(tst.property); |
| assert_equals(inline_style.startsWith('image-set'), tst.valid); |
| |
| document.body.appendChild(div); |
| var computed_style = getComputedStyle(div).getPropertyValue(tst.property); |
| assert_equals(computed_style.startsWith('image-set'), tst.valid); |
| |
| div.remove(); |
| } |
| |
| tests.forEach(tst => { |
| test(() => { |
| check_image_set(tst); |
| }, `${tst.property}: image-set(${tst.imageSet}) ${tst.valid ? "[ parsable ]" : "[ unparsable ]"}`) |
| }); |
| </script> |
| </body> |
| </html> |
