<!doctype html >
<meta charset="utf-8" >
<title >CSSOM base URI is the document's base URI
<link rel="author" title ="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io" >
<link rel="author" title ="Mozilla" href="https://mozilla.org " >
<link rel="help" href="https://html.spec.whatwg.org/#document-base-url " >
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1343919 " >
<base href="/non-existent-base/" >
<script src='/resources/testharness.js' ></script >
<script src='/resources/testharnessreport.js' ></script >
<div id="target" ></div >
<script >
const target = document.getElementById("target" );
const kRelativeURI = "url(something.png)" ;
const kKeyframes = [
{ backgroundImage: kRelativeURI },
{ backgroundImage: kRelativeURI },
];
function assertBackground() {
const image = getComputedStyle(target).backgroundImage;
assert_true(image.includes("non-existent-base" ), image);
}
function assertNoBackground() {
const image = getComputedStyle(target).backgroundImage;
assert_equals(image, "none" );
}
promise_test(async function() {
target.style .backgroundImage = kRelativeURI;
assertBackground();
target.style .backgroundImage = "" ;
assertNoBackground();
}, "setProperty" );
promise_test(async function() {
const keyframe = new KeyframeEffect(target, kKeyframes, 10000);
const animation = new Animation(keyframe, document.timeline);
animation.play();
await animation.ready;
assertBackground();
animation.cancel();
assertNoBackground();
}, "KeyframeEffect constructor" );
promise_test(async function() {
const keyframe = new KeyframeEffect(target, [], 10000);
keyframe.setKeyframes(kKeyframes);
const animation = new Animation(keyframe, document.timeline);
animation.play();
await animation.ready;
assertBackground();
animation.cancel();
assertNoBackground();
}, "KeyframeEffect.setKeyframes" );
</script >
quality 100%
¤ Dauer der Verarbeitung: 0.3 Sekunden
¤
*© Formatika GbR, Deutschland