Bug 291045
| Summary: | Convert url types to strongly typed CSS/Style values | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sam Weinig <sam> |
| Component: | CSS | Assignee: | Sam Weinig <sam> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | koivisto, simon.fraser, webkit-bug-importer, wenson_hsieh |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Sam Weinig
Convert url types to strongly typed CSS/Style values.
This will prepare us for adding url request modifiers.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Sam Weinig
Pull request: https://github.com/WebKit/WebKit/pull/43613
EWS
Committed 293295@main (0edc4f619186): <https://commits.webkit.org/293295@main>
Reviewed commits have been landed. Closing PR #43613 and removing active labels.
Radar WebKit Bug Importer
<rdar://problem/148665187>
Wenson Hsieh
FWIW — this seems to have caused a subtle bug with regards to how CSS URLs are resolved in elements within templates. In this test case for example:
```
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width">
<head>
<style>
.container {
width: 400px;
height: 400px;
border: 1px solid lightgray;
margin: 1em;
}
button {
font-size: 18px;
padding: 0.5em;
margin: 1em;
}
</style>
<script>
addEventListener("load", () => {
const template = document.querySelector("template");
document.body.appendChild(template.content.cloneNode(true));
document.body.appendChild(template.content.children[0]);
document.querySelector("button").addEventListener("click", () => {
for (let container of [...document.querySelectorAll(".container")])
container.style = container.getAttribute("style");
});
});
</script>
</head>
<body>
<template>
<div class="container" style="background-image: url('images/webkit.png');"></div>
</template>
<button>Click to re-parse style</button>
</body>
</html>
```
...where `images/webkit.png` is just some relative path to an image file, the `container` element's `background-image` style will first be *resolved* to `images/webkit.png` because the base URL in the template element is `about:blank`. After either (1) cloning the element and adding the clone to the document or (2) directly moving the element from the template to the document, the resolved URL remains `images/webkit.png` instead of being updated to reflect the document's base URL, which causes the resource request to fail.
Clicking the button (which just sets the inline style to itself on both containers) fixes the bug, since it forces a style to be rebuilt, this time resolving against the CSS parser context of the document, rather than the template.
Simon Fraser (smfr)
I filed bug 294219 to track this.