Closed Bug 724025 Opened 14 years ago Closed 14 years ago

transform-style: flat behavior does not seem to match WebKit or spec

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla13

People

(Reporter: ayg, Assigned: mattwoodrow)

Details

Attachments

(1 file)

Fix transform-style:flat with BasicLayers
3.12 KB, patch
roc
: review+
Details | Diff | Splinter Review
The behavior of preserve-3d is now described in some detail in the latest spec, which was somewhat rewritten: http://dev.w3.org/csswg/css3-transforms/#transform-3d-rendering Excerpt: """ An element with a three-dimensional transform that is not contained in a 3D rendering context renders with the appropriate transform applied, but does not intersect with any other elements. The three-dimensional transform in this case can be considered just as a painting effect, like two-dimensional transforms. Similarly, the transform does not affect painting order. For example, a transform with a positive Z translation may make an element look larger, but does not cause that element to render in front of elements with no translation in Z. An element with a three-dimensional transform that is contained in a 3D rendering context can visibly interact with other elements in that same 3D rendering context; the set of elements participating in the same 3D rendering context may obscure each other or intersect, based on their computed transforms. They are rendered as if they are all siblings, positioned in a common 3D coordinate space. The position of each element in that three-dimensional space is determined by accumulating the transformation matrices up from the element that establishes the 3D rendering context through each element that is a containing block for the given element, as described below. """ This is still pretty vague, but there's an example that clarifies a bit. The idea seems to be that if 'transform-style' is "flat", the first child is rendered, then the second is painted on top, and so on. Moreover, each child's children are painted within it before any transforms are applied. So for instance: data:text/html,<!doctype html> <div style="-moz-transform:rotatex(45deg)"> <div style="-moz-transform:rotatex(-45deg); height:100px;width:100px;background:lime"> In Firefox 13.0a1 (2012-02-01), the two transforms cancel out, and you get a square. But in Chrome 18 dev, they don't: you get a rectangle, wider than it is tall. Basically, when the second div is rendered, it's projected onto the plane of its parent, so it just gets shortened twice. The effect is identical if you replace -45deg with 45deg, because either one foreshortens vertically by 1/sqrt(2). Really I guess it's logically like applying scalez(0) to it at each step, except in Gecko that makes stuff disappear (bug 719092). The spec is a bit vague, but seems to match how Chrome behaves. Would it be helpful if I wrote clearer spec text, and/or lots of test-cases? I plan to write lots of test-cases in any event.
Another oddity: data:text/html,<!doctype html> <div style="-moz-transform:rotatex(89deg)"> <div style="-moz-transform:rotatex(-89deg); height:100px;width:100px;background:lime"> is still a square, but data:text/html,<!doctype html> <div style="-moz-transform:rotatex(90deg)"> <div style="-moz-transform:rotatex(-90deg); height:100px;width:100px;background:lime"> vanishes (see layout/reftests/transform-3d/preserve3d-1b.html).
Here are a few test-cases. All should be green squares (with scrollbars on the last one), and they are in IE10 Developer Preview and Chrome 18 dev, but not in Firefox 13.0a1: data:text/html,<!doctype html> <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top"> <div style="-moz-transform: rotatex(-45deg); -moz-transform-origin: top; height: 200px; width: 100px; background: lime"> </div></div> data:text/html,<!doctype html> <div style="-moz-transform: rotatey(45deg); -moz-transform-origin: left"> <div style="-moz-transform: rotatey(-45deg); -moz-transform-origin: left; height: 100px; width: 200px; background: lime"> </div></div> data:text/html,<!doctype html> <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top; -moz-transform-style: preserve-3d; overflow: hidden"> <div style="-moz-transform: rotatex(-45deg); -moz-transform-origin: top; height: 200px; width: 100px; background: lime"> </div></div> data:text/html,<!doctype html> <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top; -moz-transform-style: preserve-3d; overflow: auto"> <div style="-moz-transform: rotatex(-45deg); -moz-transform-origin: top; height: 200px; width: 100px; background: lime"> </div></div> data:text/html,<!doctype html> <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top; -moz-transform-style: preserve-3d; overflow: scroll"> <div style="-moz-transform: rotatex(-45deg); -moz-transform-origin: top; height: 200px; width: 100px; background: lime"> </div></div>
FWIW, transform-style: flat behavior doesn't make sense to me, and so far it seems to me 3D transforms would be much improved by removing it and make everything preserve-3d: http://lists.w3.org/Archives/Public/www-style/2012Feb/0291.html
Whiteboard: [autoland]
Whiteboard: [autoland] → [autoland-in-queue]
Autoland Patchset: Patches: 594610 Branch: mozilla-central => try Destination: http://hg.mozilla.org/try/rev/101d44cbae8c Try run started, revision 101d44cbae8c. To cancel or monitor the job, see: https://tbpl.mozilla.org/?tree=Try&rev=101d44cbae8c
Try run for 101d44cbae8c is complete. Detailed breakdown of the results available here: https://tbpl.mozilla.org/?tree=Try&rev=101d44cbae8c Results (out of 212 total builds): success: 196 warnings: 16 Builds (or logs if builds failed) available at: http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/autolanduser@mozilla.com-101d44cbae8c Timed out after 06 hours without completing.
Whiteboard: [autoland-in-queue]
https://hg.mozilla.org/mozilla-central/rev/3884d70d2f7d
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla13
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: