- From: Rik Cabanier <cabanier@gmail.com>
- Date: Wed, 14 Mar 2012 20:51:03 -0700
- To: Aryeh Gregor <ayg@aryeh.name>
- Cc: Simon Fraser <simon.fraser@apple.com>, public-fx@w3.org, "L. David Baron" <dbaron@dbaron.org>, Matt Woodrow <mwoodrow@mozilla.com>
- Message-ID: <CAGN7qDDTi2tMcHPry5GDHjh4CNWntuE2qQ+Odu6r0+P7Wpgbhg@mail.gmail.com>
On Mon, Mar 5, 2012 at 1:14 PM, Aryeh Gregor <ayg@aryeh.name> wrote:
> On Mon, Mar 5, 2012 at 3:35 PM, Simon Fraser <simon.fraser@apple.com>
> wrote:
> > The screenshot was taken from Safari with the snippet above (prefixed,
> > with 0.5 opacity because otherwise the yellow is impossible to see behind
> > the other boxes).
>
> Okay, so just to make sure we're all on the same page:
>
> http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1361
>
> If I open that link in Firefox 13.0a1 and change all the -webkit- to
> -moz-, the yellow box is on top of the red box, and the red box is on
> top of the green box, like
>
> data:text/html,<!doctype html>
> <style>div {
> height: 100px;
> width: 100px;
> opacity: 0.5;
> position: absolute;
> }</style>
> <div style="height:50px; left:0; top:0; background: lime"></div>
> <div style="left:0; top:50px; background: red"></div>
> <div style="left:50px; top:25px; background: yellow; opacity: 1"></div>
>
> If I open it in Chrome 19 dev (avoiding the XSS protection), I get the
> red box on top of the green box, and both boxes on top of the yellow
> box, exactly like this:
>
> data:text/html,<!doctype html>
> <style>div {
> height: 100px;
> width: 100px;
> opacity: 0.5;
> position: absolute;
> }</style>
> <div style="left:50px; top:25px; background: yellow; opacity: 1"></div>
> <div style="height:50px; left:0; top:0; background: lime"></div>
> <div style="left:0; top:50px; background: red"></div>
>
> In a Safari/WebKit nightly on Windows, the green box is on top of the
> red box, like in your screenshot, the same as this:
>
> data:text/html,<!doctype html>
> <style>div {
> height: 100px;
> width: 100px;
> opacity: 0.5;
> position: absolute;
> }</style>
> <div style="left:50px; top:25px; background: yellow; opacity: 1"></div>
> <div style="left:0; top:0; background: lime"></div>
> <div style="height:50px; left:0; top:100px; background: red"></div>
>
> So forget about the opacity. We don't have interop on an even simpler
> test-case:
>
> data:text/html,<!doctype html>
> <div style="transform-style: preserve-3d">
> <div style="transform-style: flat">
> <div style="height:100px; width:100px; background:lime;
> transform: translatez(10px)"></div>
> <div style="height:100px; width:100px; background:red;
> transform: translate3d(0, -50px, -10px)"></div>
> </div>
> </div>
>
> Firefox 13.0a1 draws the red box on top. Chrome 19 dev, and WebKit
> nightly on Windows, draw the green box on top. Both Chrome and WebKit
> nightlies are wrong here, aren't they? The two innermost divs aren't
> part of any 3D rendering context, and should paint in DOM order
> without respect to their Z-coordinate. If you remove preserve-3d from
> the outermost div, then both WebKit ports work the same as Firefox.
>
> At this point I agree that Safari's rendering here is what we want,
> but I don't think the markup you gave is supposed to produce that
> rendering per spec. Or am I misunderstanding "An element participates
> in a 3D rendering context if its containing block establishes or
> extends a 3D rendering context"? What does "containing block" mean
> here?
<div style="transform-style: preserve-3d"> <- containing block extending
context
<div style="transform-style: preserve-3d; opacity: 0.8"> <- containing
block creating a new context
<div style="height:100px; width:100px; background:lime; <- containing
block extending context
transform: translatez(10px)"></div>
<div style="height:100px; width:100px; background:red; <- containing
block extending context
transform: translate3d(0, -50px, -10px)"></div>
</div>
<div style="height:100px; width:100px; background:yellow;
transform: translate3d(50px, -175px, -20px)"> <- containing block
extending context
</div>
</div>
> The CSS 2.1 definition
> <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>
> says that the containing block for a statically-positioned element is
> just the nearest block ancestor.
>
> Looking at that definition, I wonder what happens in the following
situation:
data:text/html,<!doctype html>
<div style="-webkit-transform-style: preserve-3d;*position: fixed*">
<div style="-webkit-transform-style: flat; opacity: 0.5"> <!-- note flat
-->
<div style="height:100px; width:100px; background:lime;
-webkit-transform: translatez(10px)"></div>
<div style="*position:absolute;*height:100px; width:100px; background:red;
-webkit-transform: translate3d(0, -50px, -10px)"></div>
</div>
<div style="height:100px; width:100px; background:yellow;
-webkit-transform: translate3d(50px, -175px, -20px)"></div>
</div>
According to the spec, the red rectangle should become part of the
rendering context of the outer div, but it will still have opacity.
In this case, the red and lime rect should interact which seems strange...
Rik
Received on Thursday, 15 March 2012 03:51:35 UTC