[css-grid-3][masonry] Effect of negative bottom margins on running position + dense-packing

[celestepan]

We've already resolved how we want to handle running positions + dense-packing with a negative margin-top in #12918, but we haven't figured out how we want to handle a negative margin-bottom value that is greater than the height of the following item.

In the spec, at the “NOTE” section after step 3 of the Masonry Layout Algorithm: CSS Grid Layout Module Level 3, it appears that a negative margin-bottom value should be capped at the size of the item with the negative margin-bottom value. In other words, if an item has height: 60px; margin-bottom -80px;, the algorithm would cap margin-bottom to -60px.

To stay consistent with this, if an item has height: 100px; margin-bottom: -80px, and the following item in the track has height: 60px, the following item should be placed as though margin-bottom: 60px . In other words, the content edge of a placed item should never go above the content edge of a previous item in a track, and running position should never be placed above the content edge of the items in a track.

If the user wishes to place an item above another visually "on top" of other items, they could place it as an OOF item.

If we follow the proposal above, then the example below has item 2's content edge ending where item 1's content edge is, and item 3 is placed starting at point A:

Instead of this:

Similarly, for dense-packing (resolution for negative margin-top here: #12918 (comment)), the correct behavior would be:

As opposed to: