Bug 13610 – Form elements on Hotwire.com Hot Fare Alert email render incorrectly

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Evangelism

[David Kilzer (:ddkilzer)]

*SUMMARY
The "Find bargain rooms" section of Hotwire.com's Hot Fare Alert email message renders incorrectly in two areas:  (1) the input text field is too wide and (2) the pop-up menus are too narrow.

*STEPS TO REPRODUCE
1. Open Safari/WebKit.
2. Open test case.

*EXPECTED RESULTS
(1) The input text field should not be so wide as to break layout of the "Find bargain rooms" box.
(2) The pop-up menus should be wide enough to display their contents.

*ACTUAL RESULTS
(1) The input text field is rendered too wide.
(2) The pop-up menus are rendered too narrow.

*REGRESSION
This is NOT a regression from shipping Safari 2.0.4 on Mac OS X 10.4.9 (8P135).  In fact, it's a slight progression as the pop-up menus show slightly more with ToT WebKit.

*NOTES
Reproduced with a local debug build of WebKit r21281 with the above software.

[David Kilzer (:ddkilzer)]

*MORE NOTES
- This bug may need to be split to handle the input text field and the pop-up menus separately.
- For the input text field, although the size attribute is set to 22, both Opera 9.10 and Firefox 2.0.0.3 shorten it to 20 characters to make it fit within the bounds of the "Find bargain rooms" area.

[David Kilzer (:ddkilzer)]

Created attachment 14393 [details]
Test case (mbox format)

This is the mail message as sent by Hotwire.com (more or less).

Interestingly, the input text field renders fine within Mail 2.1 (752/752.2)!  The pop-up menus are still too narrow, though.

To import into Mail:

1. Save attachment to desktop.
2. Launch Mail.
3. Select "Import Mailboxes..." from the "File" menu.
4. Select the "Other" radio box.
5. Click "Continue" button.
6. Navigate to the Desktop folder.
7. Click "Choose" button.
8. Make sure only bug-13610-text.mbox is checked.
9. Click "Continue" button.
10. Mail message should now be in an "Imported" folder in Mail.

[David Kilzer (:ddkilzer)]

Created attachment 14394 [details]
Test case (raw HTML from message)

This is the "raw" HTML from the message itself.

Note that the input text field is fine.  Looks like Yahoo! Mail is affecting it via stylesheet.

The pop-up menus are still too narrow.

[David Kilzer (:ddkilzer)]

Created attachment 14395 [details]
Test case (web page, complete; zipped)

Hotwire.com mail message inside Yahoo! Mail, saved from Firefox 2.0.0.3 as "web page, complete" format.

Note that input text field renders too wide.  Pop-up menus are still too narrow.

Also note that the background of the input text field has turned yellow (even in Safari).  This must be a side-effect of viewing/saving the message from Firefox.

[David Kilzer (:ddkilzer)]

Created attachment 17450 [details]
Reduced test case

The issue here is that the "startMonth" <select> element has a style of "width: 51px;" and the "startDay" <select> element has a style of "width: 40px;", both of which are too narrow for WebKit.

This is an evangelism issue since Hotwire.com needs to change the width of the <select> elements (or the font size) for them to render correctly with WebKit.

[David Kilzer (:ddkilzer)]

(In reply to comment #5)
> Created an attachment (id=17450) [edit]
> Reduced test case
> 
> The issue here is that the "startMonth" <select> element has a style of "width:
> 51px;" and the "startDay" <select> element has a style of "width: 40px;", both
> of which are too narrow for WebKit.
> 
> This is an evangelism issue since Hotwire.com needs to change the width of the
> <select> elements (or the font size) for them to render correctly with WebKit.

Note that the "startDay" <select> element has changed from "width: 40px;" to "width: 42px;" in recent emails from Hotwire, but this still isn't wide enough for WebKit.

Also note that the <font> tag surrounding the two <select> tags has no effect on the font size used in the <select> elements.

[David Kilzer (:ddkilzer)]

(In reply to comment #6)
> > This is an evangelism issue since Hotwire.com needs to change the width of the
> > <select> elements (or the font size) for them to render correctly with WebKit.
> 
> Note that the "startDay" <select> element has changed from "width: 40px;" to
> "width: 42px;" in recent emails from Hotwire, but this still isn't wide enough
> for WebKit.

My testing reveals that "startMonth" should be 52px wide while "startDay" should be 44px wide with the current font and font-size.

<select name="startMonth" style="width: 52px;">
<select name="startDay" style="width: 44px;">

[David Kilzer (:ddkilzer)]

Similar to Bug 14454 for date fields on United.com.