serenity icon indicating copy to clipboard operation
serenity copied to clipboard

LibWeb: Support `clip-path` CSS property

Open trflynn89 opened this issue 1 year ago • 3 comments

This is used on GitHub to draw the little left-facing triangle next to a comment block:

Screenshot_20240316_102053

Reduced example:

<style>
    .comment {
        position: absolute;

        left: 20px;
        width: 100px;
        height: 50px;

        border: 1px solid black;
    }

    .comment::before {
        position: absolute;

        left: -8px;
        width: 8px;
        height: 16px;

        background-color: black;
        content: " ";

        clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }
</style>
<div class=comment></div>

Firefox's rendering of that example: Screenshot_20240316_102152

Ladybird: Screenshot_20240316_102216

trflynn89 avatar Mar 16 '24 14:03 trflynn89

One Implementation Idea is to draw to a temp bitmap, draw the clip path to that temp bitmap's alpha channel, and then just blend the bitmap. There might be faster ways, but this should at least be fairly easy to do.

(We need "clip to path" for LibPDF too; I've almost started implementing the above approach a few times. Eventually I'll get to it, but I won't be mad if someone beats me to it.)

nico avatar Mar 16 '24 16:03 nico

There is an implementation of exactly that done for the HTML CRC2D, it can probably be moved to some more reusable helper.

MacDue avatar Mar 16 '24 21:03 MacDue

See: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/HTML/Canvas/CanvasPathClipper.h (looks like it only depends on LibGfx, so could just be moved there already :))

MacDue avatar Mar 16 '24 21:03 MacDue