<!
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>