222990 - [FIX]Changing select element style mistakenly alters its height

Status: RESOLVED FIXED

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

Description

[Chris Dolan]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.5) Gecko/20031007
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.5) Gecko/20031007

We have reproduced this bug in Mozilla 1.5 on Mac OSX and Windows 2000.

When JavaScript changes the class of a <select> element, and the subsequent
class has a different hard-coded width value, the height of the select changes.

In our test HTML, we alternate between two styles:
   .large { width: 100px; height: 30px }
   .small { width: 0px }


Reproducible: Always

Steps to Reproduce:
1. Go to the test URL
2. Click "Reduce"
3. Click "Enlarge"

Actual Results:  
The select has a reduced height.

Expected Results:  
The height should not have been affected.

We tried the following potential workarounds, all of which still exhibited the bug:
  * set the height to 30px in the .small style
  * set the width to between 1 and 4 pixels in the .small style

The following change prevented the bug's appearance:
  * set the width to 5 or more pixels in the .small style

Comment 1

[Boris Zbarsky [:bzbarsky]]

Nope, pure reflow bug..

Comment 2

[Boris Zbarsky [:bzbarsky]]

Taking.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Attachment: Fix

You have fallen into a Special Case.... <sigh>

Comment 4

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 133739 [details] [diff] [review]
Fix

roc, would you review?	The problem is that the "width is 0" special case fucks
up the height, and this gets cached.  So we keep losing the borderpadding width
on every iteration...

Comment 5

[Boris Zbarsky [:bzbarsky]]

Fixed.

Comment 6

[Christian :Biesinger (don't email me, ping me on IRC)]

+    aDesiredSize.height = dispHeight + aBorderPadding.top + aBorderPadding.bottom;;

nit: there's one semicolon too much

Comment 7

[Boris Zbarsky [:bzbarsky]]

Doh.  Fixed.