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

Steps to reproduce:

I want to compose the height of a select element by summing padding to a set line-height, it looks like the line-height is ignored. (There used to be a similar bug affecting only buttons years ago.)

Actual results:

line-height is ignored, final height is not the expected one

Expected results:

Here is an example, it should behave like the second element (GO!).
Same CSS applied to a different element gives the expected result.
https://codepen.io/fabiovenni/pen/LwQpPe?editors=1100

Hi,
I reproduced this issue with css attached on Mac 10.14 with Firefox Release 68, Firefox Beta 69 and Nightly 70.
On Safari and Chrome works as expected.

Hmm, this seems to work fine here both in release and Nightly? Can you attach an screenshot?

Raluca, what exactly could you reproduce? I'm confused :)

This was an issue in the past, but was fixed in bug 1499578.

Hi, retested in FF 68.0.1 and Nightly, bug is still there, I don't seem to be able to attach a screenshot, but if you inspect the codepen you can easily see the button to be 29px tall while the select is 31px, expected behavior is that they have the same height.

(In reply to fabiovenni from comment #3)

Hi, retested in FF 68.0.1 and Nightly, bug is still there, I don't seem to be able to attach a screenshot, but if you inspect the codepen you can easily see the button to be 29px tall while the select is 31px, expected behavior is that they have the same height.

Ok, I can see a slightly different height, thanks. But line-height is not ignored, right? As in, increasing the line-height does increase the height of the <select> and so on. Just trying to reduce the test-case better to show the bug and try to come up with a better title. The bug title was "select line-height ignored" which looks false :)

Was tunnel visioned in the example and I didn't think of changing the value. Yes the title should be "When applied to selects line-height has always 2 pixel added to the expect value (also when is rem, ems or %)"

Ok, so this should be a better test-case that shows the bug.

Ok, I bet these are our two extra pixels:

https://searchfox.org/mozilla-central/rev/c7e8bc4996f979e5876b33afae3de3b1ab4f3ae1/layout/style/res/forms.css#339

ah!

Daniel was looking at this in bug 1560824, but I think it's not as simple as just removing that padding.

FWIW, it's not quite true that other browsers necessarily end up with the exact same height for a <select> and a <button>; e.g. with the codepen from comment 0 in Safari on macOS 10.13, the <select> is slightly taller than the <button>. (It's easier to see the discrepancy if you have them side-by-side on the same line.)

on both Chrome and Safari they have the same height, on Safari they are not perfectly aligned, selects have rounded corners etc, but same height

This fixes it and seems to be an acceptable fix... Should I make it conditional
on box-sizing: border-box for completeness? The display frame has border-box
box-sizing, and not having it would be a bug, I'd think...

Oh, I wrote the patch before reading comment 9 and such.

I'm afraid this also gives a bad result for a native-themed <select>, at least on macOS; see screenshot.

D'oh :(

(In reply to Emilio Cobos Álvarez (:emilio) from comment #14)

D'oh :(

I think I addressed that, though I'm not quite sure it's the right fix here... I'll take a look at what buttons do.

Backed out changeset bd44d2dd0c02 (bug 1571764)for causing web platform test failures on select-1-block-size-001.html CLOSED TREE

Backout revision https://hg.mozilla.org/integration/autoland/rev/725ed668541437310ddcc3fb5aa18e23cfc922b2

Failed push https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=bd44d2dd0c02c1e2ab10e73695ee3ef1da971aa6&selectedJob=261630593&searchStr=windows%2C7%2Cdebug%2Cweb%2Cplatform%2Ctests%2Ctest-windows7-32%2Fdebug-web-platform-tests-reftests-e10s-1%2Cw%28wr1%29

Failure log https://treeherder.mozilla.org/logviewer.html#?job_id=261630593&repo=autoland

Emilio can you please take a look?

https://hg.mozilla.org/mozilla-central/rev/ad04c84153da
https://hg.mozilla.org/mozilla-central/rev/2b01af1b413a
https://hg.mozilla.org/mozilla-central/rev/bd8ef39cfadc