Re: [CSS21] Objection over Issue 203 (clearance and hypothetical position) (Was: Re: [CSS21] Clearance - the missing manual)

On 03/18/2011 01:40 AM, Anton Prowse wrote:
>
> It's now clear to me that Issue 203 was hijacked!
> ...
> Please can the WG file this as a separate Issue on the wiki, since it
> has nothing to do with Issue 203; the latter concerns how one determines
> whether clearance is necessary, whereas David's e-mail concerns how,
> once clearance has been determined as being necessary, one calculates
> how much it should be.

Ok, Arron and I spent some time on the phone trying to figure out what
Issue 203 actually is, and we think we understand the problem Anton is
describing.

We've loaded his testcase into Hixie's DOM Viewer [1]
   http://software.hixie.ch/utilities/js/live-dom-viewer/saved/889

You can see the behavior described by the current spec text in Opera.
Opera uses the hypothetical position to calculate whether clearance is
necessary. As Anton notes, this is not the same as the actual position
were 'clear' set to 'none', due to the introduction of the hypothetical
border in 9.5.2, whose introduction does not match the rules in 8.3.1.
(Those rules sometimes introduce a bottom border, but not always.)
The hypothetical position intersects with the float, thus clearance is
introduced and the clearing element is placed immediately below the float.

The behavior Anton is advocating for is in Mozilla and IE9. They use
the rules in 8.3.1 to calculate the hypothetical position exactly as if
'clear' was 'none'. The position resulting from this calculation, due
to the bottom margin, is below the float. Thus clearance is not introduced,
and the element rests 20px below the float.

The proposal is to replace
   # the element had a non-zero bottom border and its 'clear' property
with
   | the element's 'clear' property

~fantasai

[1] source code for the testcase:

   <!DOCTYPE html>
   <style>
     #F { float:left; width:100px; height:100px; background:red }
     #A { height:20px; background:blue }
     #B { outline: green solid; }
     #C { clear:left; margin-bottom: 100px; outline: solid orange; }
     #D { position:absolute; width:100px; height:100px; background:yellow }
   </style>

   <div id=F></div>
   <div id=A></div>
   <div id=B>
     <div id=C>
       <div id=D></div>
     </div>
   </div>

Received on Thursday, 24 March 2011 20:24:41 UTC