[CSS21] transitivity of margin-collapsing and min/max-height

My understanding of what we previously agreed with regard to margin
collapsing was that margin collapsing is effectively a transitive
relationship.  In other words, if margin A collapses with margin B,
and margin B collapses with margin C, then margins A and C collapse
together.

I think the wording in the spec that was, I believe, intended to say
this, is not particularly clear.
http://dev.w3.org/csswg/css2/box.html#collapsing-margins says:
  # A collapsed margin is considered adjoining to another margin if
  # any of its component margins is adjoining to that margin.
which to some degree contradicts the previous paragraph:
  # Two margins are adjoining if and only if:  [...]

I've run into a testcase that I'm having trouble explaining based on
the current spec.  In particular, I was trying to fix Gecko to match
the rule that min-height and max-height does NOT break
margin-collapsing in most cases.

The fix fixes a bunch of testcases for the problem, which I believe
makes them match other browsers better (though I haven't checked all
that closely).

However, there's one testcase where Gecko, Blink, IE, and Presto are
currently interoperable where this fix changes Gecko's behavior
(also attached):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.separator {
 height: 20px;
 background-color: green;
}
#min-height {
 min-height: 20px;
 margin-top: 30px;
 margin-bottom: 40px;
 background-color: blue;
}
#zero-height {
 margin-top: 20px;
 margin-bottom: 60px;
}
</style>
</head>
<body>
<div class="separator"></div>
<div id="min-height">
 <div id="zero-height"></div>
</div>
<div class="separator"></div>
</body>
</html>

In particular, the lower gap in this test is currently interoperably
40px.  (The upper gap is clearly 60px; that's not in question.)  My
patch changes it to 60px, which I also believe is incorrect.  I
believe, based on the transitivity of margin collapsing, that it
should actually be -20px according to the current spec, because:

 1. the top margin of #min-height should collapse with the top
 margin of #zero-height due to the "top margin of a box and top
 margin of its first in-flow child" rule in
 http://dev.w3.org/csswg/css2/box.html#collapsing-margins

 2. the top-margin of #zero-height and the bottom margin of
 #zero-height should collapse due to the "top and bottom margins of
 a box that does not establish a new block formatting context and
 that has zero computed 'min-height', zero or 'auto' computed
 'height', and no in-flow children" rule

 3. the bottom margin of #zero-height and the bottom margin of
 #min-height should collapse due to the "bottom margin of a last
 in-flow child and bottom margin of its parent if the parent has
 'auto' computed height" rule

This in turn means that the top and bottom margins of #min-height
should collapse together despite the min-height, due to the
vaguely-worded rule "A collapsed margin is considered adjoining to
another margin if any of its component margins is adjoining to that
margin." which I believe would be improved by the changes proposed
in https://lists.w3.org/Archives/Public/www-style/2010Jul/0507.html
or https://lists.w3.org/Archives/Public/www-style/2012Mar/0057.html .


It seems to me, however, that we'd be better off keeping and
specifying the existing interoperable behavior.  However, I don't
know how to explain that behavior.

-David

-- 
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)

Attachments

Received on Sunday, 8 February 2015 23:05:11 UTC