Re: [css3-images][css3-transforms] element() and content with 3D Transforms

On Sun, Feb 26, 2012 at 9:21 AM, Simon Fraser <smfr@me.com> wrote:

> On Feb 24, 2012, at 2:54 pm, Tab Atkins Jr. wrote:
>
> > On Fri, Feb 24, 2012 at 2:08 PM, Dirk Schulze <dschulze@adobe.com>
> wrote:
> >> Hi,
> >>
> >> It is not clear how 3D transformation applied to elements references by
> element() should be treated:
> >>
> >> <div id="bg">
> >>   <image width="100" height="100" style="transform: rotateX(45deg);
> perspective: 200;">
> >> </div>
> >>
> >> <div id="content" style="background: element(#bg); perspective: 500;">
> >> Test
> >> </div>
> >>
> >> Should 3D transforms still be allowed on referenced elements and their
> child elements? If they are allowed, how do they apply to the element? In
> the example above, the element with the id 'content' has another
> perspective then the reference background element. How should browsers deal
> with it? Should browsers try to render it, even if the content is behind
> the background elements (from the perspective)? Should the background
> element get "flattened" before used as background? If so, how?
> >
> > If the <img> is in the "paint source" branch, the transform has no
> effect.
> >
> > If it's in the "rendered content" branch, you do exactly what the spec
> > says - set up a box the size of the element's border box, and render
> > exactly what's in there.  If you've done a transform that pushes the
> > image's rendering outside of its border box geometry, you just don't
> > see anything (the element is drawn over an infinite field of
> > transparent black, so you'll just see the field).
> >
> > In your specific example, the image will be drawn with its specified
> > transformations, and then taken as a static image and painted into the
> > background of #content.  #content's own perspective property has no
> > effect on how the image is drawn.  So yes, it's flattened.
>
> I concur.
>
> There is one tricky case here:
>
> <div style="perspective: 500px">
>  <div id="target" style="transform-style: preserve-3d">
>    <div style="transform: rotateY(45deg)"></div>
>  </div>
> </div>
>
> <div style="background-image: element(#target)"></div>
>
> When rendering the element(#target), does the perspective affect the
> rendering of the rotateY()?
>
>
Yes, it should.
The spec is written as if you take the rendered bitmap of an element and
place it as the background. Only explicit transforms on the the element
itself are ignored.
>From http://dev.w3.org/csswg/css3-images/#element-reference:

Implementations may either re-use existing bitmap data generated for the
referenced element or regenerate the display of the element to maximize
quality at the image's size (for example, if the implementation detects
that the referenced element is an SVG fragment); in the latter case, the
layout of the referenced element in the image must not be changed by the
regeneration process. That is, the image must look identical to the
referenced element, modulo rasterization quality.