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

Index: third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-negative-offset-translucent-outline.html
diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-negative-offset-translucent-outline.html b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-negative-offset-translucent-outline.html
new file mode 100644
index 0000000000000000000000000000000000000000..8fe13e7ec45be177b8f6818efeecb35e1cea39ca
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-negative-offset-translucent-outline.html
@@ -0,0 +1,28 @@
+<script>
+onload = function() {
+    document.getElementById('scroller').scrollTop = 200;

[flackr, 2016/11/16 21:14:20]

nit: Scrolling is unnecessary for testing this.

[yigu, 2016/11/17 15:53:15]

Done.

+}
+</script>
+<style>
+#scroller {
+    background: local grey;

[flackr, 2016/11/16 21:14:20]

Thinking about this some more, if we were double painting the outline (which is
the main reason to test a partially translucent outline) we may obscure that by
having a background on the scroller. Can you remove this background?

[yigu, 2016/11/17 15:53:15]

Done.

+    outline: 5px solid rgba(0, 255, 0, 0.5);
+    outline-offset: -4px;
+    overflow: scroll;
+    width: 200px;
+    height: 200px;
+    box-sizing: border-box;
+    will-change: transform;
+}
+
+.spacer {
+    height: 300px;
+}
+</style>
+<!-- #scroller outline should not be covered up by scrolling content background.
+    It is 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>
+