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
Based on the spec definition of margin-collasping, there are at least two items which mention
autocomputedheight:If
heightis the ratio-dependent axis, should we also take aspect-ratio into account for these cases?For example:
Based on the current spec words, the computed height of
parentisauto, so we merge the bottom margins ofparentandchild, and so the final bottom margin ofparentis 200px (i.e.std::max(0px, 200px)).And
childis not empty (because ofaspect-ratio), so we don't merge the top and bottom margins ofchild(andparent). Therefore, the final top margin is 50px (i.e.std::max(0px, 50px)). Is this correct?Another case
The
childis content empty, so we merge the margins of thechildas 200px (i.e.std::max(50px, 200px)).The
parenthas aspect-ratio, so it has the block context (and its used height is 100px), right?So the final top margin of
parentis 200px (which is carried out fromchild), and the final bottom margin ofparentis 200px (which is also carried out fromchild, because the computed height ofparentisauto)? 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/1as a non-auto height?).cc @fantasai @cbiesinger @bfgeek