[css-color-4] Paint order of non-positioned stacking context

[SimonSapin]

CSS Color Level 3 defines:

https://drafts.csswg.org/css-color-3/#transparency

If an element with opacity less than 1 is not positioned, then it is painted on the same layer, within its parent stacking context, as positioned elements with stack level 0.

However this sentence was apparently removed from Level 4: https://drafts.csswg.org/css-color/#transparency

I think this removal is a bug and that definition is necessary, because CSS 2 appendix E is written with the assumption that elements that create a stacking context are all positioned. (This is because only the z-index property creates a stacking context in CSS 2, and it only applies to positioned elements.)

css-transforms has an alternative wording that also works:

https://drafts.csswg.org/css-transforms-1/#transform-rendering

For elements whose layout is governed by the CSS box model, any value other than none for the transform property results in the creation of a stacking context. Implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0.

[SimonSapin]

This is related to, and might be a duplicate of #2717. Editing CSS 2 as suggested there to account for all non-positioned stacking context might be a better fix.

[tabatkins]

Isn't this handled by the sentence:

If the element is in a context where the z-index property applies, the auto value is treated as 0 for the element.

[SimonSapin]

I… don’t think so? z-index applies to positioned elements. This issue is about elements that create stacking contexts but are not positioned.

[tabatkins]

Ah, you're right, sorry; my brain was interpreting that as "turning on" z-index, thus making it effectively positioned.

I agree that the wording should be restored, unless we decide to take on the more general case of altering the painting of all stacking contexts; in either case, we can still add the text now with a note that it might be obsoleted by more general text later.

[AmeliaBR]

I just came across an interesting example of this when it comes to shape-outside. One of the main purposes of shape-outside is to allow text wrapping around a float to be drawn over top (in layout and in paint order) of the floated element. But that currently falls apart if the floated element becomes a stacking context (e.g., by setting opacity < 1), which (in Chrome & Firefox) causes the float to now be drawn on top of the text wrapping around it. And because z-index doesn't apply to the float's layering relative to its surroundings, there's no way I can figure out to fix it.

https://codepen.io/AmeliaBR/pen/vMqRoZ

[tabatkins]

@SimonSapin Plz review? https://drafts.csswg.org/css-color-4/#transparency

[SimonSapin]

Looks good, thanks!