1758665 - [UK] Wrong text alignment in the fields while previewing CC information

Status: VERIFIED FIXED

(Toolkit :: Form Autofill, defect, P3)

Description

[Hani Yacoub, Desktop QA]

Attachment: Screenshot 2022-03-09 at 12.04.39.png

Affected versions

Firefox 98.0
Firefox 99.0b1
Firefox 100.0a1

Affected platforms

Windows 10 x64
Ubuntu 20.04 x64
macOS 11.6

Steps to reproduce

1. Open Firefox and set browser.search.region to UK
2. Go to and reach the payment form for johnlewis.com and argos.co.uk
3. Make sure to have a couple of saved credit cards
4. Click on "Card number" field
5. Hover over the saved credit cards and observe the field

Expected result

Text should be correctly aligned while previewing CC information.

Actual Result

Wrong text alignment in the fields while previewing CC information.

Note

The issue isn't reproducible on Google Chrome.

Comment 1

[Tim Giles [:tgiles]]

Hey :emilio, do you have any idea on how to solve this issue? It seems to be that when an input has a defined height we will preview text at the start of the input versus centering the preview text (like Chrome). For example if you use https://mozilla.github.io/form-fill-examples/basic_cc.html and give the name field a height of 48px, we will preview the name at the start of the field while Chrome, on the same page, will preview the text centered. I'm guessing this is a relatively simple fix but I can't find the right rule to modify in forms.css to enforce this kind of behavior. Does it make sense to switch to a centered preview for form autofill, or should we keep it as is and WONTFIX this?

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1758665 - Reorganize placeholder/editor/preview styles. r=tgiles

The main fix is making line-height: -moz-block-height apply to the
preview. The rest is just cleanup, in order to deduplicate selectors.

overflow: hidden was redundant on the preview rule (it was already in
the ::placeholder, ::-moz-text-control-preview).

Not sure what the best way to test this would be, but it's late here...,
thoughts?

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b9bd22d5a097
Reorganize placeholder/editor/preview styles. r=tgiles

Comment 4

[Marian-Vasile Laza]

Backed out changeset b9bd22d5a097 (Bug 1758665) for causing reftest failures on autofill-preview-line-height.html.
Backout link
Push with failures
Failure Log

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Sylvestre, do you know who's on charge of the automatic test selection? https://treeherder.mozilla.org/jobs?repo=try&revision=7c4163ad8422af3f70a006270a984f7987087b6d didn't run the test I added, which is... unfortunate, because it fails only on Windows.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6e296387dc26
Reorganize placeholder/editor/preview styles. r=tgiles

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Huh, I somehow failed to find Marco's email in bugzilla before? Marco I think you're the right person to ping about comment 5 but let me know if not. Thanks!

Comment 8

[Marco Castelluccio [:marco]]

This is the same situation that happened in bug 1762018 (see my answer in bug 1762018 comment 20). layout/reftests/forms/input/text/reftest.list was selected with 99% confidence, but since bug 1608836 isn't fixed yet we don't make use of this information but rely on task selection instead of manifest selection, which is far less precise.

Modified/added tests should be run by test-verify though, which happened in bug 1762018. I'm not sure why no test-verify tasks were run in this try push. Joel, do you know?

Comment 9

[Joel Maher ( :jmaher ) (UTC -8)]

I don't know offhand how test-verify works with edge cases. I believe reftest is an edge case when it comes to test-verify.

Comment 10

[Marian-Vasile Laza]

Backed out changeset 6e296387dc26 (Bug 1758665) for causing reftest failures on autofill-preview-line-height.html.
Backout link
Push with failures
Failure Log

Comment 11

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/ba973417adb8
Backed out changeset b9bd22d5a097 for causing reftest failures on autofill-preview-line-height.html. CLOSED TREE

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2e3b9ff1ee88
Reorganize placeholder/editor/preview styles. r=tgiles

Comment 13

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/2e3b9ff1ee88

Comment 14

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

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?
If not please set status_beta to wontfix.

For more information, please visit auto_nag documentation.

Comment 15

[Emilio Cobos Álvarez [:emilio]]

Your call. I think it's reasonably simple of a fix to uplift if needed (what got me backed out was the font used on Windows for the test).

Comment 16

[Tim Giles [:tgiles]]

No need to uplift this, in my opinion. Thanks for letting me know though.

Comment 17

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

I managed to reproduce this issue on Firefox 100.0(20220428192727) on macOS 11. Verified as fixed on Firefox 101.0b4(20220508185621) and Nightly 102.0a1(20220509190429) on Ubuntu 20.04, macOS 11 and Win10 64-bits.