WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
169271
[css-flex][css-grid] Stretched button doesn't use the whole space
https://bugs.webkit.org/show_bug.cgi?id=169271
Summary
[css-flex][css-grid] Stretched button doesn't use the whole space
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
Details
Formatted Diff
Diff
Patch
(5.09 KB, patch)
2020-05-28 14:54 PDT
,
Oriol Brufau
no flags
Details
Formatted Diff
Diff
Patch
(5.15 KB, patch)
2020-05-29 14:28 PDT
,
Oriol Brufau
no flags
Details
Formatted Diff
Diff
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.
Top of Page
Format For Printing
XML
Clone This Bug