Fix the bug that negative outline-offset is covered up by composited

third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-negative-offset-translucent-outline.html

+<script>
+if (window.testRunner)
+    testRunner.waitUntilDone();
+onload = function() {
+    // Double rAF to ensure content is painted before scroll.
+    requestAnimationFrame(function() {
+        requestAnimationFrame(function() {
+            document.getElementById('scroller').scrollTop = 200;

[flackr, 2016/11/15 20:40:40]

Is the double rAF or scrolling necessary? We already have a separate test that
the outline is not painted into the scrolling contents layer and it should look
the same whether scrolled or not right?

[yigu, 2016/11/15 23:30:16]

You are right. This is a redundant test.

+            if (window.testRunner)
+                window.testRunner.notifyDone();
+        })
+    });
+}
+</script>
+<style>
+#scroller {
+    background: gray local content-box;

[flackr, 2016/11/15 20:40:40]

Why local content-box? I think just having background: local gray; would be
sufficient to make sure the outline is painted above the scrolling content.

[yigu, 2016/11/15 23:30:16]

Done.

+    outline: 5px solid rgba(0, 255, 0, 0.5);
+    outline-offset: -4px;
+    overflow: scroll;
+    padding: 10px;

[flackr, 2016/11/15 20:40:40]

nit: Remove unnecessary padding.

[yigu, 2016/11/15 23:30:16]

Done.

+    width: 200px;
+    height: 200px;
+    box-sizing: border-box;
+    will-change: transform;
+}
+
+.spacer {
+    height: 300px;
+}
+</style>
+<!-- #scroller should not be covered up by a negative offset outline. It is

[flackr, 2016/11/15 20:40:40]

This comment is confusing, the outline should be on top of the #scroller
shouldn't it? Did you mean #scroller outline should not be covered up by
scrolling content background?

[yigu, 2016/11/15 23:30:16]

Yes that was misleading.

+    achieved by painting the outline into the decoration layer which draws
+    on top of all other layers. -->
+<div id="scroller">
+    <div class="spacer"></div>
+</div>
+