Re: [css3-flexbox] Painting order

On 20/07/2012 13:22, Morten Stenshorne wrote:
> Anton Prowse <prowse@moonhenge.net> writes:
>
>> On 20/07/2012 12:48, Morten Stenshorne wrote:
>>> Anton Prowse <prowse@moonhenge.net> writes:
>>>
>>>> On 20/07/2012 11:14, Morten Stenshorne wrote:
>>>>> Anton Prowse <prowse@moonhenge.net> writes:
>>>>>
>>>>>> On 20/07/2012 09:35, Morten Stenshorne wrote:
>>>>>>> "Tab Atkins Jr." <jackalmage@gmail.com> writes (Wed, 27 Jun
>>>>>>> 2012 09:10:47 -0700):
>>>>>>>
>>>>>>>> On Wed, Jun 27, 2012 at 6:34 AM, Morten Stenshorne  <mstensho@opera.com> wrote:
>>>>>>>>> Morten Stenshorne <mstensho@opera.com> writes:
>>>>>>>>>> "Tab Atkins Jr." <jackalmage@gmail.com> writes:
>>>>>>>>>>> On Mon, Jun 25, 2012 at 1:35 AM, Morten Stenshorne  <mstensho@opera.com> wrote:
>>>>>>>>>>>> fantasai <fantasai.lists@inkedblade.net> writes (in
>>>>>>>>>>>> "[CSSWG]  Minutes and Resolutions 2012-06-20"):
>>>>>>>>>>>>>       - RESOLVED: order affects painting order
>>>>>>>>>>>>
>>>>>>>>>>>> Will 'flex-direction' and 'align-content' also
>>>>>>>>>>>> affectpainting order then?
>>>>>>>>>>>
>>>>>>>>>>> No, neither have any effect on painting order.
>>>>>>>>>>
>>>>>>>>>> Makes sense. Can you update the spec?
>>>>>>>>>
>>>>>>>>> But then again I can't really say I'm convinced that it's
>>>>>>>>> agood thing that 'order' affects painting order at all.
>>>>>>>>>
>>>>>>>>>        <div style="display:flex;">
>>>>>>>>>          <div id="a" style="order:3;">a</div>
>>>>>>>>>          <div id="b" style="position:relative; order:2;">b</div>
>>>>>>>>>          <div id="c" style="position:relative;">c</div>
>>>>>>>>>          <div id="d" style="position:relative; z-index:-1; border:4;">d</div>
>>>>>>>>>        </div>
>>>>>>>>>
>>>>>>>>> Painting order will here be d-a-c-b? So we have two levels of paint
>>>>>>>>> ordering? Isn't this just confusing?
>>>>>>>>
>>>>>>>> Yes, that's the right painting order.  This correctly matches the
>>>>>>>> visual order, as if you had written it in the order c-b-a-d.
>>>>>>>>
>>>>>>>>> (doesn't sound very pleasant to implement, either)
>>>>>>>>
>>>>>>>> It was trivial on our side, as we make 'order' literally reorder the
>>>>>>>> box tree (iiuc).
>>>>>>>
>>>>>>> What about this one:
>>>>>>>
>>>>>>>       <div style="display:flex;">
>>>>>>>           <div id="item1" style="position:relative; order:1;margin-left:-5px; border:2px solid blue; background:lime;">
>>>>>>>           xxx
>>>>>>>               <div id="abspos" style="position:absolute;margin-top:-5px; border:2px solid violet; background:cyan;">
>>>>>>> 	           yyy
>>>>>>>           </div>
>>>>>>>         </div>
>>>>>>>         <div id="item2" style="position:relative;margin-left:-5px; border:2px solid red; background:yellow;">
>>>>>>>           zzz
>>>>>>>         </div>
>>>>>>>       </div>
>>>>>>>
>>>>>>> Three positioned elements. One stacking context. In what
>>>>>>> orderare they painted?
>>>>>>
>>>>>> You treat order as if it literally reorders the box tree.  So your
>>>>>> putting order:1 on item1 (which is already in the first position)
>>>>>> achieves nothing whatsoever,
>>>>>
>>>>> ???
>>>>>
>>>>> Initial value of 'order' is 0, so reordering will certainly occur.
>>>>
>>>> My bad; I thought it was 1.
>>
>>>> So the painting order would be item2 followed by item1 as per the
>>>> current ED;
>>
>>> When is "abspos" painted?
>>
>> Well, the abspos doesn't establish a stacking context; it's positioned
>> but with z-index:auto.  (Hence it establishes a painting context or
>> pseudo stacking context or whatever we want to call it.) So it
>> participates in its closest ancestor painting context or stacking
>> context, as per CSS21.  This ancestor is item1, which is also
>> positioned with z-index:auto and hence establishes a painting context.
>>
>> So as part of CSS21 9.9.1 layer 6 (for things with stack level 0)
>> you'll be painting item2 first (order:0) and item1 second (order:1),
>> and as part of painting item1 you'll be painting its abspos child.
>
> But "item1" doesn't establish a new stacking context, so "abspos" should
> be treated separately. It's just another member of the root element's
> (or viewport's) stacking context, just like "item1" and "item2".

No, that's not how the CSS21 painting order works.  Relpos elements with 
z-index:auto establish a "painting context" or "pseudo stacking 
context", which behave like bona fide stacking contexts except that 
their would-be dependants which themselves establish stacking contexts 
do not in fact participate in the painting context and instead 
participate in their closest ancestor stacking context (which in your 
example is established by the root element).  However, your abspos 
doesn't establish a stacking context because it doesn't have integer 
z-index.  So it participates in the painting context established by item1.

>> Of course, if the abspos child had integer z-index, it would
>> participate in a different stacking context,
>
> No, it wouldn't. It would establish a new one on its own, but still
> participate in the stacking context established by the root element /
> viewport.

This is true in your example, but I was specifically considering an 
example (the "former case") in which the flex container established a 
stacking context (eg through the use of position:relative;z-index:5).

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Friday, 20 July 2012 11:31:51 UTC