Chrome Version: Version 68.0.3440.7 (Official Build) dev (64-bit)
OS: Ubuntu 18.04

What steps will reproduce the problem?
(1) Visit https://jsfiddle.net/mz2Lf4wj/
(2) Compare the adjacent "2" and "3" lines.

What is the expected result?
They should look the same, aside from the word "INSIDE" being painted on line 3.  In other words -- quoting the spec: "When laying out [an element with contain:size], it must be treated as having no contents." https://drafts.csswg.org/css-contain/#containment-size

What happens instead?
 - For line 3 under "button", contain:size seems to only make the button's *height* collapse. But the button's width and baseline are still determined based on its contents.

The bottom half (the "inline-block" section) is a semi-reference case for the top half -- it demonstrates (in Chrome) how size containment is *supposed* to work. In that part, my expectations are met. But in the top half, for <button>, they are not met.

Please use labels and text to provide additional information.

If this is a regression (i.e., worked before), please consider using the
bisect tool (https://www.chromium.org/developers/bisect-builds-py) to help
us identify the root cause and more rapidly triage the issue.

For graphics-related bugs, please copy/paste the contents of the about:gpu
page at the end of this report.


 

Chrome Version: Version 68.0.3440.7 (Official Build) dev (64-bit)
OS: Ubuntu 18.04

What steps will reproduce the problem?
(1) Visit https://jsfiddle.net/mz2Lf4wj/
(2) Compare the adjacent "2" and "3" lines.

What is the expected result?
They should look the same, aside from the word "INSIDE" being painted on line 3.  In other words -- quoting the spec: "When laying out [an element with contain:size], it must be treated as having no contents." https://drafts.csswg.org/css-contain/#containment-size

What happens instead?
 - For line 3 under "button", contain:size seems to only make the button's *height* collapse. But the button's width and baseline are still determined based on its contents.

The bottom half (the "inline-block" section) is a semi-reference case for the top half -- it demonstrates (in Chrome) how size containment is *supposed* to work. In that part, my expectations are met. But in the top half, for <button>, they are not met.
 

Chrome Version: Version 68.0.3440.7 (Official Build) dev (64-bit)
OS: Ubuntu 18.04

What steps will reproduce the problem?
(1) Visit https://jsfiddle.net/mz2Lf4wj/
(2) Compare the adjacent "2" and "3" lines.

What is the expected result?
Line 2 should look the same as Line 3 (within the button section, as well as within the inline-block section), aside from the fact that the word "INSIDE" will be painted on line 3.  In other words -- quoting the spec: "When laying out [an element with contain:size], it must be treated as having no contents." https://drafts.csswg.org/css-contain/#containment-size

What happens instead?
 - For line 3 under "button", contain:size seems to only make the button's *height* collapse. But the button's width and baseline are still determined based on its contents.

The bottom half (the "inline-block" section) is a semi-reference case for the top half -- it demonstrates (in Chrome) how size containment is *supposed* to work. In that part, my expectations are met. But in the top half, for <button>, they are not met.