Re: [css3-flexbox] Painting order

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 affect painting 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 a good 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; order: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 order are 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.  I still think it should be 1, since I
> don't think authors would expect reordering in the example you give.
> (Only geeks count from 0!)
>
> So the painting order would be item2 followed by item1 as per the
> current ED; but I would prefer it to be item1 followed by item2.  And
> I would change the value-set of 'order' to be the positive integers,
> which is also more consistent with how tabindex works (where 0 doesn't
> represent an order but rather has a different meaning completely).

When is "abspos" painted?

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

Received on Friday, 20 July 2012 10:47:57 UTC