Closed Bug 1585216 Opened 2 months ago Closed Last month

Grid baseline is not preserved correctly when the item that should generate it is <input type=number>

Categories

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

69 Branch
defect

Tracking

()

RESOLVED FIXED
mozilla71
Tracking Status
firefox71 --- fixed

People

(Reporter: caleb, Assigned: mats, NeedInfo)

References

(Depends on 1 open bug)

Details

(Keywords: testcase)

Attachments

(3 files)

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

Steps to reproduce:

Use a CSS grid whose top-left grid area (the one that should determine the baseline) is a number input.

https://codepen.io/chearon/pen/vYBqpmB?editors=1000

Actual results:

In Chrome and Safari, these top example matches the bottom, but in Firefox the bottom of the grid is used as the baseline for the top example.

Expected results:

The baseline of the number input should be used for the grid.

Hi Caleb, I looked over this issue and I don't see the exact problem, I tested with FF Nightly 71.0a1(2019-10-06) on Mac OS X 10.14.
If you are willing you can try on Nightly and see what is the behavior. Please download Firefox Nightly from here: https://nightly.mozilla.org/

Component: Untriaged → CSS Parsing and Computation
Flags: needinfo?(caleb)
Product: Firefox → Core

We should really fix bug 981248 and stop using the silly nested <input> for <input type="number">, probably... But maybe we can patch nsNumberControlFrame to use the right baseline.

Status: UNCONFIRMED → NEW
Component: CSS Parsing and Computation → Layout: Grid
Depends on: 981248
Ever confirmed: true
Component: Layout: Grid → Layout: Form Controls
Attached file Testcase #2

It looks like there's a problem with the <input type=number> block-size too...
In the grid at the top, I see 30px content-box height + 2px padding for the type=number element in devtools, but the grid content-box height is 20px (row size is 20px too). For the first type=text, I see 30px + 2px on the input and 32px grid size.

In the middle example with large font-size on the <input>'s I see 80px + 2px on both, with 82px row size, so it seems to work correctly here. But the baseline alignment doesn't seem to work anyway, so there might be two separate issues at play.

-webkit-appearance:none fixes the sizing issue, but not the baseline issue.

I know how to fix the baseline issue at least so let's fix that first here...

Assignee: nobody → mats
Keywords: testcase
Priority: -- → P3
Pushed by mpalmgren@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/106fddd04916
Propagate the inner text field's baseline as the baseline for a number input.  r=dholbert
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/19633 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Status: NEW → RESOLVED
Closed: Last month
Resolution: --- → FIXED
Target Milestone: --- → mozilla71
Upstream PR merged by moz-wptsync-bot
Flags: in-testsuite+
You need to log in before you can comment on or make changes to this bug.