eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-26 09:45:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
parent ea0bfda1b9
commit 00f76ccbf4
Notes: github-actions[bot] 2025-06-11 14:27:18 +00:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/LadybirdBrowser/ladybird/commit/00f76ccbf4f
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5041
5 changed files with 63 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Tests/LibWeb/Text/input/css/src-function.html Normal file
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>