resolve-relative-to-stylesheet.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-values/urls/resolve-relative-to-stylesheet.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>URLs in a stylesheet resolve relative to the stylesheet</title>

<link rel=help href=https://drafts.csswg.org/css-values/#relative-urls>

<script src=/resources/testharness.js></script>

<script src=/resources/testharnessreport.js></script>

<link id="stylesheet" rel=stylesheet href=support/relative-urls.css>

<div id="stylesheet-relative-image"></div>

<div id="stylesheet-relative-variable-image"></div>

<div id="stylesheet-relative-document-variable-image"></div>

<style>

    :root {

        --image-path-document: url("images/test.png");

</style>

<script>

const ids = [

  "stylesheet-relative-image",

  "stylesheet-relative-variable-image",

  "stylesheet-relative-document-variable-image",

];

for (let id of ids) {

    test(() => {

        const el = document.getElementById(id);

        const backgroundImageStyle = window.getComputedStyle(el)["background-image"];

        const stylesheet = document.getElementById("stylesheet");

        const sheetRelativeImageURL = new URL("images/test.png", stylesheet.href);

        assert_equals(backgroundImageStyle, `url("${sheetRelativeImageURL.href}")`);

    }, "stylesheet-relative URL: " + id);

</script>