mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-27 03:10:01 +00:00
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.
25 lines
1,018 B
HTML
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>
|