ladybird/Tests/LibWeb/Text/input/css/src-function.html
Sam Atkins 00f76ccbf4 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.
2025-06-11 16:26:23 +02:00

25 lines
1,018 B
HTML

<!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>