base-uri.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/base-uri.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8">

<title>CSSOM base URI is the document's base URI</title>

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