CSSStyleSheet-constructable-baseURL.html (2401B)
1 <!DOCTYPE html> 2 <title>CSSStyleSheet baseURL</title> 3 <link rel="author" title="Erik Nordin" href="mailto:enordin@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylesheetinit-baseurl"> 5 <div id="target"></div> 6 <script src='/resources/testharness.js'></script> 7 <script src='/resources/testharnessreport.js'></script> 8 <script> 9 10 function currentLocation() { 11 const sections = location.href.split("/") 12 sections.pop(); 13 return sections.join("/"); 14 } 15 16 test(() => { 17 const span = document.createElement("span"); 18 target.appendChild(span); 19 span.attachShadow({ mode: "open" }) 20 const shadowDiv = document.createElement("div"); 21 span.shadowRoot.appendChild(shadowDiv); 22 23 const fileName = "example.png" 24 const baseURL = `${location.origin}/custom/path/`; 25 const fullURL = `${baseURL}${fileName}`; 26 27 const sheet = new CSSStyleSheet({ baseURL }); 28 span.shadowRoot.adoptedStyleSheets = [sheet]; 29 30 sheet.replaceSync(`* { background-image: url("${fileName}"); }`); 31 const styleFromRelative = getComputedStyle(shadowDiv).backgroundImage; 32 33 sheet.replaceSync(`* { background-image: url("${fullURL}"); }`); 34 const styleFromFull = getComputedStyle(shadowDiv).backgroundImage; 35 36 assert_equals(styleFromRelative, styleFromFull); 37 }, "Constructing sheet with custom base URL ueses that URL for CSS rules"); 38 39 test(() => { 40 const span = document.createElement("span"); 41 target.appendChild(span); 42 span.attachShadow({ mode: "open" }) 43 const shadowDiv = document.createElement("div"); 44 span.shadowRoot.appendChild(shadowDiv); 45 46 const fileName = "example.png" 47 const baseURL = "custom/path/"; 48 const fullURL = `${currentLocation()}/${baseURL}${fileName}`; 49 50 const sheet = new CSSStyleSheet({ baseURL }); 51 span.shadowRoot.adoptedStyleSheets = [sheet]; 52 53 sheet.replaceSync(`* { background-image: url("${fileName}"); }`); 54 const styleFromRelative = getComputedStyle(shadowDiv).backgroundImage; 55 56 sheet.replaceSync(`* { background-image: url("${fullURL}"); }`); 57 const styleFromFull = getComputedStyle(shadowDiv).backgroundImage; 58 59 assert_equals(styleFromRelative, styleFromFull); 60 }, "Constructing sheet with relative URL adds to the constructor document's base URL"); 61 62 test(() => { 63 assert_throws_dom("NotAllowedError", () => { new CSSStyleSheet({ baseURL: "https://test:test/"}) }); 64 }, "Constructing sheet with invalid base URL throws a NotAllowedError"); 65 66 </script>