Re: [css3-flexbox] Painting order

On 20/07/2012 11:57, Anton Prowse wrote:
> 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).

Hmm, neither with the ED nor with my suggestion can you bring anything 
to first position without moving everything else through setting order:2 
on them; and it's completely impossible to move something to first 
position if there are anonymous flex items. :-(

Perhaps we should allow 0 and make the initial value 1.  On the other 
hand, perhaps that's simply too abstract, and we can live with the 
limitation.

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

Received on Friday, 20 July 2012 10:07:08 UTC