Bug 292822

Summary:

[button-layout] display: flex cause text not being centered in input type button

Product:

WebKit

Reporter:

Ahmad Saleem <ahmad.saleem792>

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar, WPTImpact

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Bug Depends on:

Bug Blocks:

292847, 292848

Attachments:

Description	Flags
Patch	none
Patch	none
Patch	none
[fast-cq]Patch	none

Ahmad Saleem

Reported 2025-05-10 12:16:52 PDT

Hi Team, While trying to find out WebKit / Safari specific failures on WPT, I noticed that we are failing this test case: WPT Test Case: https://wpt.fyi/results/html/rendering/widgets/button-layout/anonymous-button-content-box.html?label=experimental&label=master&aligned WPT Live Link: http://wpt.live/html/rendering/widgets/button-layout/anonymous-button-content-box.html Reduction: https://jsfiddle.net/5fyhbsz9/ ^ Removing `float: left' makes it match other browsers. Hence I named it like that but could be any other reason as well. Safari differ from Firefox and Chrome here. Just raising, so we can track it. If it is dupe to already raised bug, we can mark it duplicate as well. Thanks!

Attachments
Patch (7.67 KB, patch) 2025-05-11 16:07 PDT, alan	no flags	Details Formatted Diff Diff
Patch (3.66 KB, patch) 2025-05-11 19:45 PDT, alan	no flags	Details Formatted Diff Diff
Patch (4.13 KB, patch) 2025-05-12 05:47 PDT, alan	no flags	Details Formatted Diff Diff
[fast-cq]Patch (4.13 KB, patch) 2025-05-12 05:58 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (3) View All Add attachment proposed patch, testcase, etc.

alan

Comment 1 2025-05-11 07:16:18 PDT

>^ Removing `float: left' makes it match other browsers. really? I must be missing something here as 'float: left' should not have any impact on the content inside, and does not according to my local testing, while removing 'display: flex' fixes the input, which makes a lot more sense as display property drives content layout here.

Ahmad Saleem

Comment 2 2025-05-11 07:23:03 PDT

(In reply to zalan from comment #1) > >^ Removing `float: left' makes it match other browsers. > really? I must be missing something here as 'float: left' should not have > any impact on the content inside, and does not according to my local > testing, while removing 'display: flex' fixes the input, which makes a lot > more sense as display property drives content layout here. Ignore me - I think I might have mixed it with another different tab.

alan

Comment 3 2025-05-11 16:07:46 PDT

Created attachment 475186 [details] Patch

alan

Comment 4 2025-05-11 16:08:03 PDT

Let's see what breaks.

alan

Comment 5 2025-05-11 19:20:16 PDT

no breaks at all. amazing.

alan

Comment 6 2025-05-11 19:45:49 PDT

Created attachment 475187 [details] Patch

alan

Comment 7 2025-05-12 05:47:25 PDT

Created attachment 475196 [details] Patch

Antti Koivisto

Comment 8 2025-05-12 05:51:19 PDT

Comment on attachment 475196 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=475196&action=review > COMMIT_MESSAGE:1 > +[button-layout] dispaly:flex cause text not being entered in input type button spelling dispaly

alan

Comment 9 2025-05-12 05:58:12 PDT

Created attachment 475197 [details] [fast-cq]Patch

EWS

Comment 10 2025-05-12 08:10:49 PDT

Committed 294785@main (a5b74fd0d393): <https://commits.webkit.org/294785@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 475197 [details].

Radar WebKit Bug Importer

Comment 11 2025-05-12 08:16:16 PDT

<rdar://problem/151148821>

Note You need to log in before you can comment on or make changes to this bug.