Constructed stylesheet background-image with relative URL is not applied when rule is inserted with Stylesheet#insertRule
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox125 | --- | fixed |
People
(Reporter: josh, Assigned: emilio)
References
Details
Attachments
(5 files)
(svg for use in testcase)
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0
Steps to reproduce:
- In a new folder, copy the following HTML code into example.html:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
const css = new CSSStyleSheet()
document.adoptedStyleSheets.push(css)
css.insertRule(`
body {
background-image: url("image.svg");
min-height: 100vh;
}
`)
</script>
</body>
</html>
-
Download an SVG file and save it as image.svg.
-
Run a web server on port 8000 serving the contents of the folder.
-
In Firefox, browse to http://localhost:8000/example.html.
Actual results:
The document body did not show the background image. When I inspected the element with the developer console, the following console message appeared: Security Error: Content at http://127.0.0.1:8000/index.html may not load or link to chrome://devtools/content/inspector/image.svg.
Expected results:
The document body should have shown image.svg as its background, in exactly the same way as if background-image: url("image.svg"); was entered directly in CSS.
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'DevTools::General' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
I think the bot is wrong. This doesn't seem to me to be a problem with devtools, it seems to be a problem with how dynamic CSS is treated by the renderer.
|
||
Comment 3•1 years ago
|
||
I can reproduce the issue, and it looks like this might be caused by insertRule ?
If I'm using replaceSync to populate the stylesheet instead, I do get the background image
const css = new CSSStyleSheet();
css.replaceSync(`
body {
background-image: url("image.svg");
min-height: 100vh;
}
`);
document.adoptedStyleSheets.push(css);
Note that the computed value of background-image is url("about:invalid")
|
|
||
Updated•1 years ago
|
|
|
||
Updated•1 years ago
|
|
|
||
Comment 4•1 years ago
|
||
The severity field is not set for this bug.
:jfkthame, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Comment 5•1 year ago
|
||
|
|
||
Comment 6•1 year ago
|
||
|
|
||
Comment 7•1 year ago
|
||
|
|
||
Updated•1 year ago
|
|
|
||
Comment 8•1 year ago
|
||
|
|
||
Updated•1 year ago
|
|
|
||
Comment 9•1 year ago
|
||
I can reproduce this in Nightly for as long as constructable stylesheets has been on by default via bug 1644102 (i.e. Nightly 2022-04-28 renders the reference cases as lime but the testcase as blank).
So: not a regression, but apparently a bug in our constructable stylesheets that's been present since it shipped.
emilio, maybe you can take a look & see if there's an easy fix to suggest here?
|
Assignee | |
Comment 10•1 year ago
|
||
ReplaceSync did this, but if you don't call Replace() / ReplaceSync()
after construction we end up with the Servo_StyleSheet_Empty which has a
dummy URL data.
|
||
Updated•1 year ago
|
|
|
Assignee | |
Updated•1 year ago
|
|
||
Comment 11•1 year ago
|
||
|
||
Comment 13•1 year ago
|
||
| bugherder | ||
|
||
Updated•1 year ago
|
Description
•