LibWeb/CSS: Add alternative src() syntax for URLs

url() has some limitations because of allowing unquoted URLs as its
contents. For example, it can't use `var()`. To get around this, there's
an alternative `src()` function which behaves the same as `url()` except
that it is parsed as a regular function, which makes `var()` and friends
work properly.

There's no WPT test for this as far as I can tell, so I added our own.
This commit is contained in:
Sam Atkins 2025-06-09 17:20:04 +01:00 committed by Andreas Kling
commit 00f76ccbf4
Notes: github-actions[bot] 2025-06-11 14:27:18 +00:00
5 changed files with 63 additions and 8 deletions

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<div id="target" style="--some-url: 'awesome.png'"></div>
<script>
test(() => {
let target = document.getElementById("target");
println(`Before: ${getComputedStyle(target).backgroundImage}`);
target.style.backgroundImage = "url('cool.png')";
println(`Using url('cool.png'): ${getComputedStyle(target).backgroundImage}`);
target.style.backgroundImage = "";
target.style.backgroundImage = "url(var(--some-url))";
println(`Using url(var(--some-url)): ${getComputedStyle(target).backgroundImage}`);
target.style.backgroundImage = "";
target.style.backgroundImage = "src('cool.png')";
println(`Using src('cool.png'): ${getComputedStyle(target).backgroundImage}`);
target.style.backgroundImage = "";
target.style.backgroundImage = "src(var(--some-url))";
println(`Using src(var(--some-url)): ${getComputedStyle(target).backgroundImage}`);
});
</script>