3.1.50 CSS 2.1 Test: margin-collapse-164.htm

  • Article

Test case

https://test.csswg.org/suites/css2.1/20101210/html4/margin-collapse-164.htm

The test case states:

  <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>
 </head>
 <body>
  <p>The following two boxes should be identical, with no red present.</p>
  <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>
 
</body>

Expected Results

The two boxes in the test should be identical.

Actual Results

The two boxes in the test are not identical.

It is clear that IE9 fails the test case by comparing the expected results with the actual results.

The test case fails because the test assumes a certain margin collapsing behavior that does not match the following statement from the current spec:

"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'"

For more information, see https://lists.w3.org/Archives/Public/public-css-testsuite/2010Dec/0191.html .