Skip to content

Commit b8db2d3

Browse files
emiliomoz-wptsync-bot
emilio
authored and
moz-wptsync-bot
committed
Support -webkit-image-set as a parse-time alias to image-set().
The webkit syntax is an strict subset of the modern one, so this should be doable, and is the simplest. If my reading of the WebKit code is correct it should also be the way WebKit deals with this (except they restrict -webkit-image-set() syntax artificially). * w3c/csswg-drafts#6285 * whatwg/compat#144 Differential Revision: https://phabricator.services.mozilla.com/D114912 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1709415 gecko-commit: 01bca848cb09b426c0c1c5f34d32dbe3fa5b9aa7 gecko-reviewers: karlcow, twisniewski
1 parent e25fde2 commit b8db2d3

File tree

3 files changed

+82
-57
lines changed

3 files changed

+82
-57
lines changed

‎css/css-images/image-set/image-set-parsing.html

Lines changed: 25 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,30 @@
11
>
2-
<html>
3-
<head>
4-
<title>Image set parsingtitle>
5-
<link rel="author" title="Noam Rosenthal" href="mailto:[email protected]">
6-
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
7-
<meta name="assert" content="General image-set parsing follows CSS Images 4 rules.">
8-
<script src="/resources/testharness.js">script>
9-
<script src="/resources/testharnessreport.js">script>
10-
head>
11-
<body>
12-
<script>
13-
const tests = [
14-
{ property: 'background-image', imageSet: "url(example.png) 1x", valid: true },
15-
{ property: 'background-image', imageSet: "url('example.png') 1x", valid: true },
16-
{ property: 'background-image', imageSet: "'example.jpg' 1x", valid: true },
17-
{ property: 'background-image', imageSet: "url(example.png) 1x, 'example.png' 2x", valid: true },
18-
{ property: 'background-image', imageSet: "url(example.png) 1dppx", valid: true },
19-
{ property: 'background-image', imageSet: "url(example.png) 1dpi", valid: true },
20-
{ property: 'background-image', imageSet: "url(example.png) 1dpcm, 'example.png' 2x", valid: true },
21-
{ property: 'background-image', imageSet: "'example.jpeg' 222dpi, url(example.png) 3.5x", valid: true },
22-
{ property: 'background-image', imageSet: "linear-gradient(black, white) 1x", valid: true },
23-
{ property: 'background-image', imageSet: "url(example.png) 1x type('image/png')", valid: true },
24-
{ property: 'background-image', imageSet: "url(example.png) type('image/png')", valid: true },
25-
{ property: 'background-image', imageSet: "url(example.png) type('image/png') 1x", valid: true },
26-
{ property: 'content', imageSet: "linear-gradient(black, white) 1x, 'example.png' 4x", valid: true },
27-
{ property: 'content', imageSet: "url('example.png') 192dpi, linear-gradient(black, white) 1x", valid: true },
2+
<title>Image set parsingtitle>
3+
<link rel="author" title="Noam Rosenthal" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
5+
<meta name="assert" content="General image-set parsing follows CSS Images 4 rules.">
6+
<script src="/resources/testharness.js">script>
7+
<script src="/resources/testharnessreport.js">script>
8+
<script src="support/image-set-parsing-tests.js">script>
9+
<body>
10+
<script>
11+
function check_image_set(tst) {
12+
var div = document.createElement('div');
13+
div.setAttribute("style", `${tst.property}: image-set(${tst.imageSet})`)
2814

29-
{ property: 'background-image', imageSet: "none, url(example.png) 1x", valid: false },
30-
{ property: 'background-image', imageSet: "", valid: false },
31-
{ property: 'background-image', imageSet: "url(example.png) 0x", valid: false },
32-
{ property: 'background-image', imageSet: "url(example.png) -20x", valid: false },
33-
{ property: 'background-image', imageSet: "'example.jpeg' 92pid url(example.png) 1x", valid: false },
34-
{ property: 'background-image', imageSet: "url(example.png) type(image/png)", valid: false },
35-
{ property: 'background-image', imageSet: "url(example.png) type('image/png') type('image/png')", valid: false },
36-
{ property: 'background-image', imageSet: "url(example.png) 1xtype('image/png')", valid: false },
37-
{ property: 'background-image', imageSet: "type('image/png') url(example.png) 1x", valid: false },
38-
{ property: 'cursor', imageSet: "linear-gradient(black, white) 1x", valid: false }
39-
]
15+
var inline_style = div.style.getPropertyValue(tst.property);
16+
assert_equals(inline_style.startsWith('image-set'), tst.valid);
4017

41-
function check_image_set(tst) {
42-
var div = document.createElement('div');
43-
div.setAttribute("style", `${tst.property}: image-set(${tst.imageSet})`)
18+
document.body.appendChild(div);
19+
var computed_style = getComputedStyle(div).getPropertyValue(tst.property);
20+
assert_equals(computed_style.startsWith('image-set'), tst.valid);
4421

45-
var inline_style = div.style.getPropertyValue(tst.property);
46-
assert_equals(inline_style.startsWith('image-set'), tst.valid);
22+
div.remove();
23+
}
4724

48-
document.body.appendChild(div);
49-
var computed_style = getComputedStyle(div).getPropertyValue(tst.property);
50-
assert_equals(computed_style.startsWith('image-set'), tst.valid);
51-
52-
div.remove();
53-
}
54-
55-
tests.forEach(tst => {
56-
test(() => {
57-
check_image_set(tst);
58-
}, `${tst.property}: image-set(${tst.imageSet}) ${tst.valid ? "[ parsable ]" : "[ unparsable ]"}`)
59-
});
60-
script>
61-
body>
62-
html>
25+
kImageSetTests.forEach(tst => {
26+
test(() => {
27+
check_image_set(tst);
28+
}, `${tst.property}: image-set(${tst.imageSet}) ${tst.valid ? "[ parsable ]" : "[ unparsable ]"}`)
29+
});
30+
script>

‎css/css-images/image-set/support/image-set-parsing-tests.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const kImageSetTests = [
2+
{ property: 'background-image', imageSet: "url(example.png) 1x", valid: true },
3+
{ property: 'background-image', imageSet: "url('example.png') 1x", valid: true },
4+
{ property: 'background-image', imageSet: "'example.jpg' 1x", valid: true },
5+
{ property: 'background-image', imageSet: "url(example.png) 1x, 'example.png' 2x", valid: true },
6+
{ property: 'background-image', imageSet: "url(example.png) 1dppx", valid: true },
7+
{ property: 'background-image', imageSet: "url(example.png) 1dpi", valid: true },
8+
{ property: 'background-image', imageSet: "url(example.png) 1dpcm, 'example.png' 2x", valid: true },
9+
{ property: 'background-image', imageSet: "'example.jpeg' 222dpi, url(example.png) 3.5x", valid: true },
10+
{ property: 'background-image', imageSet: "linear-gradient(black, white) 1x", valid: true },
11+
{ property: 'background-image', imageSet: "url(example.png) 1x type('image/png')", valid: true },
12+
{ property: 'background-image', imageSet: "url(example.png) type('image/png')", valid: true },
13+
{ property: 'background-image', imageSet: "url(example.png) type('image/png') 1x", valid: true },
14+
{ property: 'content', imageSet: "linear-gradient(black, white) 1x, 'example.png' 4x", valid: true },
15+
{ property: 'content', imageSet: "url('example.png') 192dpi, linear-gradient(black, white) 1x", valid: true },
16+
17+
{ property: 'background-image', imageSet: "none, url(example.png) 1x", valid: false },
18+
{ property: 'background-image', imageSet: "", valid: false },
19+
{ property: 'background-image', imageSet: "url(example.png) 0x", valid: false },
20+
{ property: 'background-image', imageSet: "url(example.png) -20x", valid: false },
21+
{ property: 'background-image', imageSet: "'example.jpeg' 92pid url(example.png) 1x", valid: false },
22+
{ property: 'background-image', imageSet: "url(example.png) type(image/png)", valid: false },
23+
{ property: 'background-image', imageSet: "url(example.png) type('image/png') type('image/png')", valid: false },
24+
{ property: 'background-image', imageSet: "url(example.png) 1xtype('image/png')", valid: false },
25+
{ property: 'background-image', imageSet: "type('image/png') url(example.png) 1x", valid: false },
26+
{ property: 'cursor', imageSet: "linear-gradient(black, white) 1x", valid: false }
27+
];

‎css/css-images/image-set/webkit-image-set.tentative.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
>
2+
<title>-webkit-image-set is a parse-time alias of image-settitle>
3+
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6285">
6+
<script src="/resources/testharness.js">script>
7+
<script src="/resources/testharnessreport.js">script>
8+
<script src="support/image-set-parsing-tests.js">script>
9+
<body>
10+
<script>
11+
function check_image_set(tst) {
12+
var div = document.createElement('div');
13+
div.setAttribute("style", `${tst.property}: -webkit-image-set(${tst.imageSet})`)
14+
15+
var inline_style = div.style.getPropertyValue(tst.property);
16+
assert_equals(inline_style.startsWith('image-set'), tst.valid);
17+
18+
document.body.appendChild(div);
19+
var computed_style = getComputedStyle(div).getPropertyValue(tst.property);
20+
assert_equals(computed_style.startsWith('image-set'), tst.valid);
21+
22+
div.remove();
23+
}
24+
25+
kImageSetTests.forEach(tst => {
26+
test(() => {
27+
check_image_set(tst);
28+
}, `${tst.property}: -webkit-image-set(${tst.imageSet}) ${tst.valid ? "[ parsable ]" : "[ unparsable ]"}`)
29+
});
30+
script>

0 commit comments

Comments
 (0)