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

On Sunday, May 20, 2012 6:27 AM Anton Prowse wrote:
> 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-16
> >> 4.htm
> >> http://test.csswg.org/suites/css2.1/20101210/html4/margin-collapse-cl
> >> ear-005.htm
> >> http://test.csswg.org/suites/css2.1/20101210/html4/margin-collapse-cl
> >> ear-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.
>

We resolved on this a long time ago. We decided that both scenarios were valid that is why margin-collapse-clear-005 and 011 have two possible correct renderings. 

As you can see there is a note calling this out (Note: Both behaviors are allowed pending evaluation of their compatibility with existing Web content. A future CSS specification will require either one or the other.)

The problem is that margin-collapse-164 was never updated to account for the possibility of two different behaviors. We need to update margin-collpase-164 to have two possible solutions that will match the 2 behaviors called out in the spec and the margin-collpase-clear-005 and 011 cases.

I believe we as a group preferred Behavior 1 (which is the current behavior of margin-collapse-164) but we were unwilling/unable change the spec to that because we would not have interoperability to pass the test suite and move the spec to REC. There was also an agreement at the Seattle F2F that we would in the next update of our browsers fix the margin collapse issue to pass the margin-collapse-164 case and match Behavior 1. As of today I only see IE10 has gone and fixed the issue. No other browser has fixed the margin collapse bug yet.

> > 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-cle
> > ar-014.htm is still valid and still correct (always was valid and
> > correct too).
> 
> Yes, this test remains valid.
> 

Yep margin-collapse-clear-014 is still valid.

--
Thanks,
Arron Eicholz

Received on Monday, 21 May 2012 18:01:01 UTC