W3C home > Mailing lists > Public > www-style@w3.org > July 2012

Re: [css3-flexbox] Painting order

From: Morten Stenshorne <mstensho@opera.com>
Date: Fri, 20 Jul 2012 09:35:51 +0200
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style\@w3.org" <www-style@w3.org>
Message-ID: <87r4s6uboo.fsf@aeneas.oslo.osa>
"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?

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
---- Office: +47 23692400 ------ Mobile: +47 93440112 ----
------------------ http://www.opera.com/ -----------------
Received on Friday, 20 July 2012 07:35:27 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:57 GMT