Support the `clip-path` property

[nicoburns]

We should support the clip-path property:

• https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
• https://drafts.fxtf.org/css-masking/#the-clip-path

Our underlying rendering engine(s) support arbitrary paths as clips so this mostly be a matter of:

• Translating Stylo's ClipPath into a Kurbo impl Shape
• Some logic to resolve the path against the specific geometry-box

Tricky cases could be left out of the initial implementation.

[gautam1168]

Hey, I just finished reading the rust book and I think I got this working. I was pretty excited to finally get that image inside a circle... but I also only have the circle working so far.

The code is:

use dioxus::prelude::*;

fn main() {
    mini_dxn::launch(app);
}

fn app() -> Element {
    rsx! {
        style { {CSS} }
        img { 
            class: "image",
            src: "https://images.dog.ceo/breeds/pitbull/dog-3981540_1280.jpg" 
        }
    }
}

const CSS: &str = r#"
.image {
    clip-path: circle(40%);
}
"#;

I'll be working on this over the weekend and see how far I can get.

[nicoburns]

Awesome! Feel free to send a PR for just circles if you want :)

[gautam1168]

I got the polygons, ellipses, rects etc working too. What Im struggling with are Paths. Its just becoming a huge function where Im converting from stylo's paths to bezeir paths in kurbo. Ill try to open a PR by monday.

[nicoburns]

Its just becoming a huge function where Im converting from stylo's paths to bezeir paths in kurbo

I think this is about what I'd expect. It'll probably be quite a big function, but hopefully also quite simple because it should mostly be a 1:1 translation?

[gautam1168]

Yes, most of the things are pretty straightforward 1:1 mappings. The one thing that is kind of longer is when the clip-path is specified as a path:

clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

In this case stylo will provide a GenericBasicShape::PathOrShape. And if the path here contains an Arc, I have to convert the parameters in the end parametrization to the center parametrization format for kurbo::Arc to work. The different parametrizations are described here (conversion is in section B.2.4): https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes

Its just PathOrShape style values that are taking me down a rabbithole. I also think that I might just be writing rust in a way that is making things longer than they have to be.

Ill just get this path specification thing to work and then open a PR tagged as WIP to get some feedback.

[gautam1168]

Sorry for being a week late. I’m opening this pull request now so you can check whether the direction I’m taking is reasonable and not drifting into something unmergeable.

The blast radius for this feature should not change much from this point, but the code is not ready to merge yet.

Before removing the WIP label, I plan to:

• Fix path, shape, inset and bounding box syntax support for clip-path in CSS. I have written the code that I think would implement these, but some cases currently have no effect or clip out everything. Probably because of logical errors in my code.
• Clean up the code. Right now its in a rough state—just enough to compile—but I expect to rewrite most of it.

Please let me know if the scope of impact still matches your expectations. I’ll adjust my approach if needed.