[csswg-drafts] [css-masking] Not clear how clip-path applies to fragmented elements (#6383)

heycam has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-masking] Not clear how clip-path applies to fragmented elements ==
https://drafts.fxtf.org/css-masking-1/#the-clip-path

I don't see anything in the CSS Masking spec that defines how clip-path interacts with box-decoration-break, or more broadly how multiple fragments influence the clipping that's applied. My expectation is that it would work like masks, where the reference box (specified in the clip-path property, unlike for masks where it's in mask-origin) is either computed separately for each fragment (when box-decoration-break is slice) or once over a hypothetical unfragmented box (when box-decoration-break is clone).

There's a very brief reference to box-decoration-break in https://drafts.fxtf.org/css-masking-1/#mask-positioning-area but nothing similar for clip-path.

[Here's a test that doesn't have interop](https://codepen.io/heycam/pen/poeqEEv):

* Safari applies a single clip to both fragments, and uses the bounding box of the fragments as the reference box.

<img width="339" alt="Screen Shot 2021-06-15 at 2 29 24 pm" src="https://user-images.githubusercontent.com/1484434/121993020-185f4100-cde6-11eb-820b-490949a7070c.png">

* Firefox applies a single clip to both fragments, and uses the content(?) box of the second fragment as the reference box.

<img width="333" alt="Screen Shot 2021-06-15 at 2 29 46 pm" src="https://user-images.githubusercontent.com/1484434/121993048-257c3000-cde6-11eb-8caf-02c88351f538.png">

* Chrome applies a single clip to both fragments, and uses the content(?) box of the first fragment as the reference box.

<img width="337" alt="Screen Shot 2021-06-15 at 2 30 04 pm" src="https://user-images.githubusercontent.com/1484434/121993068-2f059800-cde6-11eb-840b-fae8eba71ae5.png">

The way I guess it should work is:

* For the `box-decoration-break: slice` case, the `inset(25% 2ch 25% 0)` would first be applied to the unfragmented element, which would result in both fragments having their top and bottom quarters chopped off and the second fragment having its last two characters chopped off. The blue border should be shown on the left of the first fragment, since the default reference box for the clip-path should be the border box.
* For the `box-decoration-break: clone` case, both fragments would have their top and bottom quarters chopped off and both would have their last two characters chopped off. The blue border should be shown on the left of both fragments, since the default reference box for the clip-path should be the border box.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6383 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 15 June 2021 04:32:01 UTC