Skip to content

Commit efbee87

Browse files
emilioemilio
committed
Bug 1709415 - Support -webkit-image-set as a parse-time alias to image-set(). r=karlcow,twisniewski
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
1 parent c7e36d6 commit efbee87

File tree

5 files changed

+96
-58
lines changed

5 files changed

+96
-58
lines changed

‎servo/components/style/values/specified/image.rs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,14 @@ impl ImageSet {
365365
cors_mode: CorsMode,
366366
only_url: bool,
367367
) -> Result<Self, ParseError<'i>> {
368-
input.expect_function_matching("image-set")?;
368+
let function = input.expect_function()?;
369+
match_ignore_ascii_case! { &function,
370+
"-webkit-image-set" | "image-set" => {},
371+
_ => {
372+
let func = function.clone();
373+
return Err(input.new_custom_error(StyleParseErrorKind::UnexpectedFunction(func)));
374+
}
375+
}
369376
let items = input.parse_nested_block(|input| {
370377
input.parse_comma_separated(|input| ImageSetItem::parse(context, input, cors_mode, only_url))
371378
})?;

‎testing/web-platform/meta/css/css-images/image-set/webkit-image-set.tentative.html.ini

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[webkit-image-set.tentative.html]
2+
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1696314
3+
[content: -webkit-image-set(linear-gradient(black, white) 1x, 'example.png' 4x) [ parsable \]]
4+
expected: FAIL
5+
[content: -webkit-image-set(url('example.png') 192dpi, linear-gradient(black, white) 1x) [ parsable \]]
6+
expected: FAIL

‎testing/web-platform/tests/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>

‎testing/web-platform/tests/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+
];

‎testing/web-platform/tests/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)