Skip to content

Commit

Permalink
[css-transform] Define "containing block for all descendants"
Browse files Browse the repository at this point in the history
Add a new definition "containing block for all descendants" and specify
that values other than 'none' on 'transform', 'transform-style',
'perspective' will cause an element to establish a containg block for
all descendants.
  • Loading branch information
trchen1033 authored and Tien Ren Chen committed May 10, 2018
1 parent 3b10e5e commit 01ae879
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 7 deletions.
41 changes: 39 additions & 2 deletions css-transforms-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -242,9 +242,46 @@ For elements whose layout is governed by the CSS box model, the transform proper

For elements whose layout is governed by the CSS box model, any value other than ''transform/none'' for the transform results in the creation of a stacking context. Implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’. If an element with a transform is positioned, the ‘z-index’ property applies as described in [[!CSS2]], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created

For elements whose layout is governed by the CSS box model, any value other than ''transform/none'' for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.
For elements whose layout is governed by the CSS box model, any value other than ''transform/none'' for the transform also causes the element's padding box to form a containing block for all of its out-of-flow descendants, including both absolute-position and fixed-position descendants, and fixed background attachments on descendants and itself.

Issue(w3c/csswg-drafts#913): Is this effect on ''position: fixed'' necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it's much harder to implement otherwise.
<div class="example">
An element with 'transform' other than ''transform/none'' establishes <dfn export>containing block for all descendants</dfn>. To demostrate the effect on fixed-position descendants, the following code snippets should behave identically:
<pre>
&lt;style>
#container {
width: 300px;
height: 200px;
border: 5px dashed black;
padding: 5px;
overflow: scroll;
}

#bloat {
height: 1000px;
}

#child {
right: 0;
bottom: 0;
width: 10%;
height: 10%;
background: green;
}
&lt;/style>

&lt;div id="container" style="transform:translateX(5px);">
&lt;div id="bloat">&lt;/div>
&lt;div id="child" style="position:fixed;">&lt;/div>
&lt;/div>
</pre>
versus
<pre>
&lt;div id="container" style="position:relative; z-index:0; left:5px;">
&lt;div id="bloat">&lt;/div>
&lt;div id="child" style="position:absolute;">&lt;/div>
&lt;/div>
</pre>
</div>

<a href="https://www.w3.org/TR/css3-background/#fixed0">Fixed backgrounds</a> on the root element are affected by any transform specified for that element. For all other elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements), a value of ''fixed'' for the 'background-attachment' property is treated as if it had a value of ''background-attachment/scroll''. The computed value of 'background-attachment' is not affected.

Expand Down
10 changes: 5 additions & 5 deletions css-transforms-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Module Interactions {#module-interactions}

The <a>3D transform functions</a> here extend the set of functions for the 'transform' property.

Some values of 'perspective', 'transform-style' and 'backface-visibility' result in the creation of a <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">containing block</a>, and/or the creation of a <a spec="css21">stacking context</a>.
Some values of 'perspective' and 'transform-style' result in the creation of a [=containing block for all descendants=], and/or the creation of a <a spec="css21">stacking context</a>.

Three-dimensional transforms affect the visual layering of elements, and thus override the back-to-front painting order described in <a href="https://www.w3.org/TR/CSS2/zindex.html">Appendix E</a> of [[!CSS21]].

Expand Down Expand Up @@ -628,10 +628,10 @@ All three properties accept
the value <dfn value for="translate, rotate, scale">none</dfn>,
which produces no transform at all.
In particular,
this value does <em>not</em> trigger the creation of a stacking context or containing block,
this value does <em>not</em> trigger the creation of a stacking context or [=containing block for all descendants=],
while all other values
(including identity transforms like ''translate: 0px'')
create a stacking context and containing block,
create a stacking context and [=containing block for all descendants=],
per usual for transforms.

When 'translate', 'rotate' or 'scale' are animating or transitioning, and the from value or to
Expand Down Expand Up @@ -670,7 +670,7 @@ Media: visual
Animatable: no
</pre>

A value of "flat" for 'transform-style' establishes a stacking context, and establishes a <a>3D rendering context</a>. Elements with a used value of "auto" are ignored for the purposes of 3D rendering context computation, and those with a used value of "preserve-3d" extend the 3D rendering context to which they belong, even if values for the ''transform'' or ''perspective'' properties would otherwise cause flattening. A value of "preserve-3d" establishes a stacking context, and a containing block.
A value of "flat" for 'transform-style' establishes a stacking context, and establishes a <a>3D rendering context</a>. Elements with a used value of "auto" are ignored for the purposes of 3D rendering context computation, and those with a used value of "preserve-3d" extend the 3D rendering context to which they belong, even if values for the ''transform'' or ''perspective'' properties would otherwise cause flattening. A value of "preserve-3d" establishes a stacking context, and a [=containing block for all descendants=].

Grouping property values {#grouping-property-values}
------------------------
Expand Down Expand Up @@ -726,7 +726,7 @@ Where <<length>> values must be positive.

</dl>

The use of this property with any value other than ''perspective/none'' establishes a stacking context. It also establishes a containing block (somewhat similar to ''position: relative''), just like the 'transform' property does.
The use of this property with any value other than ''perspective/none'' establishes a stacking context. It also establishes a [=containing block for all descendants=], just like the 'transform' property does.

The values of the 'perspective' and 'perspective-origin' properties are used to compute the <a>perspective matrix</a>, as described above.

Expand Down

0 comments on commit 01ae879

Please sign in to comment.