231574 - [FIX]<button> baseline should be adjusted for vertical centering

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Liutauras Juzikënas]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

When BUTTON elements are in DIV container their position is unpredictable and 
worst - BUTTON elements tend to be rendered outside their DIV container 
(lower). It seems that BUTTON position depends on the text in it and text size.
Such behavior apeared in latest Mozilla versions, in version 1.2 it was OK as 
it is in Internet Explorer.

Reproducible: Always

Steps to Reproduce:
1. Create HTML page with code:
<div noWrap style="height: 100px; width: 100%; border: 3px solid; white-space: 
nowrap;">
<button style="height: 100px; width: 100px; background-color: red;"></button>
<button style="height: 100px; width: 100px; background-color: green;"></button>
<button style="height: 100px; width: 100px; background-color: blue; font-size: 
80px;">A</button>
<button style="height: 100px; background-color: yellow;">Jump out of the 
window</button></nobr>
</div>

2. Open created page in Mozilla.
Actual Results:  
All buttons are same height as their div container.
Buttons without text are verticaly displaced by most.
Button with big letter is not displaced.
Button with long text is verticaly displaced.

Expected Results:  
All buttons are same height as their div container and must be verticaly 
aligned at least. All of them should be placed in container if there is place.

Bug is related to CSS.

Comment 1

[Alex Hirzel]

> All buttons are same height as their div container.
Looks like it.

> Buttons without text are verticaly displaced by most.
I don't completly understand.  On my version, the red and green buttons have
about 4/5ths of a button height worth of padding on top.

> Button with big letter is not displaced.
Confirmed.

> Button with long text is verticaly displaced.
Just like the red and green buttons, although it's more like 3/4th of a button
height worth of padding on top.

Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.6) Gecko/20040113

Comment 2

[Alex Hirzel]

Attachment: Testcase

Comment 3

[Boris Zbarsky [:bzbarsky]]

Buttons are baseline-aligned; the baseline of a button is at the bottom of the
first line of text if the button height is not set.  The button moves its text
when the height is set; it should adjust the baseline accordingly.

Note that with the different font sizes that will still NOT lead to the
alignment you want.  If you want that, don't use baseline alignment.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Attachment: Put the baseline in the right place

This leads to completely predictable behavior -- the baseline of the button's
text will be on the baseline of line box (note that the text's baseline
position will still depend on the font-size).

Comment 5

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 139509 [details] [diff] [review]
Put the baseline in the right place

I suppose I could put this after FinishReflowChild, but that shouldn't be
touching aDesiredSize anyway...

Comment 6

[Boris Zbarsky [:bzbarsky]]

Fixed, but see comment 3.