I'm working on fixing the implementation of inline stacking contexts. So
far, I have followed the behavior of Gecko and Chrome which seem to be
to order inline stacking contexts along with block elements that
establish stacking contexts and on top of other inline elements.
By way of example:
<div style="font-size: 100px; line-height: 50px;">
<div style="background: pink; width: 50px; height: 50px; transform:
translateY(100px) translateX(50px);"></div>
<span style="background: blue; opacity: 0.99;">Line 1</span><br/>
<span style="background: green;">Line 2</span>
<div style="background: red; width: 50px; height: 50px; transform:
translateY(-40px) translateX(-10px);"></div>
</div>
The two spans are inline, so normally "Line 1" would stack underneath
"Line 2" due to tree order. Since "Line 1" establishes a stacking
context (via the opacity style property), it stacks in tree order with
the divs (which also establish stacking contexts via their transform
style properties). The way I implement this is to always insert inline
stacking contexts into the positioned content section of the display list.
The issue I'm having now is that I cannot figure out where or how this
behavior is described in the spec [1][2]. Both the divs and the first
span seem to be treated as "positioned descendants" as described in
Section E.2.8.
I still plan to implement the same behavior as Gecko and Chrome, but I
would be very grateful is someone could help shed light on how this
relates to the spec. Thanks!
1. https://drafts.csswg.org/css2/zindex.html
2. http://www.w3.org/TR/CSS21/zindex.html
--Martin
_______________________________________________
dev-servo mailing list
dev-servo@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-servo
