[CSS2] Current definition of margin collapsing isn't interoperable.

[bfgeek]

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

This is somewhat a meta issue which was found while investigating behaviour for aspect-ratio. We (Blink) haven't had any reports of users hitting these inconsistencies between implementations so this is largely an "academic" issue and not immediately important.

While investigating I created this testcase:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8342

The inconsistencies are around collapsing through margins, and when things are considered adjoining. Some implementations will "double-count" a margin in certain cases (which seems bad).

This indicates that the current definition isn't sufficient (or consistent) for building an interoperable implementation.

[x-Jake-x]

That's pretty interesting! For the "10% (indef)" example, it seems to be that extra "div" that causes it to behave differently.

If you remove that <div> entirely, then it behaves consistently.

If you remove it from the normal flow via float, then...well, I'm not sure what's happening that causes the difference in FF and Chrome here (margins also?), but here you go (a modification to the example you provided):

https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8533

[fantasai]

Note: Some related discussion is in #5328

[tabatkins]

(It's rather difficult to tell what's going on in the test case at first, since it relies on viewers recognizing a 40px vs 50px difference in a gap; https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8342 makes it easier to see what's happening. Use a ruled background in your testcases, @bfgeek!)

Collecting some thoughts:

What confuses me is why the fourth case (calc(0px + 0%)) is consistently different from the second (0%) - both Chrome and Firefox treat 0% as non-adjoining, and calc(0px + 0%) as adjoining. The two should, afaict, act identically.

The 10% (indef) case makes sense, as it reflects the previously-explained difference in how Chrome and Firefox calculate whether margins are adjoining - Firefox goes by the 2.1 spec more precisely, basing the determination purely off of computed values (thus, it's not adjoining), while Chrome looks at the height during layout and makes them adjoining if the box ends up being zero height (thus, it's adjoining).

Case 6 (min(0px, 10%) (indef)) is also confusing me. The simplification rules for min() shouldn't allow the min() to be simplified at computed-value time (the % causes it to wait until used-value time). So it should resolve the same as Case 3, and show a difference in Chrome and Firefox, but instead they both agree on it adjoining, presumably because it resolves to zero.