Skip to content

Commit e8fa171

Browse files
committed
[css-transforms-2] Describe 3D sorting more precisely.
This describes the handling of descendants in 3D sorting more clearly, and also doesn't limit its reference to Appendix E to steps 1-7 (which excludes steps 8-10, which might be non-empty). Removes an internal issue in the document, and fixes #926.
1 parent ac72c9b commit e8fa171

File tree

1 file changed

+19
-10
lines changed

1 file changed

+19
-10
lines changed

css-transforms-2/Overview.bs

+19-10
Original file line numberDiff line numberDiff line change
@@ -321,16 +321,24 @@ Elements establish and participate in 3D rendering contexts as follows:
321321
Some CSS properties have values that are considered to force "grouping": they require that their element and its descendants are rendered as a group before being composited with other elements; these include opacity, filters and properties that affect clipping. The relevant property values are listed under <a href="#grouping-property-values">grouping property values</a>. Consequently, when used on an element with transform-style:preserve-3d, they change the used value to
322322
''transform-style/flat'' and prevent it from creating or extending a <a>3D rendering context</a>.
323323

324-
Issue: This doesn't describe how untransformed content within a 3D transformed element is handled, the algorithm probably needs to be recursive.
325-
Issue: Figure out what the current behavior of various engines is, and figure out a clearer description that wont break web compat.
326-
327-
The rendering of elements in a 3D rendering context is as follows (numbers refer to items in <a href="https://www.w3.org/TR/CSS2/zindex.html#painting-order">CSS 2.1, Appendix E, Section E.2 Painting Order</a>):
328-
329-
<ol style="list-style-type: upper-alpha;">
330-
<li>The background, borders, other box decorations, and content of the establishing element, and its descendant elements without 3D transforms, ordered according to steps 1—7, are rendered into a plane at z=0 relative to the establishing element.
331-
<li>3D-transformed elements are each rendered into their own plane, transformed by the <a href="#accumulated-3d-transformation-matrix-computation">accumulated 3D transformation matrix</a>.
332-
<li>Intersection is performed between the set of planes generated by steps A and B, according to <a href="http://en.wikipedia.org/wiki/Newell%27s_algorithm">Newell's algorithm</a>. Coplanar [=3D transformed elements=] are rendered in painting order.
333-
</ol>
324+
In a 3D rendering context, rendering and sorting of elements is done as follows:
325+
326+
1. The element establishing the 3D rendering context,
327+
and each other 3D transformed element participating in the 3D rendering context,
328+
is rendered into its own plane.
329+
This plane includes
330+
the element's backgrounds, borders, other box decorations, content,
331+
and descendant elements,
332+
excluding any descendant elements that have their own plane (and their descendants).
333+
This rendering is done according to
334+
<a href="https://www.w3.org/TR/CSS2/zindex.html#painting-order">CSS 2.1,
335+
Appendix E, Section E.2 Painting Order</a>.
336+
2. Intersection is performed between this set of planes,
337+
according to
338+
<a href="http://en.wikipedia.org/wiki/Newell%27s_algorithm">Newell's algorithm</a>,
339+
with the planes other than that of the establishing element
340+
transformed by the [=accumulated 3D transformation matrix=].
341+
Coplanar [=3D transformed elements=] are rendered in painting order.
334342

335343
Issue: is it OK to not pop 2D-transformed elements into their own planes?
336344

@@ -1443,5 +1451,6 @@ Recent Changes</h3>
14431451
<li>Define that clamping of values of ''perspective()'' also applies to resolved values and interpolation (see <a href="https://github.com/w3c/csswg-drafts/issues/6320">#6320</a> and <a href="https://github.com/w3c/csswg-drafts/issues/6346">#6346</a>).</li>
14441452
<li>Clarify that the effects of ''transform-style/preserve-3d'' only affect <a>transformable elements</a> (see <a href="https://github.com/w3c/csswg-drafts/issues/6430">#6430</a>).</li>
14451453
<li>Added a note that the resolved value of 'translate' includes percentages (see <a href="https://github.com/w3c/csswg-drafts/issues/2124">#2124</a>).</li>
1454+
<li>Describe 3D sorting more precisely, to explain which descendants are included, and not limit Appendix E reference to steps 1-7 (see <a href="https://github.com/w3c/csswg-drafts/issues/926">#926</a>).</li>
14461455
</ul>
14471456

0 commit comments

Comments
 (0)