W3C home > Mailing lists > Public > www-style@w3.org > February 2012

Re: [CSS21] margin-collapse-164 is currently invalid per section 9.5.2

From: Gérard Talbot <css21testsuite@gtalbot.org>
Date: Thu, 9 Feb 2012 21:16:51 -0500
Message-ID: <2ae5f6301b4185b0ba326a9a5f7cc851.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Arron Eicholz" <Arron.Eicholz@microsoft.com>
Cc: "L. David Baron (dbaron@dbaron.org)" <dbaron@dbaron.org>, "fantasai (fantasai@inkedblade.net)" <fantasai@inkedblade.net>, "www-style mailing list" <www-style@w3.org>, "Public CSS testsuite mailing list" <public-css-testsuite@w3.org>, "Bruno Fassino" <fassino@gmail.com>

Le Mar 28 décembre 2010 12:06, Arron Eicholz a écrit :
> http://test.csswg.org/suites/css2.1/20101210/html4/margin-collapse-164.htm
> http://test.csswg.org/suites/css2.1/20101210/html4/margin-collapse-clear-005.htm
> http://test.csswg.org/suites/css2.1/20101210/html4/margin-collapse-clear-011.htm
> These test cases exhibit a margin collapse behavior that we have
> discussed many times, however after some extensive review it seems as if
> the cases themselves are incorrect per the current spec. These cases
> should be updated to match the latest spec.
> Section 9.5.2 states:
> Computing the clearance of an element on which 'clear' is set is done by
> first determining the hypothetical position of the element's top border
> edge within its parent block. This position is where the actual top
> border edge would have been if the element had a non-zero bottom border
> and its 'clear' property had been 'none'.
> Using margin-collapse-164 as our example case...
>   <style type="text/css">
>    .outer { margin: 1em; background: red; height: 4.5em; }
>    .border { border: solid; width: 10em; }
>    .box { margin: 0; background: yellow; }
>    .float { margin: 0; width: 5em; height: 1.5em; background: orange;
> float: right; }
>    .clear { margin-top: 3em; height: 1.5em; background: aqua; clear:
> both; }
>    .control { border: solid; width: 10em; background: yellow; margin:
> 1em; }
>    .control .a { margin: 0 0 0 auto; width: 5em; height: 1.5em;
> background: orange; }
>    .control .b { margin-top: 1.5em; height: 1.5em; background: aqua; }
>   </style>
>   <div class="outer border">
>    <div class="box">
>     <div class="float">TEST</div>
>     <div class="clear">TEST</div>
>    </div>
>   </div>
>   <div class="control">
>    <div class="a">TEST</div>
>    <div class="b">TEST</div>
>   </div>
> Based on section 9.5.2 we first calculate the hypothetical position,
> within its parent block, of div "clear". We collapse the top margin of
> "clear" with "box" which puts the "clear" element's top position at 0.
> We then place the div "float" into the mix. Div "float" element's top
> position is also at 0 which will trigger the "clear" element to clear
> since the two intersect.
> Since we now clear it will look as if the "clear" element's margin was
> completely ignored (in reality you end up with negative clearance). Thus
> the "clear" element will be touching the bottom of the "float" element.
> Currently all browsers I have tested in Windows, IE8, IE9,
> Firefox3.6.13, Firefox 4b8, Opera 11, Safari 5.0.3, Chrome 8.0.552.224,
> Konquerer 4.4.0 all exhibit the same visual result. This means that we
> all are in compliance to what the spec states today. However the tests
> assume a different behavior.
> In trying to identify a fix that would match what the tests expected we
> discovered this issue and an additional one...
> Once we had a satisfactory fix for the case we discovered an new issue
> with the updated behavior resulting in a change to the Acid2 test.
> Though the behavior within the Acid2 test is partially hidden due to
> overlapping elements; if the Acid2 test is broken down into individual
> rows there is an obvious behavior change to the layout of the "smile"
> section of Acid2.
> After all of this analysis, and attempted fix to the solution, it seems
> as if all the browsers have the correct solution today and there is no
> need to change the spec further to match what the tests are trying to
> accomplish. I believe we need to change the tests so elements can have
> negative clearance (resulting in a visual appearance that the cleared
> elements move up). This will also mean that implementations do not need
> to make a change in this area and potentially break sites on the web
> that may have this situation of float, margin and clear.


What is the final word on

As far as I can see and as far as I'm concerned, margin-collapse-164 is

Also, in
"Re: contradictions between clearance tests" (30 nov. 2010)
fantasai wrote:
Gérard will have to evaluate his margin-collapse-clear-014.

As far as I can see
is still valid and still correct (always was valid and correct too).

+CC: Bruno Fassino
Contributions to the CSS 2.1 test suite:

CSS 2.1 Test suite RC6, March 23rd 2011:

CSS 2.1 test suite harness:

Contributing to to CSS 2.1 test suite:
Received on Friday, 10 February 2012 02:17:39 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:11 UTC