Changeset 127163 in webkit


Ignore:
Timestamp:
Aug 30, 2012 11:15:13 AM (12 years ago)
Author:
robert@webkit.org
Message:

CSS 2.1 failure: margin-collapse-clear-012 fails
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.
Location:
trunk
Files:
20 added
17 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r127162 r127163  
     12012-08-24  Robert Hogan  <robert@webkit.org>
     2
     3        CSS 2.1 failure: margin-collapse-clear-012 fails
     4        https://bugs.webkit.org/show_bug.cgi?id=80394
     5
     6        Reviewed by David Hyatt.
     7
     8        * css2.1/20110323/margin-collapse-027-expected.html: Added.
     9        * css2.1/20110323/margin-collapse-027.htm: Added.
     10        * css2.1/20110323/margin-collapse-clear-012-expected.html: Added.
     11        * css2.1/20110323/margin-collapse-clear-012.htm: Added.
     12        * css2.1/20110323/margin-collapse-clear-013-expected.html: Added.
     13        * css2.1/20110323/margin-collapse-clear-013.htm: Added.
     14        * css2.1/20110323/margin-collapse-clear-014-expected.html: Added.
     15        * css2.1/20110323/margin-collapse-clear-014.htm: Added.
     16        * css2.1/20110323/margin-collapse-clear-015-expected.html: Added.
     17        * css2.1/20110323/margin-collapse-clear-015.htm: Added.
     18        * css2.1/20110323/margin-collapse-clear-016-expected.html: Added.
     19        * css2.1/20110323/margin-collapse-clear-016.htm: Added.
     20        * css2.1/20110323/margin-collapse-clear-017-expected.html: Added.
     21        * css2.1/20110323/margin-collapse-clear-017.htm: Added.
     22        * fast/block/margin-collapse/empty-clear-blocks.html:
     23          Modified the test to reflect the new expected result. The text in the third paragraph avoids
     24          the float rather than sitting underneath it. The text in the third last paragraph is 20 px below
     25          the float rather than immediately beneath it. Both of these are a consequence of the revised treatment
     26          of clearance when margin collapsing. This is consistent with the spec and FF and Opera.
     27        * fast/css/margin-collapse-013-reduction.html: Added.
     28           Sourced from https://bugzilla.mozilla.org/show_bug.cgi?id=493380
     29        * fast/css/margin-collapse-top-margin-clearance-with-sibling-expected.html: Added.
     30        * fast/css/margin-collapse-top-margin-clearance-with-sibling.html: Added.
     31            Ensure we only avoid collapsing the margins of a self-collapsing block with the parent if we don't
     32            have a subsequent sibling with height.
     33        * fast/css/margin-collapse-top-margin-clearance.html: Added.
     34
     35        * platform/chromium-linux/fast/block/float/024-expected.png:
     36        * platform/chromium-linux/fast/block/margin-collapse/empty-clear-blocks-expected.png:
     37          These two progress to the same rendering used by FF and Opera. It is a consequence of calculating
     38          clearance as "clearance = [height of float] - margin-top" when margin-top is a negative value.
     39
     40        * platform/chromium-win/fast/block/float/024-expected.txt:
     41        * platform/chromium-win/fast/block/margin-collapse/025-expected.txt:
     42        * platform/chromium-win/fast/block/margin-collapse/block-inside-inline/025-expected.txt:
     43            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
     44            of their top margin. Unlike the block-inside-inline case the 'clear' has no intrinsic height so the uncollapsed margin value has
     45            no effect on its height.
     46
     47        * platform/chromium-win/fast/block/margin-collapse/empty-clear-blocks-expected.txt: See the png result above for comment.
     48           
    1492012-08-30  Rik Cabanier  <cabanier@adobe.com>
    250
  • trunk/LayoutTests/fast/block/margin-collapse/empty-clear-blocks.html

    r16443 r127163  
    2828This paragraph has a bottom margin of 50px.</span>
    2929<span style="clear:both; margin-top:30px;margin-bottom:-60px"></span>
    30 <span style="margin-top:60px">This text should be immediately under the float.</span>
     30<span style="margin-top:60px">This text should be to the right of the float.</span>
    3131<hr>
    3232<span style="margin-bottom:50px"><div>This is a float that is 100px high.</div>
     
    4343This paragraph has a bottom margin of 50px.</span>
    4444<span style="clear:both; margin-top:-30px"></span>
    45 <span style="margin-top:30px">This text should be immediately under the float.</span>
     45<span style="margin-top:30px">This text should be 20px under the float.</span>
    4646<hr>
    4747<span style="border:10px dotted black">
  • trunk/LayoutTests/platform/chromium-win/fast/block/float/024-expected.txt

    r56264 r127163  
    1313      RenderBlock {DIV} at (0,221) size 800x56 [bgcolor=#DDDDDD] [border: (2px solid #000000)]
    1414        RenderBlock (floating) {DIV} at (2,2) size 32x32 [bgcolor=#FFFFFF]
    15         RenderBlock {DIV} at (2,34) size 796x0
     15        RenderBlock {DIV} at (2,18) size 796x0
    1616        RenderBlock (anonymous) at (2,34) size 796x20
    1717          RenderText {#text} at (0,0) size 460x19
    1818            text run at (0,0) width 460: "This text should be inside a black rectangle and below the 2em white square."
    19       RenderBlock {DIV} at (0,293) size 800x56 [bgcolor=#DDDDDD] [border: (2px solid #000000)]
     19      RenderBlock {DIV} at (0,293) size 800x72 [bgcolor=#DDDDDD] [border: (2px solid #000000)]
    2020        RenderBlock (floating) {DIV} at (2,2) size 32x32 [bgcolor=#FFFFFF]
    21         RenderBlock {DIV} at (2,34) size 796x0
    22         RenderBlock (anonymous) at (2,34) size 796x20
     21        RenderBlock {DIV} at (2,50) size 796x0
     22        RenderBlock (anonymous) at (2,50) size 796x20
    2323          RenderText {#text} at (0,0) size 488x19
    2424            text run at (0,0) width 488: "This text should also be inside a black rectangle and below the 2em white square."
  • trunk/LayoutTests/platform/chromium-win/fast/block/margin-collapse/025-expected.txt

    r56264 r127163  
    1313              RenderBlock {DIV} at (3,3) size 128x128 [bgcolor=#00FF00]
    1414                RenderBlock (floating) {DIV} at (0,0) size 64x64 [bgcolor=#00FFFF]
    15                 RenderBlock {DIV} at (0,64) size 128x0 [bgcolor=#FF0000]
     15                RenderBlock {DIV} at (0,48) size 128x0 [bgcolor=#FF0000]
    1616                RenderBlock {DIV} at (0,64) size 128x64 [border: (32px solid #FFFF00)]
    1717            RenderTableCell {TD} at (166,16) size 134x134 [bgcolor=#FF0000] [border: (3px solid #000000)] [r=0 c=1 rs=1 cs=1]
  • trunk/LayoutTests/platform/chromium-win/fast/block/margin-collapse/block-inside-inline/025-expected.txt

    r56264 r127163  
    1616                  RenderInline {SPAN} at (0,0) size 0x0
    1717                RenderBlock (anonymous) at (0,0) size 128x48
    18                   RenderBlock {DIV} at (0,64) size 128x0 [bgcolor=#FF0000]
    19                 RenderBlock (anonymous) at (0,64) size 128x0
     18                  RenderBlock {DIV} at (0,48) size 128x0 [bgcolor=#FF0000]
     19                RenderBlock (anonymous) at (0,48) size 128x0
    2020                  RenderInline {SPAN} at (0,0) size 0x0
    2121                  RenderText {#text} at (0,0) size 0x0
  • trunk/LayoutTests/platform/chromium-win/fast/block/margin-collapse/empty-clear-blocks-expected.txt

    r56264 r127163  
    1 layer at (0,0) size 785x1122
     1layer at (0,0) size 785x1142
    22  RenderView at (0,0) size 785x600
    3 layer at (0,0) size 785x1122
    4   RenderBlock {HTML} at (0,0) size 785x1122
    5     RenderBody {BODY} at (8,8) size 769x1106
     3layer at (0,0) size 785x1142
     4  RenderBlock {HTML} at (0,0) size 785x1142
     5    RenderBody {BODY} at (8,8) size 769x1126
    66      RenderBlock {SPAN} at (0,0) size 769x20
    77        RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
     
    1212        RenderText {#text} at (100,0) size 271x19
    1313          text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    14       RenderBlock {SPAN} at (0,100) size 769x0
    15       RenderBlock {SPAN} at (0,100) size 769x20
     14      RenderBlock {SPAN} at (0,75) size 769x0
     15      RenderBlock {SPAN} at (0,105) size 769x20
    1616        RenderText {#text} at (0,0) size 282x19
    1717          text run at (0,0) width 282: "This text should be immediately under the float."
    18       RenderBlock {HR} at (0,128) size 769x2 [border: (1px inset #000000)]
    19       RenderBlock {SPAN} at (0,138) size 769x20
     18      RenderBlock {HR} at (0,133) size 769x2 [border: (1px inset #000000)]
     19      RenderBlock {SPAN} at (0,143) size 769x20
    2020        RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
    2121          RenderText {#text} at (0,0) size 79x59
     
    2525        RenderText {#text} at (100,0) size 271x19
    2626          text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    27       RenderBlock {SPAN} at (0,238) size 769x0
    28       RenderBlock {SPAN} at (0,248) size 769x20
     27      RenderBlock {SPAN} at (0,218) size 769x0
     28      RenderBlock {SPAN} at (0,258) size 769x20
    2929        RenderText {#text} at (0,0) size 242x19
    3030          text run at (0,0) width 242: "This text should be 10px under the float."
    31       RenderBlock {HR} at (0,276) size 769x2 [border: (1px inset #000000)]
    32       RenderBlock {SPAN} at (0,286) size 769x20
     31      RenderBlock {HR} at (0,286) size 769x2 [border: (1px inset #000000)]
     32      RenderBlock {SPAN} at (0,296) size 769x20
    3333        RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
    3434          RenderText {#text} at (0,0) size 79x59
     
    3838        RenderText {#text} at (100,0) size 271x19
    3939          text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    40       RenderBlock {SPAN} at (0,386) size 769x0
    41       RenderBlock {SPAN} at (0,386) size 769x20
    42         RenderText {#text} at (0,0) size 282x19
    43           text run at (0,0) width 282: "This text should be immediately under the float."
    44       RenderBlock {HR} at (0,414) size 769x2 [border: (1px inset #000000)]
    45       RenderBlock {SPAN} at (0,424) size 769x20
     40      RenderBlock {SPAN} at (0,366) size 769x0
     41      RenderBlock {SPAN} at (0,366) size 769x20
     42        RenderText {#text} at (100,0) size 253x19
     43          text run at (100,0) width 253: "This text should be to the right of the float."
     44      RenderBlock {HR} at (100,394) size 669x2 [border: (1px inset #000000)]
     45      RenderBlock {SPAN} at (0,404) size 769x20
    4646        RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
    4747          RenderText {#text} at (0,0) size 79x59
     
    5151        RenderText {#text} at (100,0) size 271x19
    5252          text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    53       RenderBlock {SPAN} at (0,524) size 769x0
    54       RenderBlock {SPAN} at (0,524) size 769x20
     53      RenderBlock {SPAN} at (0,479) size 769x0
     54      RenderBlock {SPAN} at (0,509) size 769x20
    5555        RenderText {#text} at (0,0) size 282x19
    5656          text run at (0,0) width 282: "This text should be immediately under the float."
    57       RenderBlock {HR} at (0,552) size 769x2 [border: (1px inset #000000)]
    58       RenderBlock {SPAN} at (0,562) size 769x20
     57      RenderBlock {HR} at (0,537) size 769x2 [border: (1px inset #000000)]
     58      RenderBlock {SPAN} at (0,547) size 769x20
    5959        RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
    6060          RenderText {#text} at (0,0) size 79x59
     
    6464        RenderText {#text} at (100,0) size 271x19
    6565          text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    66       RenderBlock {SPAN} at (0,662) size 769x0
    67       RenderBlock {SPAN} at (0,672) size 769x20
     66      RenderBlock {SPAN} at (0,617) size 769x0
     67      RenderBlock {SPAN} at (0,657) size 769x20
    6868        RenderText {#text} at (0,0) size 242x19
    6969          text run at (0,0) width 242: "This text should be 10px under the float."
    70       RenderBlock {HR} at (0,700) size 769x2 [border: (1px inset #000000)]
    71       RenderBlock {SPAN} at (0,710) size 769x20
     70      RenderBlock {HR} at (0,685) size 769x2 [border: (1px inset #000000)]
     71      RenderBlock {SPAN} at (0,695) size 769x20
    7272        RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
    7373          RenderText {#text} at (0,0) size 79x59
     
    7777        RenderText {#text} at (100,0) size 271x19
    7878          text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    79       RenderBlock {SPAN} at (0,810) size 769x0
    80       RenderBlock {SPAN} at (0,810) size 769x20
    81         RenderText {#text} at (0,0) size 282x19
    82           text run at (0,0) width 282: "This text should be immediately under the float."
    83       RenderBlock {HR} at (0,838) size 769x2 [border: (1px inset #000000)]
    84       RenderBlock {SPAN} at (0,848) size 769x120 [border: (10px dotted #000000)]
     79      RenderBlock {SPAN} at (0,825) size 769x0
     80      RenderBlock {SPAN} at (0,825) size 769x20
     81        RenderText {#text} at (0,0) size 242x19
     82          text run at (0,0) width 242: "This text should be 20px under the float."
     83      RenderBlock {HR} at (0,853) size 769x2 [border: (1px inset #000000)]
     84      RenderBlock {SPAN} at (0,863) size 769x125 [border: (10px dotted #000000)]
    8585        RenderBlock {SPAN} at (10,10) size 749x20
    8686          RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
     
    9191          RenderText {#text} at (100,0) size 271x19
    9292            text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    93         RenderBlock {SPAN} at (10,110) size 749x0
    94       RenderBlock {HR} at (0,976) size 769x2 [border: (1px inset #000000)]
    95       RenderBlock {SPAN} at (0,986) size 769x120 [border: (10px dotted #000000)]
     93        RenderBlock {SPAN} at (10,85) size 749x0
     94      RenderBlock {HR} at (0,996) size 769x2 [border: (1px inset #000000)]
     95      RenderBlock {SPAN} at (0,1006) size 769x120 [border: (10px dotted #000000)]
    9696        RenderBlock {SPAN} at (10,10) size 749x20
    9797          RenderBlock (floating) {DIV} at (0,0) size 100x100 [bgcolor=#00FF00]
     
    102102          RenderText {#text} at (100,0) size 271x19
    103103            text run at (100,0) width 271: "This paragraph has a bottom margin of 50px."
    104         RenderBlock {SPAN} at (10,110) size 749x0
     104        RenderBlock {SPAN} at (10,140) size 749x0
  • trunk/LayoutTests/platform/chromium/TestExpectations

    r127159 r127163  
    36183618BUGWK95136 : fast/css/sticky/sticky-writing-mode-vertical-rl.html = IMAGE
    36193619
     3620//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
     3621BUGWK80394 MAC WIN : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
     3622BUGWK80394 MAC WIN : fast/block/float/024.html = IMAGE+TEXT
     3623BUGWK80394 MAC WIN : fast/block/margin-collapse/025.html = TEXT
     3624BUGWK80394 MAC WIN : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
     3625
  • trunk/LayoutTests/platform/efl/TestExpectations

    r127127 r127163  
    10021002// Fails after r127039.
    10031003BUGWK95414 : inspector/timeline/timeline-load.html = TEXT
     1004
     1005//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
     1006BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
     1007BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
     1008BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
     1009BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
     1010
  • trunk/LayoutTests/platform/gtk/TestExpectations

    r127130 r127163  
    4040BUGWK77754 : fast/inline/absolute-positioned-inline-in-centred-block.html = TEXT
    4141BUGWK77754 : fast/css/absolute-child-with-percent-height-inside-relative-parent.html = TEXT
     42
     43//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
     44BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
     45BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
     46BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
     47BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
    4248
    4349//////////////////////////////////////////////////////////////////////////////////////////
  • trunk/LayoutTests/platform/mac/TestExpectations

    r127050 r127163  
    364364
    365365BUGWK92464 DEBUG : fast/events/tabindex-focus-blur-all.html = CRASH PASS
     366
     367//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
     368BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
     369BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
     370BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
     371BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
     372
  • trunk/LayoutTests/platform/qt/TestExpectations

    r126911 r127163  
    203203BUGWK77754 : fast/css/absolute-child-with-percent-height-inside-relative-parent.html = TEXT
    204204
     205//Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
     206BUGWK80394 : fast/block/margin-collapse/empty-clear-blocks.html = IMAGE+TEXT
     207BUGWK80394 : fast/block/float/024.html = IMAGE+TEXT
     208BUGWK80394 : fast/block/margin-collapse/025.html = TEXT
     209BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
     210
  • trunk/LayoutTests/platform/win/Skipped

    r127101 r127163  
    21502150# Test times out
    21512151platform/win/accessibility/single-select-children.html
     2152
     2153# Require rebaseline after https://bugs.webkit.org/show_bug.cgi?id=80394
     2154fast/block/float/024.html
     2155fast/block/margin-collapse/empty-clear-blocks.html
     2156fast/block/margin-collapse/025.html
     2157fast/block/margin-collapse/block-inside-inline/025.html
     2158
  • trunk/Source/WebCore/ChangeLog

    r127162 r127163  
     12012-08-24  Robert Hogan  <robert@webkit.org>
     2
     3        CSS 2.1 failure: margin-collapse-clear-012 fails
     4        https://bugs.webkit.org/show_bug.cgi?id=80394
     5
     6        Reviewed by David Hyatt.
     7
     8        CSS2.1 states: "If the top and bottom margins of an element with clearance are adjoining, its margins collapse with
     9        the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block."
     10        This is a change in the spec since http://trac.webkit.org/changeset/47678, so prevent the margins of collapsed blocks from collapsing
     11        with parent margins.
     12
     13        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
     14        self-collapsing block. (See the 'Explanation' section near the end of http://www.w3.org/TR/CSS21/visuren.html#clearance). This allows
     15        the correct value of any margins collapsed with subsequent siblings to contribute to the height of the parent. For example if a block
     16        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
     17        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
     18        becomes 200px by adding on that collapsed margin.
     19
     20        Tests: css2.1/20110323/margin-collapse-clear-012.htm
     21               css2.1/20110323/margin-collapse-clear-013.htm
     22               css2.1/20110323/margin-collapse-027.htm
     23               fast/css/margin-collapse-013-reduction.html
     24               fast/css/margin-collapse-top-margin-clearance.html
     25               fast/css/margin-collapse-top-margin-clearance-with-sibling.html
     26
     27        * rendering/RenderBlock.cpp:
     28        (WebCore::RenderBlock::clearFloatsIfNeeded):
     29        (WebCore::RenderBlock::handleAfterSideOfBlock): Without this margin-collapse/block-inside-inline/025.html adds in the margin to
     30          an anonymous block containing a block child. FF does this, Opera does not. The spec is not crystal-clear but Opera's behaviour
     31          seems correct - it's totally unintuitive to think the margins of an anonymous block and its block-flow child should be considered adjoining.
     32          Maybe this is a FIXME pending clarification in the spec?
     33        * rendering/RenderBlock.h:
     34        (WebCore::RenderBlock::MarginInfo::setCanCollapseMarginAfterWithChildren):
     35
    1362012-08-30  Rik Cabanier  <cabanier@adobe.com>
    237
  • trunk/Source/WebCore/rendering/RenderBlock.cpp

    r127155 r127163  
    20832083        // margins with following siblings.  Reset the current margins to represent
    20842084        // the self-collapsing block's margins only.
     2085        MarginValues childMargins = marginValuesForChild(child);
     2086        marginInfo.setPositiveMargin(max(childMargins.positiveMarginBefore(), childMargins.positiveMarginAfter()));
     2087        marginInfo.setNegativeMargin(max(childMargins.negativeMarginBefore(), childMargins.negativeMarginAfter()));
     2088
    20852089        // CSS2.1 states:
    2086         // "An element that has had clearance applied to it never collapses its top margin with its parent block's bottom margin.
    2087         // Therefore if we are at the bottom of the block, let's go ahead and reset margins to only include the
    2088         // self-collapsing block's bottom margin.
    2089         bool atBottomOfBlock = true;
    2090         for (RenderBox* curr = child->nextSiblingBox(); curr && atBottomOfBlock; curr = curr->nextSiblingBox()) {
    2091             if (!curr->isFloatingOrOutOfFlowPositioned())
    2092                 atBottomOfBlock = false;
    2093         }
    2094        
    2095         MarginValues childMargins = marginValuesForChild(child);
    2096         if (atBottomOfBlock) {
    2097             marginInfo.setPositiveMargin(childMargins.positiveMarginAfter());
    2098             marginInfo.setNegativeMargin(childMargins.negativeMarginAfter());
    2099         } else {
    2100             marginInfo.setPositiveMargin(max(childMargins.positiveMarginBefore(), childMargins.positiveMarginAfter()));
    2101             marginInfo.setNegativeMargin(max(childMargins.negativeMarginBefore(), childMargins.negativeMarginAfter()));
    2102         }
    2103        
    2104         // Adjust our height such that we are ready to be collapsed with subsequent siblings (or the bottom
    2105         // of the parent block).
    2106         setLogicalHeight(child->logicalTop() - max(ZERO_LAYOUT_UNIT, marginInfo.margin()));
     2090        // "If the top and bottom margins of an element with clearance are adjoining, its margins collapse with
     2091        // the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block."
     2092        // So the parent's bottom margin cannot collapse through this block or any subsequent self-collapsing blocks. Check subsequent siblings
     2093        // for a block with height - if none is found then don't allow the margins to collapse with the parent.
     2094        bool wouldCollapseMarginsWithParent = marginInfo.canCollapseMarginAfterWithChildren();
     2095        for (RenderBox* curr = child->nextSiblingBox(); curr && wouldCollapseMarginsWithParent; curr = curr->nextSiblingBox()) {
     2096            if (!curr->isFloatingOrOutOfFlowPositioned() && !curr->isSelfCollapsingBlock())
     2097                wouldCollapseMarginsWithParent = false;
     2098        }
     2099        if (wouldCollapseMarginsWithParent)
     2100            marginInfo.setCanCollapseMarginAfterWithChildren(false);
     2101
     2102        // CSS2.1: "the amount of clearance is set so that clearance + margin-top = [height of float], i.e., clearance = [height of float] - margin-top"
     2103        // Move the top of the child box to the bottom of the float ignoring the child's top margin.
     2104        LayoutUnit collapsedMargin = collapsedMarginBeforeForChild(child);
     2105        setLogicalHeight(child->logicalTop() - collapsedMargin);
     2106        heightIncrease -= collapsedMargin;
    21072107    } else
    21082108        // Increase our height by the amount we had to clear.
     
    21182118        marginInfo.setAtBeforeSideOfBlock(false);
    21192119    }
    2120    
    2121     return yPos + heightIncrease;
     2120
     2121    LayoutUnit logicalTop = yPos + heightIncrease;
     2122    // After margin collapsing, one of our floats may now intrude into the child. If the child doesn't contain floats of its own it
     2123    // won't get picked up for relayout even though the logical top estimate was wrong - so add the newly intruding float now.
     2124    if (containsFloats() && child->isRenderBlock() && !toRenderBlock(child)->containsFloats() && lowestFloatLogicalBottom() > logicalTop)
     2125        toRenderBlock(child)->addIntrudingFloats(this, logicalLeftOffsetForContent(), logicalTop);
     2126
     2127    return logicalTop;
    21222128}
    21232129
     
    22802286
    22812287    // If we can't collapse with children then go ahead and add in the bottom margin.
     2288    // Don't do this for ordinary anonymous blocks as only the enclosing box should add in
     2289    // its margin.
    22822290    if (!marginInfo.canCollapseWithMarginAfter() && !marginInfo.canCollapseWithMarginBefore()
     2291        && (!isAnonymousBlock() || isAnonymousColumnsBlock() || isAnonymousColumnSpanBlock())
    22832292        && (!document()->inQuirksMode() || !marginInfo.quirkContainer() || !marginInfo.marginAfterQuirk()))
    22842293        setLogicalHeight(logicalHeight() + marginInfo.margin());
  • trunk/Source/WebCore/rendering/RenderBlock.h

    r127155 r127163  
    931931        bool canCollapseMarginBeforeWithChildren() const { return m_canCollapseMarginBeforeWithChildren; }
    932932        bool canCollapseMarginAfterWithChildren() const { return m_canCollapseMarginAfterWithChildren; }
     933        void setCanCollapseMarginAfterWithChildren(bool collapse) { m_canCollapseMarginAfterWithChildren = collapse; }
    933934        bool quirkContainer() const { return m_quirkContainer; }
    934935        bool determinedMarginBeforeQuirk() const { return m_determinedMarginBeforeQuirk; }
Note: See TracChangeset for help on using the changeset viewer.