Re: [css3-flexbox] Painting order

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".

> 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.

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
---- Office: +47 23692400 ------ Mobile: +47 93440112 ----
------------------ http://www.opera.com/ -----------------

Received on Friday, 20 July 2012 11:22:13 UTC