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