Re: [css3-flexbox] Painting order

Anton Prowse <prowse@moonhenge.net> writes:

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

I don't think so.
What the spec says (http://www.w3.org/TR/CSS2/visuren.html#z-index):

(1)  "Within each stacking context, positioned elements with stack level
     0 (in layer 6), non-positioned floats (layer 4), inline blocks
     (layer 5), and inline tables (layer 5), are painted as if those
     elements themselves generated new stacking contexts,"

And it goes on like this - the crucial part:

(2)  "except that their positioned descendants and any would-be child
      stacking contexts take part in the current stacking context."

So a positioned child C and a positioned parent P are painted
independently from each other if they belong to the same stacking
context. First P, then C (in tree order). A stacking context is a simple
list of elements, primarily sorted by z-index, secondarily sorted by
tree order. The parent-child relationship between P and C isn't relevant
(as far as painting order is concerned), only that P comes before C.

(3)  "Boxes with the same stack level in a stacking context are stacked
     back-to-front according to document tree order."

But the difference between this and what you're saying is subtle. I
cannot even think of any CSS21 testcase where it makes a
difference. However, in my flexbox example, it does, thanks to 'order'.

According to (3), painting order should simply be "item1", "abspos",
"item2", but because of the 'order' property, "item2" should be painted
before "item1".

This is where I get problems. Where does "abspos" go?

item2-item1-abspos?
abspos-item2-item1?

It seems weird to follow tree order for "abspos" here, although that
would be closer to the spec.

If 'order' affects painting order, maybe it also should establish a new
stacking context as well, at least when the item is positioned?

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

Received on Friday, 20 July 2012 14:37:16 UTC