Re: [css3-flexbox] Painting order

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.

Of course, if the abspos child had integer z-index, it would participate 
in a different stacking context, which might be one established by the 
flex container or by some more distance ancestor.  In the former case, 
whether or not it would come above or below the flex items would be 
determined by its z-index value.  Given that item1 and item2 are both 
painted on layer 6, if the abspos had negative z-index it would be 
painted before the items, and if it had positive z-index it would be 
painted after them, and if it had z-index:0 then everything would be 
painted on layer 6 in the (shuffled) tree traversal order: item2 then 
item1 then item1's abspos child.

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

Received on Friday, 20 July 2012 11:11:17 UTC