From 12aa3b4c0eeeed87039b1aef599f1886f2e7a197 Mon Sep 17 00:00:00 2001 From: trchen1033 Date: Tue, 7 Aug 2018 16:15:52 -0700 Subject: [PATCH] [css-transform] Define "containing block for all descendants" (#2185) 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. --- css-transforms-1/Overview.bs | 41 ++++++++++++++++++++++++++++++++++-- css-transforms-2/Overview.bs | 10 ++++----- 2 files changed, 44 insertions(+), 7 deletions(-) diff --git a/css-transforms-1/Overview.bs b/css-transforms-1/Overview.bs index b562688b963..4919a1b328a 100644 --- a/css-transforms-1/Overview.bs +++ b/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 to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments. -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. +
+To demostrate the effect of [=containing block for all descendants=] on fixed-position descendants, the following code snippets should behave identically: +
+<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;
+}
+</style>
+
+<div id="container" style="transform:translateX(5px);">
+  <div id="bloat"></div>
+  <div id="child" style="position:fixed;"></div>
+</div>
+
+versus +
+<div id="container" style="position:relative; z-index:0; left:5px;">
+  <div id="bloat"></div>
+  <div id="child" style="position:absolute;"></div>
+</div>
+
+
Fixed backgrounds 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. diff --git a/css-transforms-2/Overview.bs b/css-transforms-2/Overview.bs index bf4672a9024..640c089f0fe 100644 --- a/css-transforms-2/Overview.bs +++ b/css-transforms-2/Overview.bs @@ -62,7 +62,7 @@ Module Interactions {#module-interactions} The 3D transform functions 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 containing block, and/or the creation of a stacking context. +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 stacking context. Three-dimensional transforms affect the visual layering of elements, and thus override the back-to-front painting order described in Appendix E of [[!CSS21]]. @@ -625,10 +625,10 @@ All three properties accept the value none, which produces no transform at all. In particular, -this value does not trigger the creation of a stacking context or containing block, +this value does not 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 -A value of "flat" for 'transform-style' establishes a stacking context, and establishes a 3D rendering context. 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 3D rendering context. 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 <> values must be positive. -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 perspective matrix, as described above.