Allow overflow:scroll without a stacking context

Fix the long-standing bug where items that are positioned and have
overflow:scroll or overflow:auto automatically create stacking
contexts. In order to do this we need to fix another bug where display
list sorting can put a Clip or ScrollFrame definition after the first
time it is used in a display list.

tests/wpt/mozilla/meta/MANIFEST.json

@@ -25536,11 +25536,11 @@
    "support"
   ],
   "css/stacked_layers.html": [
-   "db8e8e17e980bbeb6f7f0858be6fbe9aeede378c",
+   "9060686b4edb2bb051e0bd60116800de0a18bb7d",
    "reftest"
   ],
   "css/stacked_layers_ref.html": [
-   "cfc3b330a7672edb48b04b2fbc7ca2c05d2e9cd3",
+   "2e36ba51990322feb0da6c5ee14d329f16037018",
    "support"
   ],
   "css/stacking_context_overflow_a.html": [

tests/wpt/mozilla/tests/css/stacked_layers.html

@@ -74,6 +74,15 @@
             <div class="gray box" style="position: relative; left: 20px; top: -30px;"> </div>
         </div>
 
+        <!-- The child of div with overflow scroll should be painted last since
+             overflow:scroll does not create a stacking context and capture it. -->
+        <div class="test grayest box">
+            <div class="box" style="position: relative; left: 20px; top: 20px; overflow: scroll;">
+                <div class="gray box" style="position: relative; z-index: 3;"></div>
+            </div>
+            <div class="grayer box" style="position: relative; left: 10px; top: -40px; z-index: 2;"></div>
+        </div>
+
         <script>
             function paintCanvas(id) {
                 var canvas = document.getElementById(id);

tests/wpt/mozilla/tests/css/stacked_layers_ref.html

@@ -54,5 +54,10 @@
         <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
         <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
     </div>
+
+    <div class="test grayest box">
+        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
+        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
+    </div>
 </body>
 </html>