47739 - [FLOAT] 'clear' property fails on TABLE element

Status: VERIFIED FIXED

(Core :: Layout: Tables, defect, P2)

Description

[Hixie (not reading bugmail)]

The TABLE element does not clear floats when given the 'clear' property.

STEPS TO REPRODUCE:
   See http://www.webstandards.org/css/winie/shame2/floatclear.html
   You may need to force Standards Mode to give Gecko a chance to get it right.

ACTUAL RESULTS:
   It appears that a floated TABLE element doesn't clear previous floats even 
   if it has clear:both.

TESTED ON: 
   Windows 2000 Commercial Build 6.0.17.2000080404.

Comment 1

[Hixie (not reading bugmail)]

Attachment: Very simplifed testcase

Comment 2

[Hixie (not reading bugmail)]

Attachment: Another testcase, with TABLE element not floated.

Comment 3

[Hixie (not reading bugmail)]

It turns out the 'clear' property seems to be simply _not working at all_ for
the TABLE element. How peculiar.

Nominating for nsbeta3; this occurs on a high profile test case (the Web
Standards Project's list of IE complaints) and Microsoft have now fixed this
bug, so it would look particularly bad to be buggy.

The bug itself is quite bad too, as is explained on the test case given in
the URL field.

Comment 4

[Marc Attinasi]

Approving for beta3: into buster's list...

Comment 5

[buster]

This is a bug for either chris or marc.  The problem is the "clear" property is 
getting mapped into the inner table frame's style context, and not getting 
propagated to the outer table frame's style context.  The layout code is 
behaving correctly, given the style it's seeing.  The style context of the frame 
that is floated, the table outer frame, has only the default value for the clear 
property.

I imagine there are other properties that need to be propagated from the inner 
table frame's style context to the outer table frame's style context.  However 
that is done, it should be done for "clear" as well.

For your amusement, here's the relevant part of the style context dump for the 
first test case that contains the floated table with clear set:

            00FCDCA0(5) {
              http://www.w3.org/1999/xhtml|table weight: 1 { display: 8[0x8]enum
 margin-top: 0pt margin-bottom: 0pt box-sizing: 2[0x2]enum border-collapse: 1[0x
1]enum border-x-spacing: 2px border-y-spacing: 2px }
              http://www.w3.org/1999/xhtml|*:first-node > http://www.w3.org/1999
/xhtml|body weight: 257 { margin-top: 0pt }
              *|*.b weight: 256 { background-color: "fuchsia" background-image:
none background-repeat: 3[0x3]enum background-attachment: 0[0x0]enum background-
x-position: 0% background-y-position: 0% float: 1[0x1]enum clear: 3[0x3]enum wid
th: 100px height: 100px }
            }
              00FCE8F0(1) :table-outer {
                *|:table-outer weight: 0 { opacity: inherit display: 8[0x8]enum
float: inherit clip: inherit inherit inherit inherit margin-top: 0px margin-righ
t: 0px margin-bottom: 0px margin-left: 0px padding-top: 0px padding-right: 0px p
adding-bottom: 0px padding-left: 0px border-top-width: 0px border-right-width: 0
px border-bottom-width: 0px border-left-width: 0px border-style: none none none
none position: inherit width: 0px height: 0px z-index: inherit top: inherit righ
t: inherit bottom: inherit left: inherit }
              }

Comment 6

[Marc Attinasi]

Chris, since the outer is a child of the inner this probably should inherit, 
however 'clear' does not inherit by default. Should we make it inherit (via 
html.css) or do you have an internal mechanism for this kind of propagation?

Comment 7

[Hixie (not reading bugmail)]

Looks like the mechanism is html.css:

   :table-outer {
     display: table;
     margin: 0px;
     border: 0px;
     padding: 0px;
     float: inherit;
     position: inherit;
     top: inherit;
     right: inherit;
     bottom: inherit;
     left: inherit;
     z-index: inherit;
     clip: inherit;
     opacity: inherit;
     width:  0px; /* hack for boxes */
     height: 0px; /* hack for boxes */
   }

I can fix that easily when I do the rest of the ua.css changes (this week I 
hope, if the builds remain stable for long enough).

My fix would be to change it to:

   :table-outer {
     display: table;
     margin: 0;
     border: none;                         /* '0' is not useful border value */
     padding: 0;
     width: 0;                             /* move up and remove comment */
     height: 0;                            /* move up and remove comment */
     float: inherit;
     clear: inherit;                       /* add clear */
     position: inherit;
     top: inherit;
     right: inherit;
     bottom: inherit;
     left: inherit;
     z-index: inherit;
     clip: inherit;
     opacity: inherit;
   }

r=?

Comment 8

[Marc Attinasi]

Ian, the change looks great. I was hoping it would be that easy... I like the 
clean-up as well (the comments were just for illustration, right? they should be 
removed).

r=[e-mail]

Comment 9

[Hixie (not reading bugmail)]

ok, cool. (yes comments were for illustration only)

Comment 10

[Hixie (not reading bugmail)]

The proposed fix works.

Comment 11

[clayton]

This one's not a show stopper for ship.  PDTP2.

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Gulp.  This is a pretty major standards-compliance bug, with a really easy 
fix.

Comment 13

[buster]

David:  I think ian has this one well in hand.  Don't sweat it, we'll get it in.

Comment 14

[Blake Ross]

fix was checked in, i think

Comment 15

[Hixie (not reading bugmail)]

blake: Did you check that the fix was checked in?

Anyway, FIXED by making :table-outer inherit the 'clear' property in html.css.

Comment 16

[Bob Clary [:bc] (inactive)]

works with webstandards, and both attached testcases with 2000092608 on win2000

Comment 17

[Keyser Sose]

Works for Me
Platform: PC
OS: Windows 98
Mozilla Version: 2000100508

Marking as Verified