Re: [css3-flexbox] Painting order

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

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

Received on Friday, 20 July 2012 09:57:58 UTC