Set 3D sorting context on transform tree nodes regardless of type.
This sets the 3D sorting context on transform tree nodes regardless of
the type of transform tree node. It might still be set for only some of
the transform tree nodes generated by an element because of the relative
positions of those transform tree nodes (in particular, whether they're
ancestors or descendants of the transform tree node generated for the
element's transform).
This fixes the rendering in some cases where a trivial 3D transform was
being decomposited, leaving the leafmost transform tree node associated
with an element's border box context being a type of transform tree node
that didn't have the 3D sorting context set, which would in turn
associate that lack of 3D sorting context with the cc::Layer and the
quads it generates.
This is one of the changes described in more detail in
https://docs.google.com/document/d/1Up6NwhX0lWhASPCa0gADbV3kvEFGezbDxotAgKzfSUQ/edit
Fixed: 1189428
Change-Id: I22361ba743e554f861bda30a301c9307c494aa2c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2852070
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/master@{#877325}
diff --git a/css/css-transforms/3dtransform-and-position-sticky-001.html b/css/css-transforms/3dtransform-and-position-sticky-001.html
new file mode 100644
index 0000000..aec3b44
--- /dev/null
+++ b/css/css-transforms/3dtransform-and-position-sticky-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<title>CSS Test (Transforms): position:sticky on an element in a preserve-3d scene</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-insets">
+<meta name="assert" content="3D scene intersection is done correctly in the presence of position: sticky.">
+<link rel="match" href="3dtransform-and-position-sticky-ref.html">
+
+<style>
+
+div, img {
+ height: 100px;
+ width: 100px;
+}
+
+#outer {
+ transform-style: preserve-3d;
+ perspective: 300px;
+}
+
+#middle {
+ transform-style: preserve-3d;
+ position: relative;
+}
+
+#inner1 {
+ background: aqua;
+ /* isn't really sticky because of the containing block established by transform and by transform-style */
+ position: sticky;
+ top: 0;
+ transform: translateZ(0);
+}
+
+#inner2 {
+ background: olive;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: rotateX(30deg);
+}
+
+</style>
+
+<div id="outer">
+ <div id="middle">
+ <div id="inner1">
+ </div>
+ <div id="inner2">
+ </div>
+ </div>
+</div>
diff --git a/css/css-transforms/3dtransform-and-position-sticky-002.html b/css/css-transforms/3dtransform-and-position-sticky-002.html
new file mode 100644
index 0000000..bde8e27
--- /dev/null
+++ b/css/css-transforms/3dtransform-and-position-sticky-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<title>CSS Test (Transforms): position:sticky on an element in a preserve-3d scene</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-insets">
+<meta name="assert" content="3D scene intersection is done correctly in the presence of position: sticky.">
+<link rel="match" href="3dtransform-and-position-sticky-ref.html">
+
+<style>
+
+div, img {
+ height: 100px;
+ width: 100px;
+}
+
+#outer {
+ transform-style: preserve-3d;
+ perspective: 300px;
+}
+
+#middle {
+ transform-style: preserve-3d;
+ position: relative;
+}
+
+#inner1 {
+ background: aqua;
+ /* isn't really sticky because of the containing block established by transform and by transform-style */
+ position: sticky;
+ top: 0;
+ transform: translateZ(0);
+ transform-style: preserve-3d;
+}
+
+#inner2 {
+ background: olive;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: rotateX(30deg);
+}
+
+</style>
+
+<div id="outer">
+ <div id="middle">
+ <div id="inner1">
+ </div>
+ <div id="inner2">
+ </div>
+ </div>
+</div>
diff --git a/css/css-transforms/3dtransform-and-position-sticky-ref.html b/css/css-transforms/3dtransform-and-position-sticky-ref.html
new file mode 100644
index 0000000..a12ce72
--- /dev/null
+++ b/css/css-transforms/3dtransform-and-position-sticky-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<title>CSS Test Reference (Transforms): position:sticky on an element in a preserve-3d scene</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+
+<style>
+
+div, img {
+ height: 100px;
+ width: 100px;
+}
+
+#outer {
+ transform-style: preserve-3d;
+ perspective: 300px;
+}
+
+#middle {
+ transform-style: preserve-3d;
+ position: relative;
+ background: aqua;
+}
+
+#inner2 {
+ background: olive;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: rotateX(30deg);
+}
+
+</style>
+
+<div id="outer">
+ <div id="middle">
+ <div id="inner2">
+ </div>
+ </div>
+</div>
