1905743 - <input type="number"> too narrow when using min & max attributes

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect, P2)

Description

[gentle.dust4318]

Attachment: Firefox 127, 128, and 129 displaying the same HTML file, showing that 128 and 129 cut off the value

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:128.0) Gecko/20100101 Firefox/128.0

Steps to reproduce:

Open an HTML file with a number input with both min and max attributes, such as:

<input type="number" min="1" max="999" value="999">

Observe how the widget is rendered.

Actual results:

The widget's width is too narrow to see all 3 digits of the value.

This regression was introduced by https://bugzilla.mozilla.org/show_bug.cgi?id=1898214 for version 128. Nightly 129.0a1 also has this issue.

Expected results:

The widget's width is wide enough to see all 3 digits of the value.

Safari 18.0 (release 197) and Chrome 128.0.6569.0 both display a widgets wide enough to hold 3 digits. Tested on macOS 14.5.

Comment 1

[gentle.dust4318]

Attachment: HTML used to produce the screenshot

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Cocoa' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1905743 - Handle button box in intrinsic text field sizing. r=#layout!

Comment 4

[Emilio Cobos Álvarez (:emilio)]

[Tracking Requested - why for this release]: cropping content is no fun, let's not let this get to release.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1898214

Comment 6

[Ryan VanderMeulen [:RyanVM]]

Sounds like this is a potential RC respin driver?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1905743 - Unify text control button storage. r=dholbert!

Split out from the other patch for readability. This doesn't change
behavior but unifies where we store the buttons of
number/search/password buttons.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1905743 - Tweak TextControlElement to be able to tell if column count is explicit or not. r=dholbert!

This is needed because we want implicit width of number and text
controls be the same, but explicit width be different to account for the
spinners. See:

data:text/html,<input type="number"><br><input type="text"><br><input type="number" min="1" max="9"><br><input type="text" size="1">

For example. This patch on its own shouldn't change behavior.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1905743 - Add a mozilla-specific WPT test for this. r=dholbert!

We can't put it upstream because whether platforms have spinners is not
defined (we only do that on android for example).

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/aa9dfdbbe902
Unify text control button storage. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/22870b370ca7
Tweak TextControlElement to be able to tell if column count is explicit or not. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/fef6d2c06ec0
Handle button box in intrinsic text field sizing. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/d8a6a456d92e
Add a mozilla-specific WPT test for this. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/b26a356fa191
apply code formatting via Lando

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/46969 for changes under testing/web-platform/tests

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/feae1dd25af8
Tentative fix for no-opt asan builds.

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9410721 [details]
Bug 1905743 - Handle button box in intrinsic text field sizing. r=#layout!

Beta/Release Uplift Approval Request

• User impact if declined: comment 0
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: comment 0
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): There's a bit of refactoring involved but the fix itself is simple and this code has pretty decent test coverage.
• String changes made/needed: none
• Is Android affected?: No

Comment 14

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/aa9dfdbbe902
https://hg.mozilla.org/mozilla-central/rev/22870b370ca7
https://hg.mozilla.org/mozilla-central/rev/fef6d2c06ec0
https://hg.mozilla.org/mozilla-central/rev/d8a6a456d92e
https://hg.mozilla.org/mozilla-central/rev/b26a356fa191
https://hg.mozilla.org/mozilla-central/rev/feae1dd25af8

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox128 to wontfix.

For more information, please visit BugBot documentation.

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 17

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9410721 [details]
Bug 1905743 - Handle button box in intrinsic text field sizing. r=#layout!

Approved for 128.0rc2.

Comment 18

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-release/rev/d952c9440d25
https://hg.mozilla.org/releases/mozilla-release/rev/875c909060fb
https://hg.mozilla.org/releases/mozilla-release/rev/a057e1873319
https://hg.mozilla.org/releases/mozilla-release/rev/09845ff7491e

Comment 19

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-esr128/rev/d952c9440d25
https://hg.mozilla.org/releases/mozilla-esr128/rev/875c909060fb
https://hg.mozilla.org/releases/mozilla-esr128/rev/a057e1873319
https://hg.mozilla.org/releases/mozilla-esr128/rev/09845ff7491e

Comment 20

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Attachment: ss displaying the HTML file

I was able to reproduce the issue on Firefox 128.0b9 and on Firefox Nightly 129.0a1 (2024-07-01) using macOS 14.4, while opening the HTML file from Comment 1.
Verified as fixed on Firefox Nightly 129.0a1 (2024-07-03), using macOS 14.4, Windows 11 and Ubuntu 22.04. The widget’s width is now wide enough to see all 3 digits of the value (attaching a screenshot as well).

Will verify this on the official 128.0-build2 RC and 128.0esr-build 2 when available.

Comment 21

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Verified as fixed on Firefox 128.0-build2 RC (build ID 20240704121409) and on Firefox 128esr-build2 (build ID 20240703235920) using macOS 14.4, Windows 11 and Ubuntu 22.04 as well.