[css-contain] contain:paint should use padding box instead of content box

[trchen1033]

@tabatkins

In section 3.4. Paint Containment: "The contents of the element must be clipped to the element’s content box,"
https://www.w3.org/TR/css-contain-1/#containment-paint
https://drafts.csswg.org/css-contain/#containment-paint

Instead of the content box, the actual implementation in Blink uses the padding box, which is more inline with overflow clip.
Also Blink currently doesn't apply inner border radius clip to paint containment, which I feel weird. We should decide what is the intended behavior and document that in the spec, then implement it.

[frivoal]

Instead of the content box, the actual implementation in Blink uses the padding box, which is more inline with overflow clip.

Sounds reasonable to me.

Blink currently doesn't apply inner border radius clip to paint containment, which I feel weird.

It seems to me that css-background does require it:
https://drafts.csswg.org/css-backgrounds-3/#corner-clipping
We could certainly put a note in css-contain (and a test in WPT) to remind people about it. Do you think we need anything more than that?

[AmeliaBR]

Does "contents" (in the context of contents which must be clipped) only include child boxes, or does it include the element itself? If it includes the element itself, I would assume that it would only be clipped to the border-box.

But if contain: paint only clips children, not the element itself, does that mean that the element itself can have border-image, box-shadow, and other effects that spill paint beyond its normal dimensions?

(As far as clipping children goes, I agree that it makes sense to match overflow clipping: to the border-radius-adjusted padding-box.)

[frivoal]

@AmeliaBR If you check overflow:hidden, it clips at the padding edge.
http://jsbin.com/toluzah/edit?html,css,output
I would expect the same to happen here.

So "contents" definitely includes direct in flow content the element itself (as well as out of flow content), but it does not include the element's decorations (border, border images, box shadow, etc).

At least that's my working assumption.

Do implementers have a different understanding?

Is there a less ambiguous term we can use than "contents of the element"

[trchen1033]

+1 that "contents" should exclude element background and box decorations. Also in my opinion contain:paint should not clip the output of stacking context effects such as filter:blur.

In other words, contain:paint is behaviorally equivalent to overriding overflow:visible into overflow:hidden (overflow clip and forcing block formatting context) and transform:none into transform:identity (become containing block for all descendants).

[frivoal]

Agenda+ to confirm that like with the overflow property, we want to clip to the (shaped) padding box, rather than the content box.

(while we're at it, we can confirm that this is not meant to apply to box decorations that live outside of the padding box: border and outline)

[css-meeting-bot]

The Working Group just discussed CSS-Contain, and agreed to the following resolutions:

• RESOLVED: align to overflow:clip behavior

The full IRC log of that discussion

<dael> Topic: CSS-Contain
<florian> github: https://github.com//issues/2223
<dael> florian: currently contain:paint clips tot he content box which is different from overflow. WE should prob use padding box as well.
<dael> florian: WE should be clipping to the shapped padding box like overflow
<dael> fantasai: Can't you invoke overflow clip?
<dael> florian: At some point we defined paint containment to be at computed value time, but we do want the same effect. How it's desc doesn't matter.
<dael> fantasai: I'd say used value time.
<dael> dbaron: Shapped padding box?
<dael> florian: Padding box with border radius applied.
<dael> dbaron: Sounded related to shapes.
<dael> florian: No, it's just a piece of termonology we resolved to add.
<dael> [questions about what we resolved]
<dael> florian: We resolved to add a term, I proposed shaped-padding-box but I'm open to other names.
<astearns> yesterday: https://github.com//issues/2324#issuecomment-380036663
<dael> dbaron: Not crazy about that because it sounds like shapes.
<dael> florian: So the padding box with rounding corners applied and if there's ever other types of corners those as well.
<dael> florian: Resolve to align to overflow:clip behavior?
<dael> Rossen: Obj?
<dael> RESOLVED: align to overflow:clip behavior
<florian> github: https://github.com//issues/2512
<dael> github: https://github.com//issues/2223