LibWeb: Support `clip-path` CSS property
This is used on GitHub to draw the little left-facing triangle next to a comment block:
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:
Ladybird:
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.)
There is an implementation of exactly that done for the HTML CRC2D, it can probably be moved to some more reusable helper.
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 :))