Paint local attachment backgrounds into composited scrolling contents layer

third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-local-background.html

 <script>
 if (window.testRunner)
     testRunner.waitUntilDone();
 onload = function() {
     // Double rAF to ensure content is painted before scroll.

[chrishtr, 2016/08/12 17:03:00]

Add another test rather than modifying this one.

[flackr, 2016/08/16 17:52:51]

Done.

     requestAnimationFrame(function() {
         requestAnimationFrame(function() {
-            document.getElementById('scroller').scrollTo(0, 200);
+            document.getElementById('scroller1').scrollTop = 200;
+            document.getElementById('scroller2').scrollTop = 200;
             if (window.testRunner)
                 window.testRunner.notifyDone();
         })
     });
 }
 </script>
 <style>
-#scroller {
-    background: gray local content-box;
+.scroller {
     border: 10px solid rgba(0, 255, 0, 0.5);
     overflow: scroll;
     padding: 10px;
     width: 200px;
     height: 200px;
     will-change: transform;
 }
 
+#scroller1 {
+    background: gray local content-box;
+}
+
+#scroller2 {
+    background: url('../resources/apple.jpg') local;
+}
+
 .spacer {
     height: 300px;
 }
 </style>
 <!-- #scroller has a locally attached background with padding so when it is
     scrolled we can see the background slide up. Doing this on a composited
     element without repainting requires the background to be painted into
     the scrolling contents layer and correctly account for that layer not
     including the border in its bounds. -->
-<div id="scroller">
+<div id="scroller1" class="scroller">
     <div class="spacer"></div>
 </div>
+<!-- This scroller has a locally attached background image which should
+    scroll with the content. -->
+<div id="scroller2" class="scroller">
+    <div class="spacer"></div>
+</div>