1849602 - clip-path: <geometry-box> fail when border-radius > 0

Status: NEW

(Core :: Layout, defect)

Description

[Ana Tudor]

Attachment: clip-path-geometry-box+radius.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/116.0

Steps to reproduce:

1. Create a div with non-zero margin, border-width, padding, height.

2. Try out various <geometry-box> values for clip-path.

3. Set a border-radius that's > 0.

Actual results:

The clip-path does not follow the border-radius.

Live test https://codepen.io/thebabydino/pen/yLGyBrw

Expected results:

The clip-path should follow the border-radius in this case. This is what happens in Safari. Chrome doesn't yet support clip-path: <geometry-box> yet (bug https://bugs.chromium.org/p/chromium/issues/detail?id=694218), but it looks like it's being worked on, including the non-zero border-radius case (https://chromium-review.googlesource.com/c/chromium/src/+/4784067).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Jim Mathies [:jimm]]

Buggy rendering issue. Web compat. If there's an easy fix seems worth the effort.

Comment 3

[Bob Hood [:bhood]]

Initial eval suggests it's not graphics. Sending over to Layout to have take a look.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case from comment 0

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Attachment: WIP: Bug 1849602 - Account for border-radius in clip-path: <geometry-box>. r=boris

TODO: Needs WPT tests, and needs to account for padding / border for the
radii.