LadybirdBrowser / ladybird

Truly independent web browser
https://ladybird.org
BSD 2-Clause "Simplified" License
19.45k stars 787 forks source link

Support custom cursors with `cursor: url("awesome.png")` #1135

Open AtkinsSJ opened 3 weeks ago

AtkinsSJ commented 3 weeks ago

The CSS cursor property can accept either a keyword for a named cursor, or a url for an arbitrary image to use as the cursor. Currently, we parse both, but completely ignore urls:

https://github.com/LadybirdBrowser/ladybird/blob/7f50f65ab560c19b49a00ba25550b0f4903921c7/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp#L803-L807

As an example:

<!doctype html>
<style>
.catdog {
    cursor: url("https://raw.githubusercontent.com/SerenityOS/serenity/2a19fb526145eaf2275d140d51ef303287bcab52/Base/res/graphics/catdog/still.png");
}
</style>
<p>Hello!</p>
<p class="catdog">Hover this paragraph for a catdog cursor</p>
<p>But not this one</p>

I don't think we can actually use a test for this though, because the cursor won't appear in screenshots.

anthonygedeon commented 3 weeks ago

I'll start working on this