mirror of
https://github.com/servo/servo.git
synced 2025-10-16 16:29:18 +01:00
53 lines
3.2 KiB
HTML
53 lines
3.2 KiB
HTML
<!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>
|