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/

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.

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...

https://hg.mozilla.org/mozilla-central/rev/106fddd04916