Closed Bug 1758665 Opened 9 months ago Closed 8 months ago

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

Categories

(Toolkit :: Form Autofill, defect, P3)

Firefox 100
Desktop
All
defect

Tracking

()

VERIFIED FIXED
101 Branch
Tracking Status
firefox98 --- wontfix
firefox99 --- wontfix
firefox100 --- wontfix
firefox101 --- verified

People

(Reporter: hani.yacoub, Assigned: emilio)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [fxcm-quality-compat-form-autofill])

Attachments

(2 files)

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.

Priority: -- → P3

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?

Flags: needinfo?(emilio)
Whiteboard: [fxcm-quality-compat-form-autofill]

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?

Assignee: nobody → emilio
Status: NEW → ASSIGNED
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b9bd22d5a097
Reorganize placeholder/editor/preview styles. r=tgiles

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

Flags: needinfo?(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.

Flags: needinfo?(emilio) → needinfo?(sledru)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/6e296387dc26
Reorganize placeholder/editor/preview styles. r=tgiles

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!

Flags: needinfo?(sledru) → needinfo?(mcastelluccio)

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?

Flags: needinfo?(mcastelluccio) → needinfo?(jmaher)

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.

Flags: needinfo?(jmaher)

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

Flags: needinfo?(emilio)
Backout by mlaza@mozilla.com:
https://hg.mozilla.org/mozilla-central/rev/ba973417adb8
Backed out changeset b9bd22d5a097 for causing reftest failures on autofill-preview-line-height.html. CLOSED TREE
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/2e3b9ff1ee88
Reorganize placeholder/editor/preview styles. r=tgiles
Status: ASSIGNED → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → 101 Branch

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.

Flags: needinfo?(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).

Flags: needinfo?(emilio) → needinfo?(tgiles)

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

Flags: needinfo?(tgiles)
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.