New issue
Advanced search Search tips

Issue 848793 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Jun 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Compat



Sign in to add a comment

Contain:paint does not take rounded corners into account when clipping

Reported by myser...@gmail.com, Jun 1 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0

Example URL:
https://jsfiddle.net/p3kf3689/1/

Steps to reproduce the problem:
1. Create a div with contain:paint enabled.
2. Add a border-radius to same div. (maybe 3em or 4em)
3. Add textual content to the div.

Here is the test case:

https://jsfiddle.net/p3kf3689/1/

What is the expected behavior?
Expected behavior is the clipping of the text to the limits of the container, which should take rounded corners into account according to the spec:

https://drafts.csswg.org/css-contain/#containment-paint

"The contents of the element including both the paint of the descendants and their geometry must be clipped to the padding edge of the element’s principal box, taking corner clipping into account."

What went wrong?
It clipped to the padding box only without considering the rounded corners.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: <Copy from: 'about:version'>  Channel: n/a
OS Version: 10.0
Flash Version:
 

Comment 1 by myser...@gmail.com, Jun 1 2018

Google Chrome	66.0.3359.181 (Official Build) (64-bit) (cohort: Stable)
Revision	a10b9cedb40738cb152f8148ddab4891df876959-refs/branch-heads/3359@{#828}
OS	Windows
JavaScript	V8 6.6.346.32

Labels: Needs-Triage-M66
Components: Blink>Paint
Status: WontFix (was: Unconfirmed)
Works in Chrome 67.

Sign in to add a comment