Closed Bug 346774 Opened 14 years ago Closed 13 years ago

{inc}select element improperly renders when changing width style attribute

Categories

(Core :: Layout: Form Controls, defect)

1.8 Branch
x86
Windows XP
defect
Not set

Tracking

()

RESOLVED FIXED

People

(Reporter: mattedelman, Unassigned)

References

Details

Attachments

(2 files)

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5

Initial condition:  you have a select element, with a width style of "auto" and write JavaScript to do the following:

Case 1 (starting from initial condition)
1. set width:500px (assumes this will make the element wider than auto width by at least 50px)
2. set width:auto

Result:  The down-arrow is not visible in the newly re-sized (shrunk) select box.

Case 2 (starting from initial condition):

1. set width:50px (assume this makes the select element narrower than the width:auto)
2. set width:auto

Results:  The down-arrow button is still where it was after step 1.  It is within the width of the text box

Reproducible: Always

Steps to Reproduce:
(same as Details)

Initial condition:  you have a select element, with a width style of "auto" and write JavaScript to do the following:

Case 1 (starting from initial condition)
1. set width:500px (assumes this will make the element wider than auto width by at least 50px)
2. set width:auto

Result:  The down-arrow is not visible in the newly re-sized (shrunk) select box.

Case 2 (starting from initial condition):

1. set width:50px (assume this makes the select element narrower than the width:auto)
2. set width:auto

Results:  The down-arrow button is still where it was after step 1.  It is within the width of the text box

You can use the below, saved as an HTML file and opened in the mentioned version of FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>
<form name="theForm">
  <select name="theSelect" style="width:auto">
    <option>This is the first option in the list</option>
    <option>THis is the second option in the list</option>
  </select>
</form>
<p><a href="#" onclick="javascript:document.theForm.theSelect.style.width='500px';">Click for 500 PX</a></p>
<p><a href="#" onclick="javascript:document.theForm.theSelect.style.width='125px';">Click for 125 PX</a></p>
<p><a href="#" onclick="javascript:document.theForm.theSelect.style.width='auto';">Click for AUTO</a></p>

</body>
</html>

Actual Results:  
The results of each test case are mentioned after the test case descriptions.

Expected Results:  
The software should correctly reposition the down-arrow at the left-most part of the bordered area of the select element when the width style attribute is changed programatically.

This "minor" issue is yet another browser quirk to get in the way of what should have been a very straight-forward cross-browser script.
Component: General → Layout: Form Controls
Product: Firefox → Core
QA Contact: general → layout.form-controls
Version: unspecified → 1.8 Branch
This got fixed by the reflow branch landing.  The fix will be in Firefox 3.

Thank you very much for the very clear bug report and the excellent testcase, by the way!
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Depends on: reflow-refactor
Resolution: --- → FIXED
Summary: select element improperly renders when changing width style attribute → {inc}select element improperly renders when changing width style attribute
Added the test to reftest framework.
Flags: in-testsuite+
Pushed by eakhgari@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/a8212bb139a7
Mark 346774-1b.html as fuzzy as well, similar to the other reftests marked as such in bug 725119
Pushed by philringnalda@gmail.com:
https://hg.mozilla.org/mozilla-central/rev/13f49da109ea
Mark 346774-1c.html as fuzzy as well, similar to the other reftests marked as such in bug 725119, a=whac-a-mole
You need to log in before you can comment on or make changes to this bug.