Re: [css3-flexbox] Painting order

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, and you just go ahead and paint your 
example in the normal way, as per CSS21 Appendix E: flex container 
background, then item1 (as if it were a stacking context), then item2 
(as if it were a stacking context).

I do have a gripe about the following sentence in the ED:

   # Authors /must/ use ‘order’ only for visual, not logical, reordering
   # of content; style sheets that use ‘order’ to perform logical
   # reordering are non-conforming.

The "must" and the threat of non-conformance are toothless tigers since 
how can a UA determine whether the author has used 'order' as an unwise 
alternative to logical reordering?  My impression is that this sentence 
is intended to be an authoring recommendation.  That's valuable, but it 
needs to be a note and it needs to get rid of the RFC2119 keywords and 
the non-conformance claim.

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

Received on Friday, 20 July 2012 09:06:05 UTC