[csswg-drafts] [css-sizing-4] Should we mention aspect-ratio in margin collapsing? (#5328)

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing-4] Should we mention aspect-ratio in margin collapsing? ==
Based on the [spec definition of margin-collasping](https://drafts.csswg.org/css2/#collapsing-margins), 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](https://drafts.csswg.org/css-sizing-4/#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 we establish a block context of `child` (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 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5328 using your GitHub account

Received on Wednesday, 15 July 2020 23:31:53 UTC