W3C home > Mailing lists > Public > public-css-testsuite@w3.org > May 2012

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

From: Anton Prowse <prowse@moonhenge.net>
Date: Sun, 20 May 2012 15:26:59 +0200
Message-ID: <4FB8F123.9070205@moonhenge.net>
To: Public CSS testsuite mailing list <public-css-testsuite@w3.org>
CC: css21testsuite@gtalbot.org, www-style mailing list <www-style@w3.org>
On 10/02/2012 03:16, "Gérard Talbot" wrote:
>
> 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.
>
>
> Hello,
>
> What is the final word on
> [RC6]
> http://test.csswg.org/suites/css2.1/20110323/html4/margin-collapse-164.htm
> ?
>
> As far as I can see and as far as I'm concerned, margin-collapse-164 is
> invalid.

This test is now invalid.  It assumes "Behaviour 1":

   # Then the amount of clearance is set to the greater of:
   # 1. The amount necessary to place the border edge of the block even
   #    with the bottom outer edge of the lowest float that is to be
   #    cleared.
   # 2. The amount necessary to place the top border edge of the block
   #    at its hypothetical position.

yet the spec now explicitly allows an alternative "Behaviour 2":

   # Alternatively, clearance is set exactly to the amount necessary to
   # place the border edge of the block even with the bottom outer edge
   # of the lowest float that is to be cleared.

> Also, in
> "Re: contradictions between clearance tests" (30 nov. 2010)
> http://lists.w3.org/Archives/Public/public-css-testsuite/2010Dec/0008.html
> fantasai wrote:
> "
> Gérard will have to evaluate his margin-collapse-clear-014.
> "
>
> As far as I can see
> http://test.csswg.org/suites/css2.1/20110323/html4/margin-collapse-clear-014.htm
> is still valid and still correct (always was valid and correct too).

Yes, this test remains valid.

Cheers,
Anton Prowse
http://dev.moonhenge.net
Received on Sunday, 20 May 2012 13:27:43 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Sunday, 20 May 2012 13:27:50 GMT