[css-sizing-4] Should we mention aspect-ratio in margin collapsing? · Issue #5328 · w3c/csswg-drafts (original) (raw)

Based on the spec definition of margin-collasping, there are at least two items which mention auto computed height:

Two margins are adjoining if and only if:
...
both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

• top margin of a box and top margin of its first in-flow child
• bottom margin of box and top margin of its next in-flow following sibling
• bottom margin of a last in-flow child and bottom margin of its parent if the parent has auto computed height
• 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

If height is the ratio-dependent axis, should we also take aspect-ratio into account for these cases?

For example:

#parent {
  margin: 0px;
  width: 100px;
}
#child {
  margin-top: 50px;
  margin-bottom: 200px;
  width: 100px;
  aspect-ratio: 1/1;
}
<div id='parent'>
  <div id='child'></div>
</div>

Based on the current spec words, the computed height of parent is auto, so we merge the bottom margins of parent and child, and so the final bottom margin of parent is 200px (i.e. std::max(0px, 200px)).
And child is not empty (because of aspect-ratio), so we don't merge the top and bottom margins of child (and parent). Therefore, the final top margin is 50px (i.e. std::max(0px, 50px)). Is this correct?

Another case

#parent {
  margin: 0px;
  width: 100px;
  aspect-ratio: 1/1;
}
#child {
  margin-top: 50px;
  margin-bottom: 200px;
  width: 100px;
}
<div id='parent'>
  <div id='child'></div>
</div>

The child is content empty, so we merge the margins of the child as 200px (i.e. std::max(50px, 200px)).
The parent has aspect-ratio, so it has the block context (and its used height is 100px), right?
So the final top margin of parent is 200px (which is carried out from child), and the final bottom margin of parent is 200px (which is also carried out from child, because the computed height of parent is auto)? I may be wrong.
I'm confused about this case actually. It seems the final bottom margin is 0px in Chrome now (note: I guess it treats the aspect-ratio:1/1 as a non-auto height?).

cc @fantasai @cbiesinger @bfgeek