New issue
Advanced search Search tips

Issue 855261 link

Starred by 1 user

Issue metadata

Status: Started
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

[css-contain] contain:size doesn't account for grid-template-column/row sizing

Reported by mreschen...@mozilla.com, Jun 21 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36

Steps to reproduce the problem:
1. Visit https://jsfiddle.net/9qcL6frj/3/

What is the expected behavior?
Grid div should render at 100px x 100px when contain:size is applied.

What went wrong?
Grid div renders at 0px tall, 100px wide.

Did this work before? N/A 

Chrome version: 67.0.3396.87  Channel: stable
OS Version: OS X 10.13.4
Flash Version:
 
Components: Blink>Layout>Grid
Labels: Needs-Triage-M67

Comment 3 by r...@igalia.com, Jun 22 2018

Cc: flor...@rivoal.net r...@igalia.com
Labels: -OS-Mac Needs-Feedback
Status: Available (was: Unconfirmed)
Summary: [css-contain] contain:size doesn't account for grid-template-column/row sizing (was: contain:size doesn't account for grid-template-column/row sizing)
BTW, this is renderer as 0x0 since r566228 (https://chromium-review.googlesource.com/1093854).

But I agree this can be wrong, as the spec says (https://drafts.csswg.org/css-contain/#containment-size):
"When laying out the containing element, it must be treated as having no contents."

The example in the jsfiddle is a grid container without items (so an empty grid container):
  <div style="display: inline-grid; border: 1px solid purple;
              grid-template-columns: 100px; grid-template-rows: 100px;">
  </div>

That's rendered as 100x100, but if you add "contain: size" it goes now to 0x0.

I'm not 100% sure what's the intention of the spec here, and if the expected behavior should be 100x100 or 0x0.
With the current spec text I agree that 100x100 is the expected one.
Adding Florian (the spec editor) in CC so he can clarify this.

Comment 4 by flor...@rivoal.net, Jun 22 2018

There's an open bug about that in the csswg.

https://github.com/w3c/csswg-drafts/issues/2804

The spec's intention is that the result should should be 100x100, not 0x0.

As you said, the spec says "When laying out the containing element, it must be treated as having no contents.", so when you apply contain:size to an empty div, it should have no effect, since the div already has no content, regardless of the properties applied to that div itself.

In effect, this is not very different from an empty div with some padding. If you apply contain:size, it will collapse the size of the padding, not to 0.
Owner: r...@igalia.com
Status: Started (was: Available)

Sign in to add a comment