1698043 - Input Field of type Number, placeholder blocked by arrows if text-align:right

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, defect)

Description

[czwkoh]

Attachment: firefoxTestNoVal.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36

Steps to reproduce:

Steps to reproduce:
(1) Run a simple html page with a input with properties type="number" and placeholder = "0"
(2) Set input css to text-align: right
(3) View it with the browser

Actual results:

Condition: when the input has no value -
The placeholder is aligned right, parked just left beside the arrows of the number input field

Expected results:

Condition: when the input has no value -
The placeholder is aligned right, but hidden behind the arrows of the number input field. Hiding the arrows with css will show it is behind the arrow.
Adding actual values will cause the values to appear normally.

Attached Image shows a input with type number and text-align: right

This bug happens in chrome 89.0.4389.82 as well (you have to hover to see it get blocked) but does not happen in Safari.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Kagami Rosylight [:saschanaz] (they/them)]

data:text/html,<input type=number placeholder=0 style="text-align:right">

Confirmed. Looks like this is covered by nsNumberControlFrame::CreateAnonymousContent:

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1698043 - Manage placeholder and autofill preview visibility using CSS rather than custom code. r=masayuki

Should be much simpler and doesn't need to deal with the different
stuff. We already have pseudo-classes for this, :autofill and
:placeholder-shown.

I initially wrote this because this is the only limitation that forces
us to have the placeholder text as a direct child of the text control
frame. In the end I kept that as-is, but this simplification is still
worth it.

We remove dom.placeholder.show_on_focus because it doesn't behave
correctly (it doesn't match the :placeholder-shown pseudo-class and it
should). It was introduced in bug 807613 and never turned to false by
default. I suspect nobody will miss this, but if somebody complains
about it we can reintroduce it properly (handling the pref in DOM
instead, changing the right state bits).

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1698043 - Simplify <input type=number/search> layout to fix this bug and make ::-moz-complex-control-wrapper unnecessary. r=mats,dholbert,#layout-reviewers

This should be a simpler setup. We keep every element being a direct
anon child of the text control, and special case the reflow of the
spinners / clear button, to subtract that size from the other elements.

This fixes the bug by ensuring that the editor and placeholder are sized
and positioned in exactly the same way.

Depends on D108304

Comment 5

[Phabricator Automation]

Comment on attachment 9208860 [details]
Bug 1698043 - Manage placeholder and autofill preview visibility using CSS rather than custom code. r=masayuki

Revision D108304 was moved to bug 1698315. Setting attachment 9208860 [details] to obsolete.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2bc9ef937528
Simplify <input type=number/search> layout to fix this bug and make ::-moz-complex-control-wrapper unnecessary. r=dholbert

Comment 7

[Atila Butkovits]

Backed out for causing failures on search-with-value.html.

Backout link: https://hg.mozilla.org/integration/autoland/rev/faaf9152446865a143d77e934ba2a70f21de37f5

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&selectedTaskRun=KQl2IVVQSgCFM3t5o818VA.0&revision=2bc9ef937528bf31cebe9d98ef63152a93051c34&searchStr=android%2C7.0%2Cx86-64%2Cwebrender%2Copt%2Creftests%2Ctest-android-em-7.0-x86_64-qr%2Fopt-geckoview-reftest-e10s%2Cr1

Failure log: https://treeherder.mozilla.org/logviewer?job_id=333160528&repo=autoland&lineNumber=35052

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Thanks! that is bug 1698332, will annotate the new test for search inputs as failing on Android for now.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/44eddd702c0a
Simplify <input type=number/search> layout to fix this bug and make ::-moz-complex-control-wrapper unnecessary. r=dholbert

Comment 11

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/44eddd702c0a

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1698043 - Remove dead GetNumberControlFrameForTextField. r=dholbert

There's no anonymous textfield since a long time ago.

Depends on D108654

Comment 13

[Phabricator Automation]

Comment on attachment 9209496 [details]
Bug 1698043 - Remove dead GetNumberControlFrameForTextField. r=dholbert

Revision D108655 was moved to bug 1698821. Setting attachment 9209496 [details] to obsolete.

Comment 14

[James Graham [:jgraham]]

Per discussion on matrix, it looks like we could perhaps upstream some of these tests to wpt.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1698043 - Upstream the test for this bug to WPT. r=#layout-reviewers

Seems like a reasonable thing to expect that the placeholder renders at
the same place as the text it's a placeholder for.

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/536ffb297e79
Upstream the test for this bug to WPT. r=layout-reviewers,jfkthame

Comment 17

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

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

Comment 18

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/536ffb297e79

Comment 19

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

Upstream PR merged by moz-wptsync-bot