196673 - Setting percentage font in select and option causes size mismatch in dropdowns

Status: VERIFIED INVALID

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

Description

[Felix Miata]

2003030912 OS/2 trunk (not new)

To reproduce:
1-in userContent.css set 'option, select { font-family: helv !important;
font-weight: normal !important; font-size: [Xem or X%] !important; }'
2-open Mozilla
3-open a show_bug.cgi page

Actual results:
1-option selected is 1pt larger than the other options
2-option selected box height is set 1pt shorter than necessary to fit the text

Expected results:
1-option selected is same size as the other options
2-option selected text fits within its box

Notes:
With the default font WarpSans for option & select, there is only one size, so
you don't see the problem.
If you set the font size in pt instead of em or %, the sizes of option selected
and other options match (no problem).
I looked in res/forms.css and couldn't spot anything responsible for this.

Screenshot to follow.

Comment 1

[Felix Miata]

Attachment: 1024x768 screenshot

Comment 2

[Felix Miata]

Recreate was incomplete. Add to user.js:

     user_pref("font.size.variable.x-western", 17);

Bug 187093 explains why I set font size this way and why I set default to 17px.

Comment 3

[Mike Kaply [:mkaply]]

What does this mean?

[Xem or X%]

What value are you using?

Incidentally, with the new platform-forms.css code, 
WarpSans is no longer the default for dropdowns.

Comment 4

[Felix Miata]

X, the universal variable. [A or B] means pick one (an em value or a % value). I
think the screenshot was made using 90%, or .85em or thereabouts. Rather than
typing [.85em or 90%], I gave you a choice to not use px and not use pt but to
select your own size.

My object was to make Helv small enough to not bold in either select or option.
I'm currently using 8pt, since 9pt gets you 10pt, which is bold.

When I deleted userContent.css to see what the defaults were I noticed how big
things were compared to not so long ago. Didn't notice platform-forms.css until
your bugmail.

Indirectly the object of the exercise was to try to keep the scrollbar on the CC
list from virtually always being off the bug page screen. 8pt select/option
seems to have done the trick, with a little assist from .92em input and textarea.

Comment 5

[Mike Kaply [:mkaply]]

Actually, this bug has only to do with setting percentage on option and select
simultaneously, and it is cross platform.

I have put up a testcase at:

http://www.kaply.com/work/bugzilla/196673/

Incidentally, for the behavior you want, just set the font for option (not
select) and it will work like you think.

Comment 6

[Mike Kaply [:mkaply]]

Per discussion with Hixie, this is working as designed.

mkaply: per css2, behaviour of css on form elements is undefined. Per what I
would like us to do, the options in the list should end up with a font of 2.25em
the select's parnet, and the text in the box at the top (the selected option
bit) would be at 1.5em the select's parent.

So you would expect that this would happen.

The solution is to just set select in CSS, don't set option.

Comment 7

[Felix Miata]

I've been using the following since filing this bug: 

option, select {font-family: helv !important; font-weight: normal !important;
font-size: 8pt !important; line-height: normal !important;}  /* picklists */

It works beautifully using 120 DPI.

Parnet (parent)? 2.25em? 1.5em? Most of comment 6 is clear as mud. Why would you
want humongous select lists? Why should list elements not be the same size as
the selected? If the official Mozilla position is to make selected larger, would
the better override simply be to use inherit?

Why is this invalid?

Comment 8

[Mike Kaply [:mkaply]]

Essentially what setting font on select and option does is set the font on
option to 150% and then when you set it on option, it inherits the select font
and then sets that to 150%.

So you get 150% for the first dropdown and 225% for everything else (which is
expected)

You've said "Make selects 150% and then make the options in them 150% of that"

Comment 9

[Felix Miata]

In comment 6 was said:

"I would like us to do, the options in the list should end up with a font of
2.25em the select's parnet, and the text in the box at the top (the selected
optionbit) would be at 1.5em the select's parent."

I understand how inheritance works. What I don't understand is a desire for
default Mozilla behavior for these large sizes as default behavior. Is this mere
hypothetical for select<->option inheritance illustration?

Your comment 5 testcase didn't specify I was supposed to have no userContent.css
rules to override option and select, so it provided no clue that option
inherited from select, which only became apparent in comment 8. The fact that
select inherits from option is what makes the bug invalid. -> v