<!
DOCTYPE html >
<
title >JPEG XL integration: CSS image uses</
title >
<
link rel=
"help" href=
"https://github.com/web-platform-tests/interop-jpegxl " >
<
script src=
"/resources/testharness.js" ></
script >
<
script src=
"/resources/testharnessreport.js" ></
script >
<
style >
#bg {
width:
30 px;
height:
30 px;
background-image: url(
'resources/3x3_srgb_lossless.jxl' );
}
#content::before {
content: url(
'resources/3x3_srgb_lossless.jxl' );
}
#imageset {
width:
30 px;
height:
30 px;
background-image: image-set(url(
'resources/3x3_srgb_lossless.jxl' )
1 x);
}
#list {
list-
style -image: url(
'resources/3x3_srgb_lossless.jxl' );
}
</
style >
<
div id=
"bg" ></
div >
<
div id=
"content" ></
div >
<
div id=
"imageset" ></
div >
<
ul ><
li id=
"list" >item</
li ></
ul >
<
script >
promise_test(async () => {
const bg = getComputedStyle(document.getElementById(
'bg' )).backgroundImage;
const before = getComputedStyle(document.getElementById(
'content' ),
'::before' ).cont
ent;
const set = getComputedStyle(document.getElementById('imageset' )).backgroundImage;
const list = getComputedStyle(document.getElementById('list' )).listStyleImage;
assert_true(bg.includes('.jxl' ));
assert_true(before.includes('.jxl' ));
assert_true(set.includes('.jxl' ));
assert_true(list.includes('.jxl' ));
}, 'CSS properties accept JPEG XL image URLs' );
</script >
Messung V0.5 in Prozent C=87 H=96 G=91
¤ Dauer der Verarbeitung: 0.3 Sekunden
¤
*© Formatika GbR, Deutschland