Handle nested position:sticky elements correctly (compositor)

third_party/WebKit/LayoutTests/compositing/overflow/composited-nested-sticky-inline.html

Index: third_party/WebKit/LayoutTests/compositing/overflow/composited-nested-sticky-inline.html
diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/composited-nested-sticky-inline.html b/third_party/WebKit/LayoutTests/compositing/overflow/composited-nested-sticky-inline.html
new file mode 100644
index 0000000000000000000000000000000000000000..2ab75b6162a2be506bfe069fea65e026eac40199
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/compositing/overflow/composited-nested-sticky-inline.html
@@ -0,0 +1,59 @@
+<style>
+body {
+  margin: 0;
+}
+
+.scroller {
+  /* TODO(smcgruer): Appears to be a paint bug if the scroller is composited. */

[flackr, 2017/03/17 15:01:56]

What is the bug? We shouldn't be trying to do sticky position updates on the
compositor if the scroll isn't composited, are we? In this case we should just
be relying on the main thread to set the layer position of the sticky elements
and doing nothing more with them.

[smcgruer, 2017/03/17 17:36:52]

Filed crbug.com/702637 and reverted this LayoutTest. I think we should follow up
after this CL is submitted.

+  /* will-change: transform; */
+
+  overflow: auto;
+  width: 200px;
+  height: 350px;
+  outline: 2px solid black;
+}
+
+.container {
+  width: 200px;
+  height: 700px;
+}
+
+.outerSticky {
+  will-change: transform;
+
+  display: inline;
+  position: sticky;
+  top: 0;
+}
+
+.innerSticky {
+  will-change: transform;
+
+  display: inline;
+  position: sticky;
+  top: 25px;
+}
+</style>
+
+<script>
+if (window.testRunner)
+  testRunner.waitUntilDone();
+
+function finishTest() {
+  document.querySelector('.scroller').scrollTop = 200;
+  if (window.testRunner)
+    testRunner.notifyDone();
+}
+
+window.addEventListener('load', function() {
+  requestAnimationFrame(function() {
+    requestAnimationFrame(finishTest);
+  });
+});
+</script>
+
+<div class="scroller">
+  <div class="container">
+    <div class="outerSticky">1<div class="innerSticky">2</div></div>
+  </div>
+</div>