Re: [css3-flexbox] Painting order

On 20/07/2012 12:06, Anton Prowse wrote:
> 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.

Oh, turns out that 'order' is <number> not non-negative integer or 
whatever I thought it was.  So moving stuff to first position is easy in 
the ED, although unintuitive if you haven't thought carefully enough 
about how that property is defined: you set your item to order:-1 or 
another negative number with sufficiently large magnitude.

And my suggestion for making the initial value 1 doesn't solve the issue 
that I was trying to address, because of course if you'd set order:1 on 
the second item it wouldn't move that item to first position.

In fact, the issue I was trying to address is a non-issue.  I think the 
ED is fine as it is.  Authors (and me!) will just have to learn that 
'order' is more like z-index in that it represents grouping.  It doesn't 
represent ordinal position even in minimal examples like the one you 
presented.

Sorry for all the noise!

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

Received on Friday, 20 July 2012 10:27:15 UTC