resolve-relative-to-stylesheet.html (1186B)
1 <!doctype html> 2 <title>URLs in a stylesheet resolve relative to the stylesheet</title> 3 <link rel=help href=https://drafts.csswg.org/css-values/#relative-urls> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <link id="stylesheet" rel=stylesheet href=support/relative-urls.css> 7 <div id="stylesheet-relative-image"></div> 8 <div id="stylesheet-relative-variable-image"></div> 9 <div id="stylesheet-relative-document-variable-image"></div> 10 <style> 11 :root { 12 --image-path-document: url("images/test.png"); 13 } 14 </style> 15 <script> 16 const ids = [ 17 "stylesheet-relative-image", 18 "stylesheet-relative-variable-image", 19 "stylesheet-relative-document-variable-image", 20 ]; 21 22 for (let id of ids) { 23 test(() => { 24 const el = document.getElementById(id); 25 const backgroundImageStyle = window.getComputedStyle(el)["background-image"]; 26 27 const stylesheet = document.getElementById("stylesheet"); 28 const sheetRelativeImageURL = new URL("images/test.png", stylesheet.href); 29 30 assert_equals(backgroundImageStyle, `url("${sheetRelativeImageURL.href}")`); 31 }, "stylesheet-relative URL: " + id); 32 } 33 </script>