Bug 3898 - Fieldset layout incorrect when styled by CSS
Summary: Fieldset layout incorrect when styled by CSS
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 412
Hardware: Mac OS X 10.4
: P2 Normal
Assignee: Dave Hyatt
URL:
Keywords: HasReduction
Depends on:
Blocks:
 
Reported: 2005-07-07 14:54 PDT by David Blundell
Modified: 2006-09-12 08:04 PDT (History)
1 user (show)

See Also:


Attachments
Safari screenshot showing incorrect rendering (50.31 KB, image/png)
2005-07-07 14:55 PDT, David Blundell
no flags Details
Firefox screenshot showing correct rendering (31.75 KB, image/png)
2005-07-07 14:55 PDT, David Blundell
no flags Details
Explorer screenshot showing correct rendering (38.10 KB, image/png)
2005-07-07 14:56 PDT, David Blundell
no flags Details
Test case as attachment (1.28 KB, application/xhtml+xml)
2005-12-27 14:27 PST, Eric Seidel (no email)
no flags Details
Minimal Testcase (477 bytes, text/html)
2005-12-27 22:28 PST, Joost de Valk (AlthA)
no flags Details
Patch that fixes the bug (3.24 KB, patch)
2006-09-11 23:48 PDT, Dave Hyatt
mjs: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description David Blundell 2005-07-07 14:54:00 PDT
When minimal CSS styling is applied to a form and fieldset, the fieldset layout
is incorrect when rendered by Safari (412).  Firefox 1.0.3 and Explorer 5.2.3
both render correctly.  I will add screenshots to this bug to demonstrate the
problem.  The shortest amount of valid XHTML that I could write to reproduce the
bug follows:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Test</title>
<style type="text/css">
input {margin-left: .5em;float: left;}
fieldset div {clear: both;margin: .1em 0;position: relative;}
label, fieldset div.cr {margin: 0;display: block;width: 13em;text-align:
right;float: left;}
.buttons {text-align: center;float: right;}
</style></head><body>
<form action="login" method="post" id="loginform">
  <fieldset>
    <div>
    <input checked="checked" name="existing" type="radio" value="existing" />
    <label for="user_password">Yes, my password is:</label>
    <input type="password" name="user_password" id="user_password" size="23" />
    </div>
    <div>
    <input name="existing" type="radio" value="new-home" />
    <label for="user_password">No, I would like to create a home account.</label>
    </div>
    <div>
    <input name="existing" type="radio" value="new-business" />
    <label for="user_password">No, I would like to create a business
account.</label>
    </div>
    <div class="buttons">
    <input type="submit" name="login" value="Login &#187;" class="primary" />
    </div>
</fieldset>
</form></body></html>
Comment 1 David Blundell 2005-07-07 14:55:03 PDT
Created attachment 2852 [details]
Safari screenshot showing incorrect rendering
Comment 2 David Blundell 2005-07-07 14:55:51 PDT
Created attachment 2853 [details]
Firefox screenshot showing correct rendering
Comment 3 David Blundell 2005-07-07 14:56:27 PDT
Created attachment 2854 [details]
Explorer screenshot showing correct rendering
Comment 4 Joost de Valk (AlthA) 2005-07-08 10:47:48 PDT
Confirmed, i will attach the code below as a minimal testcase.
Comment 5 Eric Seidel (no email) 2005-12-27 14:27:33 PST
Created attachment 5312 [details]
Test case as attachment
Comment 6 Eric Seidel (no email) 2005-12-27 14:28:25 PST
This really could use some further reduction.
Comment 7 Joost de Valk (AlthA) 2005-12-27 22:28:23 PST
Created attachment 5324 [details]
Minimal Testcase

This is very small, and should allow for some easy fixing :)
Comment 8 Joost de Valk (AlthA) 2005-12-27 22:28:57 PST
Changed NeedsReduction to HasReduction, since i just added it.
Comment 9 Dave Hyatt 2006-09-11 23:45:49 PDT
This is a fun bug.  Apparently there's an unspecified behavior for fieldsets, which is that they behave in a fashion similar to floats.  If the height of a fieldset is auto then it expands to encompass overhanging floats (just as an enclosing float might).

This would be an interesting thing to note in the HTML5 WhatWG spec, as this behavior is not documented anywhere that I can find.
Comment 10 Dave Hyatt 2006-09-11 23:48:27 PDT
Created attachment 10510 [details]
Patch that fixes the bug

Create a new method, allowOverhangingFloats(), and better factor the code so that fieldsets and table cells can subclass for their respective specialized behaviors.
Comment 11 Maciej Stachowiak 2006-09-12 00:04:53 PDT
Comment on attachment 10510 [details]
Patch that fixes the bug

I would consider reversing the sense of allowOverhangingFloats and naming it something like expandsForOverhangingFloats().

In any case r=me
Comment 12 Dave Hyatt 2006-09-12 00:21:57 PDT
Fixed.
Comment 13 David Kilzer (:ddkilzer) 2006-09-12 08:04:09 PDT
(In reply to comment #12)
> Fixed.

In r16319.  Tests in r16320.