CSS 2.1 failure: margin-collapse-clear-012 fails
authorrobert@webkit.org <robert@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Aug 2012 18:15:13 +0000 (18:15 +0000)
committerrobert@webkit.org <robert@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Aug 2012 18:15:13 +0000 (18:15 +0000)
https://bugs.webkit.org/show_bug.cgi?id=80394

Reviewed by David Hyatt.

Source/WebCore:

CSS2.1 states: "If the top and bottom margins of an element with clearance are adjoining, its margins collapse with
the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block."
This is a change in the spec since http://trac.webkit.org/changeset/47678, so prevent the margins of collapsed blocks from collapsing
with parent margins.

Also, in the case of self-collapsing blocks adjust the clearance so that it is equal to [height of float to clear] - margin-top of the
self-collapsing block. (See the 'Explanation' section near the end of http://www.w3.org/TR/CSS21/visuren.html#clearance). This allows
the correct value of any margins collapsed with subsequent siblings to contribute to the height of the parent. For example if a block
with margin-top of 40px has to clear a float of 100px, the clearance is now 60px so set that as the height of the parent. If a subsequent
sibling has a collapsed margin value of 140px (e.g. from a margin-top of 80px and a margin-bottom of 140px) then the height of the parent
becomes 200px by adding on that collapsed margin.

Tests: css2.1/20110323/margin-collapse-clear-012.htm
       css2.1/20110323/margin-collapse-clear-013.htm
       css2.1/20110323/margin-collapse-027.htm
       fast/css/margin-collapse-013-reduction.html
       fast/css/margin-collapse-top-margin-clearance.html
       fast/css/margin-collapse-top-margin-clearance-with-sibling.html

* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::clearFloatsIfNeeded):
(WebCore::RenderBlock::handleAfterSideOfBlock): Without this margin-collapse/block-inside-inline/025.html adds in the margin to
  an anonymous block containing a block child. FF does this, Opera does not. The spec is not crystal-clear but Opera's behaviour
  seems correct - it's totally unintuitive to think the margins of an anonymous block and its block-flow child should be considered adjoining.
  Maybe this is a FIXME pending clarification in the spec?
* rendering/RenderBlock.h:
(WebCore::RenderBlock::MarginInfo::setCanCollapseMarginAfterWithChildren):

LayoutTests:

* css2.1/20110323/margin-collapse-027-expected.html: Added.
* css2.1/20110323/margin-collapse-027.htm: Added.
* css2.1/20110323/margin-collapse-clear-012-expected.html: Added.
* css2.1/20110323/margin-collapse-clear-012.htm: Added.
* css2.1/20110323/margin-collapse-clear-013-expected.html: Added.
* css2.1/20110323/margin-collapse-clear-013.htm: Added.
* css2.1/20110323/margin-collapse-clear-014-expected.html: Added.
* css2.1/20110323/margin-collapse-clear-014.htm: Added.
* css2.1/20110323/margin-collapse-clear-015-expected.html: Added.
* css2.1/20110323/margin-collapse-clear-015.htm: Added.
* css2.1/20110323/margin-collapse-clear-016-expected.html: Added.
* css2.1/20110323/margin-collapse-clear-016.htm: Added.
* css2.1/20110323/margin-collapse-clear-017-expected.html: Added.
* css2.1/20110323/margin-collapse-clear-017.htm: Added.
* fast/block/margin-collapse/empty-clear-blocks.html:
  Modified the test to reflect the new expected result. The text in the third paragraph avoids
  the float rather than sitting underneath it. The text in the third last paragraph is 20 px below
  the float rather than immediately beneath it. Both of these are a consequence of the revised treatment
  of clearance when margin collapsing. This is consistent with the spec and FF and Opera.
* fast/css/margin-collapse-013-reduction.html: Added.
   Sourced from https://bugzilla.mozilla.org/show_bug.cgi?id=493380
* fast/css/margin-collapse-top-margin-clearance-with-sibling-expected.html: Added.
* fast/css/margin-collapse-top-margin-clearance-with-sibling.html: Added.
    Ensure we only avoid collapsing the margins of a self-collapsing block with the parent if we don't
    have a subsequent sibling with height.
* fast/css/margin-collapse-top-margin-clearance.html: Added.

* platform/chromium-linux/fast/block/float/024-expected.png:
* platform/chromium-linux/fast/block/margin-collapse/empty-clear-blocks-expected.png:
  These two progress to the same rendering used by FF and Opera. It is a consequence of calculating
  clearance as "clearance = [height of float] - margin-top" when margin-top is a negative value.

* platform/chromium-win/fast/block/float/024-expected.txt:
* platform/chromium-win/fast/block/margin-collapse/025-expected.txt:
* platform/chromium-win/fast/block/margin-collapse/block-inside-inline/025-expected.txt:
    The change in result for these three is a consequence of self-collapsing blocks with clearance moving their top up past the float by the value
    of their top margin. Unlike the block-inside-inline case the 'clear' has no intrinsic height so the uncollapsed margin value has
    no effect on its height.

* platform/chromium-win/fast/block/margin-collapse/empty-clear-blocks-expected.txt: See the png result above for comment.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@127163 268f45cc-cd09-0410-ab3c-d52691b4dbfc

37 files changed:
LayoutTests/ChangeLog
LayoutTests/css2.1/20110323/margin-collapse-027-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-027.htm [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-012-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-012.htm [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-013-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-013.htm [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-014-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-014.htm [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-015-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-015.htm [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-016-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-016.htm [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-017-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/margin-collapse-clear-017.htm [new file with mode: 0644]
LayoutTests/fast/block/margin-collapse/empty-clear-blocks.html
LayoutTests/fast/css/margin-collapse-013-reduction-expected.html [new file with mode: 0644]
LayoutTests/fast/css/margin-collapse-013-reduction.html [new file with mode: 0644]
LayoutTests/fast/css/margin-collapse-top-margin-clearance-expected.html [new file with mode: 0644]
LayoutTests/fast/css/margin-collapse-top-margin-clearance-with-sibling-expected.html [new file with mode: 0644]
LayoutTests/fast/css/margin-collapse-top-margin-clearance-with-sibling.html [new file with mode: 0644]
LayoutTests/fast/css/margin-collapse-top-margin-clearance.html [new file with mode: 0644]
LayoutTests/platform/chromium-linux/fast/block/float/024-expected.png
LayoutTests/platform/chromium-linux/fast/block/margin-collapse/empty-clear-blocks-expected.png
LayoutTests/platform/chromium-win/fast/block/float/024-expected.txt
LayoutTests/platform/chromium-win/fast/block/margin-collapse/025-expected.txt
LayoutTests/platform/chromium-win/fast/block/margin-collapse/block-inside-inline/025-expected.txt
LayoutTests/platform/chromium-win/fast/block/margin-collapse/empty-clear-blocks-expected.txt
LayoutTests/platform/chromium/TestExpectations
LayoutTests/platform/efl/TestExpectations
LayoutTests/platform/gtk/TestExpectations
LayoutTests/platform/mac/TestExpectations
LayoutTests/platform/qt/TestExpectations
LayoutTests/platform/win/Skipped
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBlock.cpp
Source/WebCore/rendering/RenderBlock.h

index 5f64b22..1317325 100644 (file)
@@ -1,3 +1,51 @@
+2012-08-24  Robert Hogan  <robert@webkit.org>
+
+        CSS 2.1 failure: margin-collapse-clear-012 fails
+        https://bugs.webkit.org/show_bug.cgi?id=80394
+
+        Reviewed by David Hyatt.
+
+        * css2.1/20110323/margin-collapse-027-expected.html: Added.
+        * css2.1/20110323/margin-collapse-027.htm: Added.
+        * css2.1/20110323/margin-collapse-clear-012-expected.html: Added.
+        * css2.1/20110323/margin-collapse-clear-012.htm: Added.
+        * css2.1/20110323/margin-collapse-clear-013-expected.html: Added.
+        * css2.1/20110323/margin-collapse-clear-013.htm: Added.
+        * css2.1/20110323/margin-collapse-clear-014-expected.html: Added.
+        * css2.1/20110323/margin-collapse-clear-014.htm: Added.
+        * css2.1/20110323/margin-collapse-clear-015-expected.html: Added.
+        * css2.1/20110323/margin-collapse-clear-015.htm: Added.
+        * css2.1/20110323/margin-collapse-clear-016-expected.html: Added.
+        * css2.1/20110323/margin-collapse-clear-016.htm: Added.
+        * css2.1/20110323/margin-collapse-clear-017-expected.html: Added.
+        * css2.1/20110323/margin-collapse-clear-017.htm: Added.
+        * fast/block/margin-collapse/empty-clear-blocks.html:
+          Modified the test to reflect the new expected result. The text in the third paragraph avoids
+          the float rather than sitting underneath it. The text in the third last paragraph is 20 px below
+          the float rather than immediately beneath it. Both of these are a consequence of the revised treatment
+          of clearance when margin collapsing. This is consistent with the spec and FF and Opera.
+        * fast/css/margin-collapse-013-reduction.html: Added.
+           Sourced from https://bugzilla.mozilla.org/show_bug.cgi?id=493380
+        * fast/css/margin-collapse-top-margin-clearance-with-sibling-expected.html: Added.
+        * fast/css/margin-collapse-top-margin-clearance-with-sibling.html: Added.
+            Ensure we only avoid collapsing the margins of a self-collapsing block with the parent if we don't
+            have a subsequent sibling with height.
+        * fast/css/margin-collapse-top-margin-clearance.html: Added.
+
+        * platform/chromium-linux/fast/block/float/024-expected.png:
+        * platform/chromium-linux/fast/block/margin-collapse/empty-clear-blocks-expected.png:
+          These two progress to the same rendering used by FF and Opera. It is a consequence of calculating
+          clearance as "clearance = [height of float] - margin-top" when margin-top is a negative value.
+
+        * platform/chromium-win/fast/block/float/024-expected.txt:
+        * platform/chromium-win/fast/block/margin-collapse/025-expected.txt:
+        * platform/chromium-win/fast/block/margin-collapse/block-inside-inline/025-expected.txt:
+            The change in result for these three is a consequence of self-collapsing blocks with clearance moving their top up past the float by the value
+            of their top margin. Unlike the block-inside-inline case the 'clear' has no intrinsic height so the uncollapsed margin value has
+            no effect on its height.
+
+        * platform/chromium-win/fast/block/margin-collapse/empty-clear-blocks-expected.txt: See the png result above for comment.
+           
 2012-08-30  Rik Cabanier  <cabanier@adobe.com>
 
         Add support for blendmode to webkit rendering engine
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-027-expected.html b/LayoutTests/css2.1/20110323/margin-collapse-027-expected.html
new file mode 100644 (file)
index 0000000..6a2006a
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style type="text/css">
+  div
+  {
+  background-color: green;
+  height: 1.25em;
+  margin: 1em 0em 5em;
+  width: 6.25em;
+  }
+  </style>  
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is no red.</p>
+  
+  <div></div>
+
+  <div></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-027.htm b/LayoutTests/css2.1/20110323/margin-collapse-027.htm
new file mode 100644 (file)
index 0000000..15f67f7
--- /dev/null
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>CSS Test: Margin collapsing - bottom margin not collapse when cleared</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
+        <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+        <link rel="match" href="clearance-006-ref.htm">
+
+        <meta name="flags" content="ahem image">
+        <meta name="assert" content="When a last sibling has clearance, its own margins collapse and it collapsed its margins with a subsequent sibling, the last sibling does not collapse its bottom margin with its parent's bottom margin.">
+        <style type="text/css">
+            div
+            {
+                font: 20px/1em Ahem;
+                width: 5em;
+            }
+            #div1
+            {
+                background: url('support/margin-collapse-4em-space.png');
+                height: 6em;
+            }
+            #div2
+            {
+                margin-bottom: 2em;
+            }
+            #div3, #div5
+            {
+                margin-bottom: 1em;
+            }
+            #div3, #div6
+            {
+                background: green;
+                height: 1em;
+            }
+            #div4
+            {
+                float: left;
+                height: 1em;
+            }
+            #div5
+            {
+                clear: both;
+                margin-top: 1.5em;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is no red.</p>
+        <div id="div1">
+            <div id="div2">
+                <div id="div3"></div>
+                <div id="div4"></div>
+                <div id="div5"></div>
+            </div>
+            <div id="div6"></div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-012-expected.html b/LayoutTests/css2.1/20110323/margin-collapse-clear-012-expected.html
new file mode 100644 (file)
index 0000000..1bf1d88
--- /dev/null
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+
+  <style type="text/css">
+  div#lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  height: 200px;
+  width: 50%;
+  }
+  
+  div#yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+  </style>  
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="lime"><img src="support/swatch-blue.png" height="100" width="100" alt="Image download support must be enabled"></div>
+  
+  <div id="yellow"></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-012.htm b/LayoutTests/css2.1/20110323/margin-collapse-clear-012.htm
new file mode 100644 (file)
index 0000000..4689a5e
--- /dev/null
@@ -0,0 +1,127 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
+
+  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+  <link rel="match" href="margin-collapse-clear-012-ref.htm">
+
+  <meta content="When an element has had clearance applied to it and its own margins collapse, these margins collapse with the adjoining margins of following siblings but the resulting margin does not collapse with the bottom margin of the parent block" name="assert">
+  <meta content="" name="flags">
+
+  <style type="text/css">
+  #rel-pos-wrapper {position: relative;}
+
+  #parent-lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  width: 50%;
+  }
+
+  #float-left-blue
+  {
+  background-color: blue;
+  float: left;
+  height: 100px;
+  width: 100px;
+  }
+
+  #clear-left
+  {
+  clear: left;
+  margin-bottom: 80px;
+  margin-top: 40px;
+  }
+
+  #following-sibling {margin-bottom: 140px;}
+
+  #next-yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+
+  .ref-overlapped-red
+  {
+  background-color: red;
+  position: absolute;
+  z-index: -1;
+  }
+
+  #ref1
+  {
+  height: 200px;
+  top: 1px;
+  width: 50%;
+  }
+
+  #ref2
+  {
+  height: 100px;
+  top: 201px;
+  width: 100%;
+  }
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="rel-pos-wrapper">
+
+  <!--
+
+  #parent-lime should have height 200px, sum of:
+  
+    100px          : height of #float-left-blue
+  +  
+    (140px - 40px) : part of #following-sibling's margin-bottom 
+                     "exceeding" the amount collapsed with 
+                     #clear-left's margin-top (140px - 40px)
+  =======
+   200px 
+
+  -->
+
+    <div id="parent-lime">
+      <div id="float-left-blue"></div>
+      <div id="clear-left"></div>
+
+   <!-- 
+
+     clearance 
+   + 
+     margin-top of #clear-left (40px)
+   ====================================
+     height of #float-left-blue (100px) 
+     
+     therefore, clearance is equal to +60px 
+
+   -->
+
+      <div id="following-sibling"></div>
+    </div>
+
+    <div id="next-yellow"></div>
+
+   <!--
+   #ref1 and #ref2 boxes create a sort of 'reference rendering' 
+   where #ref1 should be covered, overlapped by #parent-lime 
+   while #ref2 should be covered, overlapped by #next-yellow.
+   -->
+
+   <div id="ref1" class="ref-overlapped-red"></div>
+   <div id="ref2" class="ref-overlapped-red"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-013-expected.html b/LayoutTests/css2.1/20110323/margin-collapse-clear-013-expected.html
new file mode 100644 (file)
index 0000000..1bf1d88
--- /dev/null
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+
+  <style type="text/css">
+  div#lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  height: 200px;
+  width: 50%;
+  }
+  
+  div#yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+  </style>  
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="lime"><img src="support/swatch-blue.png" height="100" width="100" alt="Image download support must be enabled"></div>
+  
+  <div id="yellow"></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-013.htm b/LayoutTests/css2.1/20110323/margin-collapse-clear-013.htm
new file mode 100644 (file)
index 0000000..14befd6
--- /dev/null
@@ -0,0 +1,127 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
+
+  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+  <link rel="match" href="margin-collapse-clear-012-ref.htm">
+
+  <meta content="When an element has had clearance applied to it and its own margins collapse, these margins do not collapse with the bottom margin of the parent block" name="assert">
+  <meta content="" name="flags">
+
+  <style type="text/css">
+  #rel-pos-wrapper {position: relative;}
+
+  #parent-lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  width: 50%;
+  }
+
+  #float-left-blue
+  {
+  background-color: blue;
+  float: left;
+  height: 100px;
+  width: 100px;
+  }
+
+  #clear-left
+  {
+  clear: left;
+  margin-bottom: 140px;
+  margin-top: 40px;
+  }
+
+  #next-yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+
+  .ref-overlapped-red
+  {
+  background-color: red;
+  position: absolute;
+  z-index: -1;
+  }
+
+  #ref1
+  {
+  height: 200px;
+  top: 1px;
+  width: 50%;
+  }
+
+  #ref2
+  {
+  height: 100px;
+  top: 201px;
+  width: 100%;
+  }
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="rel-pos-wrapper">
+
+  <!--
+
+     clearance 
+   + 
+     margin-top of #clear-left (40px)
+   ====================================
+     height of #float-left-blue (100px) 
+     
+     therefore, clearance is equal to +60px 
+
+  -->
+
+  <!--
+
+  #parent-lime should have height 200px, sum of:
+  
+    100px          : height of #float-left-blue
+  +  
+    (140px - 40px) : part of #sole-following-sibling's margin-bottom 
+                     "exceeding" the amount collapsed with 
+                     #clear-left's margin-top (140px - 40px)
+  =======
+   200px 
+
+  -->
+
+    <div id="parent-lime">
+      <div id="float-left-blue"></div>
+      <div id="clear-left"></div>
+    </div>
+
+   <!--
+   #next-yellow should immediately follow #parent-lime (no margins in between)
+   -->
+
+    <div id="next-yellow"></div>
+
+   <!--
+   #ref1 and #ref2 boxes create a sort of 'reference rendering' 
+   where #ref1 should be covered, overlapped by #parent-lime 
+   while #ref2 should be covered, overlapped by #next-yellow.
+   -->
+
+    <div id="ref1" class="ref-overlapped-red"></div>
+    <div id="ref2" class="ref-overlapped-red"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-014-expected.html b/LayoutTests/css2.1/20110323/margin-collapse-clear-014-expected.html
new file mode 100644 (file)
index 0000000..997a67b
--- /dev/null
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+
+  <style type="text/css">
+  div#aqua
+  {
+  background-color: aqua;
+  height: 60px;
+  width: 50%;
+  }  
+
+  div#lime
+  {
+  background-color: lime;
+  line-height: 140px;
+  width: 50%;
+  }
+  
+  img {vertical-align: bottom;}  
+  
+  div#yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+  </style>  
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="aqua"></div>
+
+  <div id="lime"><img src="support/swatch-blue.png" height="100" width="100" alt="Image download support must be enabled"></div>
+  
+  <div id="yellow"></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-014.htm b/LayoutTests/css2.1/20110323/margin-collapse-clear-014.htm
new file mode 100644 (file)
index 0000000..5c008ea
--- /dev/null
@@ -0,0 +1,129 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - clearance may be negative</title>
+
+  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+  <link rel="match" href="margin-collapse-clear-014-ref.htm">
+
+  <meta content="Clearance is created above the top margin of the element with clear set. Clearance can be negative. Clearance stops the collapsing of the element's margins with the preceding siblings' margins and with the parent block's bottom margin." name="assert">
+  <meta content="" name="flags">
+
+  <style type="text/css">
+  #rel-pos-wrapper {position: relative;}
+
+  #parent-lime
+  {
+  background-color: lime;
+  width: 50%;
+  }
+
+  #preceding-sibling-aqua
+  {
+  background-color: aqua;
+  height: 60px;
+  margin-bottom: 40px;
+  }
+
+  #float-left-blue
+  {
+  background-color: blue;
+  float: left;
+  height: 100px;
+  width: 100px;
+  }
+
+  #clear-left
+  {
+  clear: left;
+  margin-top: 120px;
+  }
+
+  #next-yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+
+  .ref-overlapped-red
+  {
+  background-color: red;
+  position: absolute;
+  z-index: -1;
+  }
+
+  #ref1
+  {
+  height: 200px;
+  top: 0px;
+  width: 50%;
+  }
+
+  #ref2
+  {
+  height: 100px;
+  top: 200px;
+  width: 100%;
+  }
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="rel-pos-wrapper">
+
+  <!--
+
+  #parent-lime should have height 200px, sum of:
+  
+     60px  : height of #preceding-sibling-aqua 
+  +
+     40px  : margin-bottom of #preceding-sibling-aqua
+  +
+    100px  : height of #float-left-blue
+  =====================================================
+    200px
+
+  -->
+
+    <div id="parent-lime">
+      <div id="preceding-sibling-aqua"></div>
+      <div id="float-left-blue"></div>
+      <div id="clear-left"></div>
+    </div>
+
+  <!--
+
+     clearance 
+   + 
+     margin-top of #clear-left (120px)
+   ====================================
+     height of #float-left-blue (100px) 
+     
+     therefore, clearance is equal to -20px 
+
+  -->
+
+    <div id="next-yellow"></div>
+
+   <!--
+   #ref1 and #ref2 boxes create a sort of 'reference rendering' 
+   where #ref1 should be covered, overlapped by #parent-lime 
+   while #ref2 should be covered, overlapped by #next-yellow.
+   -->
+
+    <div id="ref1" class="ref-overlapped-red"></div>
+    <div id="ref2" class="ref-overlapped-red"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-015-expected.html b/LayoutTests/css2.1/20110323/margin-collapse-clear-015-expected.html
new file mode 100644 (file)
index 0000000..6310a64
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+
+  <style type="text/css">
+  div#lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  height: 140px;
+  width: 50%;
+  }
+  
+  div#aqua
+  {
+  background-color: aqua;
+  height: 60px;
+  width: 50%;
+  }  
+  
+  div#yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+  </style>  
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="lime"><img src="support/swatch-blue.png" height="100" width="100" alt="Image download support must be enabled"></div>
+  
+  <div id="aqua"></div>
+  
+  <div id="yellow"></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-015.htm b/LayoutTests/css2.1/20110323/margin-collapse-clear-015.htm
new file mode 100644 (file)
index 0000000..c11831f
--- /dev/null
@@ -0,0 +1,101 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - Margins collapsing of an element's top margin with its first in-flow child should not be affected by clear and clearance</title>
+
+  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
+  <link rel="match" href="margin-collapse-clear-015-ref.htm">
+
+  <meta content="When an element with clear set to it (to other than 'none') has a first in-flow child and their top margins are adjoining, then these margins should collapse normally." name="assert">
+  <meta content="" name="flags">
+
+  <style type="text/css">
+  #rel-pos-wrapper {position: relative;}
+
+  #parent-lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  width: 50%;
+  }
+
+  #float-left-blue
+  {
+  background-color: blue;
+  float: left;
+  height: 100px;
+  width: 100px;
+  }
+
+  #clear-left {clear: left;}
+
+  #clear-left > div
+  {
+  background-color: aqua;
+  height: 60px;
+  margin-top: 140px;
+  }
+
+  #next-yellow
+  {
+  background-color: yellow;
+  height: 100px;
+  }
+
+  .ref-overlapped-red
+  {
+  background-color: red;
+  left: 0;
+  position: absolute;
+  z-index: -1;
+  }
+
+  #ref1
+  {
+  height: 200px;
+  top: 1px;
+  width: 50%;
+  }
+
+  #ref2
+  {
+  height: 100px;
+  top: 201px;
+  width: 100%;
+  }
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div id="rel-pos-wrapper">
+
+    <div id="parent-lime">
+      <div id="float-left-blue"></div>
+      <div id="clear-left">
+         <div></div>
+      </div>
+    </div>
+
+    <div id="next-yellow"></div>
+
+    <!--
+    #ref1 and #ref2 boxes create a sort of 'reference rendering' 
+    where #ref1 should be covered, overlapped by #parent-lime 
+    while #ref2 should be covered, overlapped by #next-yellow.
+    -->
+
+    <div id="ref1" class="ref-overlapped-red"></div>
+    <div id="ref2" class="ref-overlapped-red"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-016-expected.html b/LayoutTests/css2.1/20110323/margin-collapse-clear-016-expected.html
new file mode 100644 (file)
index 0000000..304861e
--- /dev/null
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de">
+
+  <style type="text/css">
+  div
+  {
+  background-color: green;
+  height: 100px;
+  }
+  </style>  
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a wide filled green rectangle and <strong>no red</strong>.</p>
+
+  <div></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-016.htm b/LayoutTests/css2.1/20110323/margin-collapse-clear-016.htm
new file mode 100644 (file)
index 0000000..c525bd5
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin</title>
+
+  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de">
+  <link rel="match" href="margin-collapse-clear-016-ref.htm">
+
+  <meta content="An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with clear set to it (to other than 'none') can only create a clearance if and when there is a preceding floated block." name="assert">
+  <meta content="" name="flags">
+
+  <style type="text/css">
+  body
+  {
+  background-color: white;
+  }
+
+  #parent-block
+  {
+  background-color: red;
+  margin-bottom: 0px;
+  }
+
+  #sibling
+  {
+  background-color: green;
+  height: 100px;
+  }
+
+  #element-without-clearance-applied
+  {
+  clear: both;
+  margin-top: 100px;
+  }
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a wide filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="parent-block">
+    <div id="sibling"></div>
+    <div id="element-without-clearance-applied"></div>
+  </div>
+
+  <!--
+  #element-without-clearance-applied's margin-top collapses 
+  with #parent-block's margin-bottom: the resulting margin-bottom 
+  then collapses with the adjoining white body's margin-bottom
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-017-expected.html b/LayoutTests/css2.1/20110323/margin-collapse-clear-017-expected.html
new file mode 100644 (file)
index 0000000..ef4420e
--- /dev/null
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de">
+
+  <style type="text/css">
+  body
+  {
+  background: white url("support/ruler-v-100px-200px-300px.png") no-repeat;
+  margin: 34px 8px 8px 55px;
+  }
+
+  p
+  {
+  font-size: 16px;
+  line-height: 20px;
+  margin: 1em 8px;
+  }  
+  
+  div
+  {
+  background-color: green;
+  height: 10px;
+  margin-bottom: 100px;
+  }
+  </style>  
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a vertical gap<br>
+  of exactly 100px between 2 green bars.</p>
+
+  <div></div>
+
+  <div></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/margin-collapse-clear-017.htm b/LayoutTests/css2.1/20110323/margin-collapse-clear-017.htm
new file mode 100644 (file)
index 0000000..76beb88
--- /dev/null
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin</title>
+
+  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de">
+  <link rel="match" href="margin-collapse-clear-017-ref.htm">
+
+  <meta content="An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with 'clear' set to a value other than 'none' can create a clearance only if and only when there is an earlier (in the source document) floating box." name="assert">
+  <meta content="image" name="flags">
+
+  <style type="text/css">
+  body
+  {
+  background: white url("support/ruler-v-100px-200px-300px.png") no-repeat;
+  margin: 34px 8px 8px 55px; 
+  /* 
+    34px : body's top margin collapsing with p's top margin: max(34px, 16px) 
+  + 20px : p's 1st line box height 
+  + 20px : p's 2nd line box height
+  + 16px : p's bottom margin 
+  + 10px : height of topmost green bar
+  ======
+   100px 
+  */
+  }
+
+  p
+  {
+  font-size: 16px;
+  line-height: 20px;
+  margin: 1em 8px;
+  }
+
+  div#parent-block {margin-bottom: 100px;}
+
+  div.vertical-gap-separator
+  {
+  background-color: green;
+  height: 10px;
+  }
+
+  div#element-without-clearance
+  {
+  clear: both;
+  margin-top: 100px;
+  }
+  
+  /*
+  In this test, div#element-without-clearance
+  is what the spec refers to as
+  'collapsed through' box
+  http://www.w3.org/TR/CSS21/box.html#collapsed-through
+  */
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a vertical gap<br>
+  of exactly 100px between 2 green bars.</p>
+
+  <div id="parent-block">
+    <div class="vertical-gap-separator"></div>
+    <div id="element-without-clearance"></div>
+  </div>
+
+  <div class="vertical-gap-separator"></div>
+
+  <!--
+  div#element-without-clearance's margin-top should collapse 
+  with #parent-block's margin-bottom: max(100px, 100px) = 100px
+  -->
+
+ </body>
+</html>
\ No newline at end of file
index abebf02..434c8a8 100644 (file)
@@ -27,7 +27,7 @@ This paragraph has a bottom margin of 50px.</span>
 <span style="margin-bottom:50px"><div>This is a float that is 100px high.</div>
 This paragraph has a bottom margin of 50px.</span>
 <span style="clear:both; margin-top:30px;margin-bottom:-60px"></span>
-<span style="margin-top:60px">This text should be immediately under the float.</span>
+<span style="margin-top:60px">This text should be to the right of the float.</span>
 <hr>
 <span style="margin-bottom:50px"><div>This is a float that is 100px high.</div>
 This paragraph has a bottom margin of 50px.</span>
@@ -42,7 +42,7 @@ This paragraph has a bottom margin of 50px.</span>
 <span style="margin-bottom:50px"><div>This is a float that is 100px high.</div>
 This paragraph has a bottom margin of 50px.</span>
 <span style="clear:both; margin-top:-30px"></span>
-<span style="margin-top:30px">This text should be immediately under the float.</span>
+<span style="margin-top:30px">This text should be 20px under the float.</span>
 <hr>
 <span style="border:10px dotted black">
   <span style="margin-bottom:50px"><div>This is a float that is 100px high.</div>
diff --git a/LayoutTests/fast/css/margin-collapse-013-reduction-expected.html b/LayoutTests/fast/css/margin-collapse-013-reduction-expected.html
new file mode 100644 (file)
index 0000000..4404406
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#separator {
+ margin-top: 30px;
+ height: 20px;
+ width: 100%;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="separator"></div>
+There should be gap between the blue square and the green rectangle.
+</body>
+</html>
diff --git a/LayoutTests/fast/css/margin-collapse-013-reduction.html b/LayoutTests/fast/css/margin-collapse-013-reduction.html
new file mode 100644 (file)
index 0000000..027a631
--- /dev/null
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+#float {
+ float: left;
+ width: 100px; height: 100px;
+ background-color: blue;
+}
+#clear {
+ clear: left;
+ margin-top: 10px;
+ margin-bottom: 40px;
+}
+#separator {
+ height: 20px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="float"></div>
+<div id="clear"></div>
+<div id="separator"></div>
+There should be gap between the blue square and the green rectangle.
+</body>
+</html>
diff --git a/LayoutTests/fast/css/margin-collapse-top-margin-clearance-expected.html b/LayoutTests/fast/css/margin-collapse-top-margin-clearance-expected.html
new file mode 100644 (file)
index 0000000..0e360a6
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
+
+ <style type="text/css">
+
+  #parent-lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  width: 50%;
+  height: 100px;
+  }
+
+  #float-left-blue
+  {
+  background-color: blue;
+  float: left;
+  height: 100px;
+  width: 100px;
+  }
+
+ </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the lime rectangle is the same height as the blue square.</p>
+
+
+    <div id="parent-lime">
+      <div id="float-left-blue"></div>
+    </div>
+
+ </body>
+</html>
diff --git a/LayoutTests/fast/css/margin-collapse-top-margin-clearance-with-sibling-expected.html b/LayoutTests/fast/css/margin-collapse-top-margin-clearance-with-sibling-expected.html
new file mode 100644 (file)
index 0000000..fb63fa1
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
+
+ <style type="text/css">
+
+  #parent-red
+  {
+  background-color: lime;
+  border-top: black solid 2px;
+  width: 50%;
+  height: 130px;
+  }
+  #parent-lime
+  {
+  background-color: yellow;
+  height: 20px;
+  width: 50%;
+  }
+
+ </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a yellow rectangle below the lime rectangle.</p>
+
+  <div id="parent-red"></div>
+  <div id="parent-lime"></div>
+ </body>
+</html>
diff --git a/LayoutTests/fast/css/margin-collapse-top-margin-clearance-with-sibling.html b/LayoutTests/fast/css/margin-collapse-top-margin-clearance-with-sibling.html
new file mode 100644 (file)
index 0000000..767dec7
--- /dev/null
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
+
+ <style type="text/css">
+
+  #parent-red
+  {
+  background-color: yellow;
+  border-top: black solid 1px;
+  width: 50%;
+  height: 151px;
+  }
+  #parent-lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  width: 100%;
+  }
+
+  #float-left-blue
+  {
+  background-color: lime;
+  float: left;
+  height: 100px;
+  width: 100px;
+  }
+
+  #clear-left
+  {
+  clear: left;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  }
+
+  #other
+  {
+  height: 30px;
+  margin-bottom: 20px;
+  }
+
+ </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a yellow rectangle below the lime rectangle.</p>
+
+  <div id="parent-red">
+    <div id="parent-lime">
+      <div id="float-left-blue"></div>
+      <div id="clear-left"></div>
+      <div id="other"></div>
+    </div>
+  </div>
+ </body>
+</html>
diff --git a/LayoutTests/fast/css/margin-collapse-top-margin-clearance.html b/LayoutTests/fast/css/margin-collapse-top-margin-clearance.html
new file mode 100644 (file)
index 0000000..bd5b8c2
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
+
+ <style type="text/css">
+
+  #parent-lime
+  {
+  background-color: lime;
+  border-top: black solid 1px;
+  width: 50%;
+  }
+
+  #float-left-blue
+  {
+  background-color: blue;
+  float: left;
+  height: 100px;
+  width: 100px;
+  }
+
+  #clear-left
+  {
+  clear: left;
+  margin-top: 60px;
+  margin-bottom: 60px;
+  }
+
+ </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the lime rectangle is the same height as the blue square.</p>
+
+
+    <div id="parent-lime">
+      <div id="float-left-blue"></div>
+      <div id="clear-left"></div>
+
+    </div>
+
+ </body>
+</html>
index db21ccc..c4f022f 100644 (file)
Binary files a/LayoutTests/platform/chromium-linux/fast/block/float/024-expected.png and b/LayoutTests/platform/chromium-linux/fast/block/float/024-expected.png differ
index e4c1eb7..6e4d711 100644 (file)
Binary files a/LayoutTests/platform/chromium-linux/fast/block/margin-collapse/empty-clear-blocks-expected.png and b/LayoutTests/platform/chromium-linux/fast/block/margin-collapse/empty-clear-blocks-expected.png differ
index d87f71e..1565f0b 100644 (file)
@@ -12,13 +12,13 @@ layer at (0,0) size 800x600
                 text run at (2,2) width 431: "There should be a gap between this float and the green rectangle above."
       RenderBlock {DIV} at (0,221) size 800x56 [bgcolor=#DDDDDD] [border: (2px solid #000000)]
         RenderBlock (floating) {DIV} at (2,2) size 32x32 [bgcolor=#FFFFFF]
-        RenderBlock {DIV} at (2,34) size 796x0
+        RenderBlock {DIV} at (2,18) size 796x0
         RenderBlock (anonymous) at (2,34) size 796x20
           RenderText {#text} at (0,0) size 460x19
             text run at (0,0) width 460: "This text should be inside a black rectangle and below the 2em white square."
-      RenderBlock {DIV} at (0,293) size 800x56 [bgcolor=#DDDDDD] [border: (2px solid #000000)]
+      RenderBlock {DIV} at (0,293) size 800x72 [bgcolor=#DDDDDD] [border: (2px solid #000000)]
         RenderBlock (floating) {DIV} at (2,2) size 32x32 [bgcolor=#FFFFFF]
-        RenderBlock {DIV} at (2,34) size 796x0
-        RenderBlock (anonymous) at (2,34) size 796x20
+        RenderBlock {DIV} at (2,50) size 796x0
+        RenderBlock (anonymous) at (2,50) size 796x20
           RenderText {#text} at (0,0) size 488x19
             text run at (0,0) width 488: "This text should also be inside a black rectangle and below the 2em white square."
index 7ca0c19..b6b12cd 100644 (file)
@@ -12,7 +12,7 @@ layer at (0,0) size 800x226
             RenderTableCell {TD} at (16,16) size 134x134 [bgcolor=#FF0000] [border: (3px solid #000000)] [r=0 c=0 rs=1 cs=1]
               RenderBlock {DIV} at (3,3) size 128x128 [bgcolor=#00FF00]
                 RenderBlock (floating) {DIV} at (0,0) size 64x64 [bgcolor=#00FFFF]
-                RenderBlock {DIV} at (0,64) size 128x0 [bgcolor=#FF0000]
+                RenderBlock {DIV} at (0,48) size 128x0 [bgcolor=#FF0000]
                 RenderBlock {DIV} at (0,64) size 128x64 [border: (32px solid #FFFF00)]
             RenderTableCell {TD} at (166,16) size 134x134 [bgcolor=#FF0000] [border: (3px solid #000000)] [r=0 c=1 rs=1 cs=1]
               RenderTable {TABLE} at (3,3) size 128x128
index cc9fd18..ea3721b 100644 (file)
@@ -15,8 +15,8 @@ layer at (0,0) size 800x226
                   RenderBlock (floating) {DIV} at (0,0) size 64x64 [bgcolor=#00FFFF]
                   RenderInline {SPAN} at (0,0) size 0x0
                 RenderBlock (anonymous) at (0,0) size 128x48
-                  RenderBlock {DIV} at (0,64) size 128x0 [bgcolor=#FF0000]
-                RenderBlock (anonymous) at (0,64) size 128x0
+                  RenderBlock {DIV} at (0,48) size 128x0 [bgcolor=#FF0000]
+                RenderBlock (anonymous) at (0,48) size 128x0
                   RenderInline {SPAN} at (0,0) size 0x0
                   RenderText {#text} at (0,0) size 0x0
                   RenderInline {SPAN} at (0,0) size 0x0
index 6f84b30..4137a5f 100644 (file)
@@ -1,8 +1,8 @@
-layer at (0,0) size 785x1122
+layer at (0,0) size 785x1142
   RenderView at (0,0) size 785x600
-layer at (0,0) size 785x1122
-  RenderBlock {HTML} at (0,0) size 785x1122
-    RenderBody {BODY} at (8,8) size 769x1106
+layer at (0,0) size 785x1142
+  RenderBlock {HTML} at (0,0) size 785x1142
+    RenderBody {BODY} at (8,8) size 769x1126
       RenderBlock {SPAN} at (0,0) size 769x20
         RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
           RenderText {#text} at (0,0) size 79x59
@@ -11,12 +11,12 @@ layer at (0,0) size 785x1122
             text run at (0,40) width 28: "high."
         RenderText {#text} at (100,0) size 271x19
           text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-      RenderBlock {SPAN} at (0,100) size 769x0
-      RenderBlock {SPAN} at (0,100) size 769x20
+      RenderBlock {SPAN} at (0,75) size 769x0
+      RenderBlock {SPAN} at (0,105) size 769x20
         RenderText {#text} at (0,0) size 282x19
           text run at (0,0) width 282: "This text should be immediately under the float."
-      RenderBlock {HR} at (0,128) size 769x2 [border: (1px inset #000000)]
-      RenderBlock {SPAN} at (0,138) size 769x20
+      RenderBlock {HR} at (0,133) size 769x2 [border: (1px inset #000000)]
+      RenderBlock {SPAN} at (0,143) size 769x20
         RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
           RenderText {#text} at (0,0) size 79x59
             text run at (0,0) width 79: "This is a float"
@@ -24,12 +24,12 @@ layer at (0,0) size 785x1122
             text run at (0,40) width 28: "high."
         RenderText {#text} at (100,0) size 271x19
           text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-      RenderBlock {SPAN} at (0,238) size 769x0
-      RenderBlock {SPAN} at (0,248) size 769x20
+      RenderBlock {SPAN} at (0,218) size 769x0
+      RenderBlock {SPAN} at (0,258) size 769x20
         RenderText {#text} at (0,0) size 242x19
           text run at (0,0) width 242: "This text should be 10px under the float."
-      RenderBlock {HR} at (0,276) size 769x2 [border: (1px inset #000000)]
-      RenderBlock {SPAN} at (0,286) size 769x20
+      RenderBlock {HR} at (0,286) size 769x2 [border: (1px inset #000000)]
+      RenderBlock {SPAN} at (0,296) size 769x20
         RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
           RenderText {#text} at (0,0) size 79x59
             text run at (0,0) width 79: "This is a float"
@@ -37,12 +37,12 @@ layer at (0,0) size 785x1122
             text run at (0,40) width 28: "high."
         RenderText {#text} at (100,0) size 271x19
           text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-      RenderBlock {SPAN} at (0,386) size 769x0
-      RenderBlock {SPAN} at (0,386) size 769x20
-        RenderText {#text} at (0,0) size 282x19
-          text run at (0,0) width 282: "This text should be immediately under the float."
-      RenderBlock {HR} at (0,414) size 769x2 [border: (1px inset #000000)]
-      RenderBlock {SPAN} at (0,424) size 769x20
+      RenderBlock {SPAN} at (0,366) size 769x0
+      RenderBlock {SPAN} at (0,366) size 769x20
+        RenderText {#text} at (100,0) size 253x19
+          text run at (100,0) width 253: "This text should be to the right of the float."
+      RenderBlock {HR} at (100,394) size 669x2 [border: (1px inset #000000)]
+      RenderBlock {SPAN} at (0,404) size 769x20
         RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
           RenderText {#text} at (0,0) size 79x59
             text run at (0,0) width 79: "This is a float"
@@ -50,12 +50,12 @@ layer at (0,0) size 785x1122
             text run at (0,40) width 28: "high."
         RenderText {#text} at (100,0) size 271x19
           text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-      RenderBlock {SPAN} at (0,524) size 769x0
-      RenderBlock {SPAN} at (0,524) size 769x20
+      RenderBlock {SPAN} at (0,479) size 769x0
+      RenderBlock {SPAN} at (0,509) size 769x20
         RenderText {#text} at (0,0) size 282x19
           text run at (0,0) width 282: "This text should be immediately under the float."
-      RenderBlock {HR} at (0,552) size 769x2 [border: (1px inset #000000)]
-      RenderBlock {SPAN} at (0,562) size 769x20
+      RenderBlock {HR} at (0,537) size 769x2 [border: (1px inset #000000)]
+      RenderBlock {SPAN} at (0,547) size 769x20
         RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
           RenderText {#text} at (0,0) size 79x59
             text run at (0,0) width 79: "This is a float"
@@ -63,12 +63,12 @@ layer at (0,0) size 785x1122
             text run at (0,40) width 28: "high."
         RenderText {#text} at (100,0) size 271x19
           text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-      RenderBlock {SPAN} at (0,662) size 769x0
-      RenderBlock {SPAN} at (0,672) size 769x20
+      RenderBlock {SPAN} at (0,617) size 769x0
+      RenderBlock {SPAN} at (0,657) size 769x20
         RenderText {#text} at (0,0) size 242x19
           text run at (0,0) width 242: "This text should be 10px under the float."
-      RenderBlock {HR} at (0,700) size 769x2 [border: (1px inset #000000)]
-      RenderBlock {SPAN} at (0,710) size 769x20
+      RenderBlock {HR} at (0,685) size 769x2 [border: (1px inset #000000)]
+      RenderBlock {SPAN} at (0,695) size 769x20
         RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
           RenderText {#text} at (0,0) size 79x59
             text run at (0,0) width 79: "This is a float"
@@ -76,12 +76,12 @@ layer at (0,0) size 785x1122
             text run at (0,40) width 28: "high."
         RenderText {#text} at (100,0) size 271x19
           text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-      RenderBlock {SPAN} at (0,810) size 769x0
-      RenderBlock {SPAN} at (0,810) size 769x20
-        RenderText {#text} at (0,0) size 282x19
-          text run at (0,0) width 282: "This text should be immediately under the float."
-      RenderBlock {HR} at (0,838) size 769x2 [border: (1px inset #000000)]
-      RenderBlock {SPAN} at (0,848) size 769x120 [border: (10px dotted #000000)]
+      RenderBlock {SPAN} at (0,825) size 769x0
+      RenderBlock {SPAN} at (0,825) size 769x20
+        RenderText {#text} at (0,0) size 242x19
+          text run at (0,0) width 242: "This text should be 20px under the float."
+      RenderBlock {HR} at (0,853) size 769x2 [border: (1px inset #000000)]
+      RenderBlock {SPAN} at (0,863) size 769x125 [border: (10px dotted #000000)]
         RenderBlock {SPAN} at (10,10) size 749x20
           RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
             RenderText {#text} at (0,0) size 79x59
@@ -90,9 +90,9 @@ layer at (0,0) size 785x1122
               text run at (0,40) width 28: "high."
           RenderText {#text} at (100,0) size 271x19
             text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-        RenderBlock {SPAN} at (10,110) size 749x0
-      RenderBlock {HR} at (0,976) size 769x2 [border: (1px inset #000000)]
-      RenderBlock {SPAN} at (0,986) size 769x120 [border: (10px dotted #000000)]
+        RenderBlock {SPAN} at (10,85) size 749x0
+      RenderBlock {HR} at (0,996) size 769x2 [border: (1px inset #000000)]
+      RenderBlock {SPAN} at (0,1006) size 769x120 [border: (10px dotted #000000)]
         RenderBlock {SPAN} at (10,10) size 749x20
           RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
             RenderText {#text} at (0,0) size 79x59
@@ -101,4 +101,4 @@ layer at (0,0) size 785x1122
               text run at (0,40) width 28: "high."
           RenderText {#text} at (100,0) size 271x19
             text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
-        RenderBlock {SPAN} at (10,110) size 749x0
+        RenderBlock {SPAN} at (10,140) size 749x0
index df53ac2..1ed8ee6 100644 (file)
@@ -3617,3 +3617,9 @@ BUGWK95136 : fast/css/sticky/sticky-left-percentage.html = IMAGE
 BUGWK95136 WIN LINUX : fast/css/sticky/sticky-writing-mode-vertical-lr.html = IMAGE
 BUGWK95136 : fast/css/sticky/sticky-writing-mode-vertical-rl.html = IMAGE
 
+//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
+BUGWK80394 MAC WIN : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
+BUGWK80394 MAC WIN : fast/block/float/024.html = IMAGE+TEXT
+BUGWK80394 MAC WIN : fast/block/margin-collapse/025.html = TEXT
+BUGWK80394 MAC WIN : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
+
index 451d274..97993f2 100644 (file)
@@ -1001,3 +1001,10 @@ BUGWK95428 : media/video-controls-captions.html = TEXT
 
 // Fails after r127039.
 BUGWK95414 : inspector/timeline/timeline-load.html = TEXT
+
+//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
+BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
+BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
+BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
+BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
+
index 1a3af77..7acce7b 100644 (file)
@@ -40,6 +40,12 @@ BUGWK77754 : fast/inline/left-right-center-inline-alignment-in-ltr-and-rtl-block
 BUGWK77754 : fast/inline/absolute-positioned-inline-in-centred-block.html = TEXT
 BUGWK77754 : fast/css/absolute-child-with-percent-height-inside-relative-parent.html = TEXT
 
+//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
+BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
+BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
+BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
+BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
+
 //////////////////////////////////////////////////////////////////////////////////////////
 // Expected failures
 //////////////////////////////////////////////////////////////////////////////////////////
index 46ec87e..353ec27 100644 (file)
@@ -363,3 +363,10 @@ BUGWK77754 : fast/inline/absolute-positioned-inline-in-centred-block.html = TEXT
 BUGWK77754 : fast/css/absolute-child-with-percent-height-inside-relative-parent.html = TEXT
 
 BUGWK92464 DEBUG : fast/events/tabindex-focus-blur-all.html = CRASH PASS
+
+//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
+BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
+BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
+BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
+BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
+
index fc482db..46bd50f 100644 (file)
@@ -202,3 +202,9 @@ BUGWK77754 : fast/inline/left-right-center-inline-alignment-in-ltr-and-rtl-block
 BUGWK77754 : fast/inline/absolute-positioned-inline-in-centred-block.html = TEXT
 BUGWK77754 : fast/css/absolute-child-with-percent-height-inside-relative-parent.html = TEXT
 
+//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
+BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
+BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
+BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
+BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
+
index 9e9f57a..ac21d5a 100644 (file)
@@ -2149,3 +2149,10 @@ editing/deleting/delete-br-006.html
 # https://bugs.webkit.org/show_bug.cgi?id=95405
 # Test times out
 platform/win/accessibility/single-select-children.html
+
+# Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
+fast/block/float/024.html
+fast/block/margin-collapse/empty-clear-blocks.html
+fast/block/margin-collapse/025.html
+fast/block/margin-collapse/block-inside-inline/025.html
+
index ebdb7b5..afa5509 100644 (file)
@@ -1,3 +1,38 @@
+2012-08-24  Robert Hogan  <robert@webkit.org>
+
+        CSS 2.1 failure: margin-collapse-clear-012 fails
+        https://bugs.webkit.org/show_bug.cgi?id=80394
+
+        Reviewed by David Hyatt.
+
+        CSS2.1 states: "If the top and bottom margins of an element with clearance are adjoining, its margins collapse with 
+        the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block."
+        This is a change in the spec since http://trac.webkit.org/changeset/47678, so prevent the margins of collapsed blocks from collapsing
+        with parent margins.
+
+        Also, in the case of self-collapsing blocks adjust the clearance so that it is equal to [height of float to clear] - margin-top of the 
+        self-collapsing block. (See the 'Explanation' section near the end of http://www.w3.org/TR/CSS21/visuren.html#clearance). This allows
+        the correct value of any margins collapsed with subsequent siblings to contribute to the height of the parent. For example if a block
+        with margin-top of 40px has to clear a float of 100px, the clearance is now 60px so set that as the height of the parent. If a subsequent 
+        sibling has a collapsed margin value of 140px (e.g. from a margin-top of 80px and a margin-bottom of 140px) then the height of the parent
+        becomes 200px by adding on that collapsed margin. 
+
+        Tests: css2.1/20110323/margin-collapse-clear-012.htm
+               css2.1/20110323/margin-collapse-clear-013.htm
+               css2.1/20110323/margin-collapse-027.htm
+               fast/css/margin-collapse-013-reduction.html
+               fast/css/margin-collapse-top-margin-clearance.html
+               fast/css/margin-collapse-top-margin-clearance-with-sibling.html
+
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::clearFloatsIfNeeded):
+        (WebCore::RenderBlock::handleAfterSideOfBlock): Without this margin-collapse/block-inside-inline/025.html adds in the margin to
+          an anonymous block containing a block child. FF does this, Opera does not. The spec is not crystal-clear but Opera's behaviour
+          seems correct - it's totally unintuitive to think the margins of an anonymous block and its block-flow child should be considered adjoining.
+          Maybe this is a FIXME pending clarification in the spec?
+        * rendering/RenderBlock.h:
+        (WebCore::RenderBlock::MarginInfo::setCanCollapseMarginAfterWithChildren):
+
 2012-08-30  Rik Cabanier  <cabanier@adobe.com>
 
         Add support for blendmode to webkit rendering engine
index 320a786..098f79a 100755 (executable)
@@ -2082,28 +2082,28 @@ LayoutUnit RenderBlock::clearFloatsIfNeeded(RenderBox* child, MarginInfo& margin
         // For self-collapsing blocks that clear, they can still collapse their
         // margins with following siblings.  Reset the current margins to represent
         // the self-collapsing block's margins only.
-        // CSS2.1 states:
-        // "An element that has had clearance applied to it never collapses its top margin with its parent block's bottom margin.
-        // Therefore if we are at the bottom of the block, let's go ahead and reset margins to only include the
-        // self-collapsing block's bottom margin.
-        bool atBottomOfBlock = true;
-        for (RenderBox* curr = child->nextSiblingBox(); curr && atBottomOfBlock; curr = curr->nextSiblingBox()) {
-            if (!curr->isFloatingOrOutOfFlowPositioned())
-                atBottomOfBlock = false;
-        }
-        
         MarginValues childMargins = marginValuesForChild(child);
-        if (atBottomOfBlock) {
-            marginInfo.setPositiveMargin(childMargins.positiveMarginAfter());
-            marginInfo.setNegativeMargin(childMargins.negativeMarginAfter());
-        } else {
-            marginInfo.setPositiveMargin(max(childMargins.positiveMarginBefore(), childMargins.positiveMarginAfter()));
-            marginInfo.setNegativeMargin(max(childMargins.negativeMarginBefore(), childMargins.negativeMarginAfter()));
-        }
-        
-        // Adjust our height such that we are ready to be collapsed with subsequent siblings (or the bottom
-        // of the parent block).
-        setLogicalHeight(child->logicalTop() - max(ZERO_LAYOUT_UNIT, marginInfo.margin()));
+        marginInfo.setPositiveMargin(max(childMargins.positiveMarginBefore(), childMargins.positiveMarginAfter()));
+        marginInfo.setNegativeMargin(max(childMargins.negativeMarginBefore(), childMargins.negativeMarginAfter()));
+
+        // CSS2.1 states:
+        // "If the top and bottom margins of an element with clearance are adjoining, its margins collapse with 
+        // the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block."
+        // So the parent's bottom margin cannot collapse through this block or any subsequent self-collapsing blocks. Check subsequent siblings
+        // for a block with height - if none is found then don't allow the margins to collapse with the parent.
+        bool wouldCollapseMarginsWithParent = marginInfo.canCollapseMarginAfterWithChildren();
+        for (RenderBox* curr = child->nextSiblingBox(); curr && wouldCollapseMarginsWithParent; curr = curr->nextSiblingBox()) {
+            if (!curr->isFloatingOrOutOfFlowPositioned() && !curr->isSelfCollapsingBlock())
+                wouldCollapseMarginsWithParent = false;
+        }
+        if (wouldCollapseMarginsWithParent)
+            marginInfo.setCanCollapseMarginAfterWithChildren(false);
+
+        // CSS2.1: "the amount of clearance is set so that clearance + margin-top = [height of float], i.e., clearance = [height of float] - margin-top"
+        // Move the top of the child box to the bottom of the float ignoring the child's top margin.
+        LayoutUnit collapsedMargin = collapsedMarginBeforeForChild(child);
+        setLogicalHeight(child->logicalTop() - collapsedMargin);
+        heightIncrease -= collapsedMargin;
     } else
         // Increase our height by the amount we had to clear.
         setLogicalHeight(logicalHeight() + heightIncrease);
@@ -2117,8 +2117,14 @@ LayoutUnit RenderBlock::clearFloatsIfNeeded(RenderBox* child, MarginInfo& margin
         setMaxMarginBeforeValues(oldTopPosMargin, oldTopNegMargin);
         marginInfo.setAtBeforeSideOfBlock(false);
     }
-    
-    return yPos + heightIncrease;
+
+    LayoutUnit logicalTop = yPos + heightIncrease;
+    // After margin collapsing, one of our floats may now intrude into the child. If the child doesn't contain floats of its own it
+    // won't get picked up for relayout even though the logical top estimate was wrong - so add the newly intruding float now.
+    if (containsFloats() && child->isRenderBlock() && !toRenderBlock(child)->containsFloats() && lowestFloatLogicalBottom() > logicalTop)
+        toRenderBlock(child)->addIntrudingFloats(this, logicalLeftOffsetForContent(), logicalTop);
+
+    return logicalTop;
 }
 
 void RenderBlock::marginBeforeEstimateForChild(RenderBox* child, LayoutUnit& positiveMarginBefore, LayoutUnit& negativeMarginBefore) const
@@ -2279,7 +2285,10 @@ void RenderBlock::handleAfterSideOfBlock(LayoutUnit beforeSide, LayoutUnit after
     marginInfo.setAtAfterSideOfBlock(true);
 
     // If we can't collapse with children then go ahead and add in the bottom margin.
+    // Don't do this for ordinary anonymous blocks as only the enclosing box should add in
+    // its margin.
     if (!marginInfo.canCollapseWithMarginAfter() && !marginInfo.canCollapseWithMarginBefore()
+        && (!isAnonymousBlock() || isAnonymousColumnsBlock() || isAnonymousColumnSpanBlock())
         && (!document()->inQuirksMode() || !marginInfo.quirkContainer() || !marginInfo.marginAfterQuirk()))
         setLogicalHeight(logicalHeight() + marginInfo.margin());
         
index 14ea67f..a33eeaf 100644 (file)
@@ -930,6 +930,7 @@ private:
         bool canCollapseWithMarginAfter() const { return m_atAfterSideOfBlock && m_canCollapseMarginAfterWithChildren; }
         bool canCollapseMarginBeforeWithChildren() const { return m_canCollapseMarginBeforeWithChildren; }
         bool canCollapseMarginAfterWithChildren() const { return m_canCollapseMarginAfterWithChildren; }
+        void setCanCollapseMarginAfterWithChildren(bool collapse) { m_canCollapseMarginAfterWithChildren = collapse; }
         bool quirkContainer() const { return m_quirkContainer; }
         bool determinedMarginBeforeQuirk() const { return m_determinedMarginBeforeQuirk; }
         bool marginBeforeQuirk() const { return m_marginBeforeQuirk; }