Bug 209656 – <button> should support display:inline-grid/grid/inline-flex/flex correctly

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Carlos Alberto Lopez Perez]

It seems WebKit its not following the spec https://html.spec.whatwg.org/multipage/rendering.html#button-layout regarding <butoon> elements when computing the value of 'display' property for the cases of 'inline-grid', 'grid', 'inline-flex', or 'flex',

This is covered (at least) by WPT tests css/css-grid/grid-model/grid-button-001.html and html/rendering/widgets/button-layout/grid.html

Run this tests live:
https://wpt.live/css/css-grid/grid-model/grid-button-001.html
https://wpt.live/html/rendering/widgets/button-layout/grid.html

There is also a manual test on

A similar issue (if not the same) has been reported and fixed in Chromium recently. Check: https://bugs.chromium.org/p/chromium/issues/detail?id=700029
Check also the test case from that Chromium bug: http://jsbin.com/lenupa/1/edit?html,css,output (the text inside the button element should NOT be vertically centered)

[Carlos Alberto Lopez Perez]

Also covered by WPT test html/rendering/widgets/button-layout/flex.html

https://wpt.live/html/rendering/widgets/button-layout/flex.html

[Manuel Rego Casasnovas]

I think this is a duplicate of bug #127247.

[Carlos Alberto Lopez Perez]

*** Bug 212206 has been marked as a duplicate of this bug. ***

[Carlos Alberto Lopez Perez]

(In reply to Manuel Rego Casasnovas from comment #2)
> I think this is a duplicate of bug #127247.

Likely. But I will mark the other as duplicate of this, since this bug report (even when newer) has more info about the problem.

[Carlos Alberto Lopez Perez]

*** Bug 127247 has been marked as a duplicate of this bug. ***

[Sergio Villar Senin]

Created attachment 406776 [details]
Patch

[Sergio Villar Senin]

Committed r265851: <https://trac.webkit.org/changeset/265851>

[Radar WebKit Bug Importer]

<rdar://problem/67400123>