RE: "non-zero top border" in 8.3.1

(Hyatt: There's a test right at the bottom of this e-mail showing bugs in 
Safari trunk's margin collapsing related to the positioning of floats in 
self-collapsing blocks.)

On Tue, 28 Aug 2007, Alex Mogilevsky wrote:
>
> Actually, as a browser vendor I am just sincerely trying to understand 
> the spec, so that I could properly implement it. If I sounds like I am 
> proposing a change for my own convenience, sorry for wrong impression. 

Ah. I recommend first understanding the current spec and only then 
suggesting changes, then, as it is less likely to make it look like you 
want to change the spec. :-)


> My goal is simply to understand the specified behavior, and (ideally) 
> find some implementations to be compatible with.

Right now nobody renders this correctly.


> It is of course possible that I still misunderstand what's written in 
> the spec. Please correct me then.

As far as I can tell this is the case, which is why it is worrying to see 
you proposing changes. :-)

http://lists.w3.org/Archives/Public/www-style/2007Aug/att-0190/8_3_1_top_border.html

First test.

Positioning of A: You wrap an anonymous block around it, since the float 
would otherwise be between margins. The anon block self-collapses, and the 
following margins are involved: simple-bottom, noBorders-top, anon-top and 
anon-bottom, iHaveTopMargin-top, B's anon-top, B's anon-bottom, 
iHaveTopMargin-bottom, noBorders-bottom, and comment-top. Most of these 
are zero. We want to know the position of A-anon for positioning the 
float. Now A-anon's top margin, as we just listed, does collapse with its 
parent's top margin (noBorders-top), so the first of the two bullet points 
applies: the top border edge of A-anon (which we need to position A) is 
the same as the top border edge of noBorders. Now noBorders is also 
self-collapsing, but its parent's top margin isn't involved in the 
collapsing, so it triggers the _second_ bullet point, and so its top 
border edge is the same as it would have been if it had had a top border. 
If it had had a top border, its top border edge would be at zero pixels 
from the silver background block. Thus, the A float is at the top.

Positioning of B: You wrap an anonymous block around it, since the float 
would otherwise be between margins. The anon block self-collapses, and the 
following margins are involved: simple-bottom, noBorders-top, A's 
anon-top, A's anon-bottom, iHaveTopMargin-top, anon-top and anon-bottom, 
iHaveTopMargin-bottom, noBorders-bottom, and comment-top. Most of these 
are zero again. We want to know the position of B-anon for positioning the 
float. Now B-anon's top margin, as we just listed, does collapse with its 
parent's top margin (iHaveTopMargin-top), so the first of the two bullet 
points applies: the top border edge of B-anon (which we need to position 
B) is the same as the top border edge of iHaveTopMargin. Now 
iHaveTopMargin is also self-collapsing, and its parent (noBorders) also 
has its top margin involved in the collapsing, so iHaveTopMargin's top 
border edge is the same as noBorders' top border edge. But noBorders' 
parent's top margin isn't involved in the collapsing, so it triggers the 
_second_ bullet point, and so its top border edge is the same as it would 
have been if it had had a top border. If it had had a top border, its top 
border edge would be at zero pixels from the silver background block. 
Thus, the B float is at the top as well.

The comment ends up 40px below the floats, due to the iHaveTopMargin 
margin.


Second test.

Positioning of A: You wrap an anonymous block around it, since the float 
would otherwise be between margins. The anon block self-collapses, and the 
following margins are involved: anon-top and anon-bottom, 
iHaveTopMargin-top, B's anon-top, B's anon-bottom, iHaveTopMargin-bottom, 
topBorder-bottom, and comment-top. Most of these are zero. We want to know 
the position of A-anon for positioning the float. Now A-anon's top margin, 
doesn't collapse with its parent's top margin (topBorder-top), so the 
second of the two bullet points applies: the top border edge of A-anon 
(which we need to position A) is what it would have been with a top 
border. If it had had a top border, its top border edge would be at zero 
pixels from the top border of topBorder. Thus, the A float is at the top.

Positioning of B: You wrap an anonymous block around it, since the float 
would otherwise be between margins. The anon block self-collapses, and the 
following margins are involved: A's anon-top, A's anon-bottom, 
iHaveTopMargin-top, anon-top and anon-bottom, iHaveTopMargin-bottom, 
topBorder-bottom, and comment-top. Most of these are zero. We want to know 
the position of B-anon for positioning the float. B-anon's top margin 
collapses with iHaveTopMargin-top, so the first bullet applies. 
iHaveTopMargin-top doesn't collapse with topBorder's top margin, though, 
so the second of the two bullet points applies: the top border edge of 
iHaveTopMargin (and thus of B-anon, which we need to position B) is what 
it would have been with a top border. If it had had a top border, its top 
border edge would be at zero pixels from the top border of topBorder. 
Thus, the B float is at the top too.

The comment ends up 40px below the floats, due to the iHaveTopMargin 
margin. There's also a top border above the floats but below the silver 
box.


Third test.

Positioning of A: You wrap an anonymous block around it, since the float 
would otherwise be between margins. The anon block self-collapses, and the 
following margins are involved: simple-bottom, bottomBorder-top, anon-top 
and anon-bottom, iHaveTopMargin-top, B's anon-top, B's anon-bottom, and 
iHaveTopMargin-bottom. Most of these are zero. We want to know the 
position of A-anon for positioning the float. Now A-anon's top margin, as 
we just listed, does collapse with its parent's top margin 
(bottomBorder-top), so the first of the two bullet points applies: the top 
border edge of A-anon (which we need to position A) is the same as the top 
border edge of bottomBorder. Now bottomBorder is also self-collapsing, but 
its parent's top margin isn't involved in the collapsing, so it triggers 
the _second_ bullet point, and so its top border edge is the same as it 
would have been if it had had a top border. If it had had a top border, 
its top border edge would be at zero pixels from the silver background 
block. Thus, the A float is at the top.

Positioning of B: You wrap an anonymous block around it, since the float 
would otherwise be between margins. The anon block self-collapses, and the 
following margins are involved: simple-bottom, bottomBorder-top, A's 
anon-top, A's anon-bottom, iHaveTopMargin-top, anon-top and anon-bottom, 
and iHaveTopMargin-bottom. Most of these are zero again. We want to know 
the position of B-anon for positioning the float. Now B-anon's top margin, 
as we just listed, does collapse with its parent's top margin 
(iHaveTopMargin-top), so the first of the two bullet points applies: the 
top border edge of B-anon (which we need to position B) is the same as the 
top border edge of iHaveTopMargin. Now iHaveTopMargin is also 
self-collapsing, and its parent (bottomBorder) also has its top margin 
involved in the collapsing, so iHaveTopMargin's top border edge is the 
same as bottomBorder' top border edge. But bottomBorder' parent's top 
margin isn't involved in the collapsing, so it triggers the _second_ 
bullet point, and so its top border edge is the same as it would have been 
if it had had a top border. If it had had a top border, its top border 
edge would be at zero pixels from the silver background block. Thus, the B 
float is at the top as well.

The comment ends up 41px below the margins, due to the iHaveTopMargin 
margin and the bottomBorder's bottom border.


I made a version of this test for the test suite:

   http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/068.html

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

Received on Tuesday, 28 August 2007 21:57:31 UTC