-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathimage-set-parsing.html
53 lines (47 loc) · 3.15 KB
/
image-set-parsing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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: "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>