[css-transform] Define "containing block for all descendants"

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.

Author: trchen1033

css-transforms-1/Overview.bs

@@ -316,9 +316,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 ''z-index/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.
 

css-transforms-2/Overview.bs

@@ -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="css2">stacking context</a>.
+Some values of 'perspective', 'transform-style' and 'backface-visibility' 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]].
 
@@ -625,10 +625,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
@@ -666,7 +666,7 @@ Computed value: Same as specified value.
 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}
 ------------------------
@@ -721,7 +721,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.