Bug 169271

Summary: [css-flex][css-grid] Stretched button doesn't use the whole space
Product: WebKit Reporter: Manuel Rego Casasnovas <rego>
Component: Layout and RenderingAssignee: Oriol Brufau <obrufau>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, clopez, ews-watchlist, hyatt, jfernandez, obrufau, rego, simon.fraser, svillar, webkit-bug-importer, youennf, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=212493
Attachments:
Description Flags
Example to reproduce the issue
none
Image diff after running run-webkit-tests
none
Patch
none
Patch
none
Patch none

Manuel Rego Casasnovas
Reported 2017-03-07 04:32:03 PST
Created attachment 303641 [details] Example to reproduce the issue This seems a bug as a flex/grid item button that is stretched doesn't use the whole space available, it's a bit smaller. Check the attached example, the first button has a size of 200x200; and it's a little bit bigger than the 2nd (flex) and 3rd (grid) buttons which have a size of 196x196.
Attachments
Example to reproduce the issue (492 bytes, text/html)
2017-03-07 04:32 PST, Manuel Rego Casasnovas 		no flags
Details
Image diff after running run-webkit-tests (3.16 KB, image/png)
2017-03-07 05:28 PST, Manuel Rego Casasnovas 		no flags
Details
Patch (4.13 KB, patch)
2020-05-28 05:57 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Patch (5.09 KB, patch)
2020-05-28 14:54 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Patch (5.15 KB, patch)
2020-05-29 14:28 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.
Manuel Rego Casasnovas
Comment 1 2017-03-07 04:37:58 PST
Once this is fixed, the following test should be passing too: imported/w3c/csswg-test/css-grid-1/grid-items/grid-items-sizing-alignment-001.html
Manuel Rego Casasnovas
Comment 2 2017-03-07 05:28:57 PST
Created attachment 303646 [details] Image diff after running run-webkit-tests This is the image diff if I create a simple layout test like: <!DOCTYPE html> <div style="display: flex; align-items: stretch; width: 200px; height: 200px;"> <button style="flex: 1;">test</button> </div> And use as -expected this: <!DOCTYPE html> <button style="width: 200px; height: 200px;">test</button>
Oriol Brufau
Comment 3 2020-05-27 13:02:42 PDT
It seems that WebKit adds some margin to each side of a button if the size property in that axis is intrinsic and no margin declaration has been set: static void addIntrinsicMargins(RenderStyle& style) { // Intrinsic margin value. const int intrinsicMargin = clampToInteger(2 * style.effectiveZoom()); // FIXME: Using width/height alone and not also dealing with min-width/max-width is flawed. // FIXME: Using "hasQuirk" to decide the margin wasn't set is kind of lame. if (style.width().isIntrinsicOrAuto()) { if (style.marginLeft().hasQuirk()) style.setMarginLeft(Length(intrinsicMargin, Fixed)); if (style.marginRight().hasQuirk()) style.setMarginRight(Length(intrinsicMargin, Fixed)); } if (style.height().isAuto()) { if (style.marginTop().hasQuirk()) style.setMarginTop(Length(intrinsicMargin, Fixed)); if (style.marginBottom().hasQuirk()) style.setMarginBottom(Length(intrinsicMargin, Fixed)); } } I think the easiest solution is adding 'margin: 0' to the test.
Oriol Brufau
Comment 4 2020-05-28 05:57:46 PDT
Created attachment 400447 [details] Patch
Manuel Rego Casasnovas
Comment 5 2020-05-28 07:06:24 PDT
Comment on attachment 400447 [details] Patch Thanks, r=me
Oriol Brufau
Comment 6 2020-05-28 07:23:40 PDT
I guess I will have to disable the test in iOS, https://ews-build.webkit.org/results/iOS-13-Simulator-WK2-Tests-EWS/r400447-18600/results.html
Manuel Rego Casasnovas
Comment 7 2020-05-28 14:25:51 PDT
(In reply to Oriol Brufau from comment #6) > I guess I will have to disable the test in iOS, > https://ews-build.webkit.org/results/iOS-13-Simulator-WK2-Tests-EWS/r400447- > 18600/results.html Sounds good to me.
Oriol Brufau
Comment 8 2020-05-28 14:54:49 PDT
Created attachment 400509 [details] Patch
Oriol Brufau
Comment 9 2020-05-29 14:28:43 PDT
Created attachment 400617 [details] Patch
EWS Watchlist
Comment 10 2020-05-29 14:29:16 PDT
This patch modifies the imported WPT tests. Please ensure that any changes on the tests are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Oriol Brufau
Comment 11 2020-05-29 14:30:48 PDT
I don't get how the patch can make api-gtk fail, let's see if the rebase fixes it.
EWS
Comment 12 2020-05-29 19:10:12 PDT
Committed r262333: <https://trac.webkit.org/changeset/262333> All reviewed patches have been landed. Closing bug and clearing flags on attachment 400617 [details].
Radar WebKit Bug Importer
Comment 13 2020-05-29 19:11:16 PDT
<rdar://problem/63782652>
Note You need to log in before you can comment on or make changes to this bug.