mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-08 06:09:58 +00:00
ca200142e9
Previously, `CSSStyleSheet.replace()` and `CSSStyleSheet.replaceSync()` parsed the given CSS text into a temporary stylesheet object, from which a list of rules was extracted. Doing this had the unintended side-effect that a fetch request would be started if the given CSS text referenced any external resources. This fetch request would cause a crash, since the temporary stylesheet object didn't set the constructed flag, or constructor document. We now parse the given CSS text as a list of rules without constructing a temporary stylesheet.
66 lines
2.4 KiB
HTML
66 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSSStyleSheet baseURL</title>
|
|
<link rel="author" title="Erik Nordin" href="mailto:enordin@mozilla.com">
|
|
<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylesheetinit-baseurl">
|
|
<div id="target"></div>
|
|
<script src='../../resources/testharness.js'></script>
|
|
<script src='../../resources/testharnessreport.js'></script>
|
|
<script>
|
|
|
|
function currentLocation() {
|
|
const sections = location.href.split("/")
|
|
sections.pop();
|
|
return sections.join("/");
|
|
}
|
|
|
|
test(() => {
|
|
const span = document.createElement("span");
|
|
target.appendChild(span);
|
|
span.attachShadow({ mode: "open" })
|
|
const shadowDiv = document.createElement("div");
|
|
span.shadowRoot.appendChild(shadowDiv);
|
|
|
|
const fileName = "example.png"
|
|
const baseURL = `${location.origin}/custom/path/`;
|
|
const fullURL = `${baseURL}${fileName}`;
|
|
|
|
const sheet = new CSSStyleSheet({ baseURL });
|
|
span.shadowRoot.adoptedStyleSheets = [sheet];
|
|
|
|
sheet.replaceSync(`* { background-image: url("${fileName}"); }`);
|
|
const styleFromRelative = getComputedStyle(shadowDiv).backgroundImage;
|
|
|
|
sheet.replaceSync(`* { background-image: url("${fullURL}"); }`);
|
|
const styleFromFull = getComputedStyle(shadowDiv).backgroundImage;
|
|
|
|
assert_equals(styleFromRelative, styleFromFull);
|
|
}, "Constructing sheet with custom base URL ueses that URL for CSS rules");
|
|
|
|
test(() => {
|
|
const span = document.createElement("span");
|
|
target.appendChild(span);
|
|
span.attachShadow({ mode: "open" })
|
|
const shadowDiv = document.createElement("div");
|
|
span.shadowRoot.appendChild(shadowDiv);
|
|
|
|
const fileName = "example.png"
|
|
const baseURL = "custom/path/";
|
|
const fullURL = `${currentLocation()}/${baseURL}${fileName}`;
|
|
|
|
const sheet = new CSSStyleSheet({ baseURL });
|
|
span.shadowRoot.adoptedStyleSheets = [sheet];
|
|
|
|
sheet.replaceSync(`* { background-image: url("${fileName}"); }`);
|
|
const styleFromRelative = getComputedStyle(shadowDiv).backgroundImage;
|
|
|
|
sheet.replaceSync(`* { background-image: url("${fullURL}"); }`);
|
|
const styleFromFull = getComputedStyle(shadowDiv).backgroundImage;
|
|
|
|
assert_equals(styleFromRelative, styleFromFull);
|
|
}, "Constructing sheet with relative URL adds to the constructor document's base URL");
|
|
|
|
test(() => {
|
|
assert_throws_dom("NotAllowedError", () => { new CSSStyleSheet({ baseURL: "https://test:test/"}) });
|
|
}, "Constructing sheet with invalid base URL throws a NotAllowedError");
|
|
|
|
</script>
|