Mix stacking contexts into the positioned content list

Sometimes positioned content needs to be layered on top of stacking
contexts. The layer synthesis code can do this, but the current design
prevents it because stacking contexts are stored in a separate struct
member. In order to preserve tree order, mix stacking contexts into the
positioned content list, by adding a new StackingContextClass
DisplayItem. Such items do not have a base DisplayItem.

In some ways this simplifies the code, because we no longer have to
have a separate code path in the StackingContextLayerCreator.

Fixes #7779.
Fixes #7983.
Fixes #8122.
Fixes #8310.

tests/wpt/metadata-css/css21_dev/html4/floats-154.htm.ini

@@ -1,3 +0,0 @@
-[floats-154.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/left-offset-position-fixed-001.htm.ini

@@ -1,3 +0,0 @@
-[left-offset-position-fixed-001.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/max-height-107.htm.ini

@@ -1,3 +0,0 @@
-[max-height-107.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/max-height-110.htm.ini

@@ -1,3 +0,0 @@
-[max-height-110.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/min-height-104.htm.ini

@@ -1,3 +0,0 @@
-[min-height-104.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/min-height-105.htm.ini

@@ -1,3 +0,0 @@
-[min-height-105.htm]
-  type: reftest
-  expected: FAIL

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

@@ -22,6 +22,13 @@
             <div class="gray box" style="margin-left: 20px; margin-top: 10px; position: absolute; top: 20px; z-index: 5;"> </div>
         </div>
 
+        <!-- These divs should be stacked in tree order, even though the second one
+              initiates a stacking context and the third one does not. -->
+        <div class="test grayest box">
+            <div class="grayer box" style="transform: translateX(10px) translateY(10px);"> </div>
+            <div class="gray box" style="top: -30px; left: 20px; position: relative; "></div>
+        </div>
+
         <!-- The z-index of the second box should be ignored since it is not a positioned element.
              so these boxes stack in tree order. -->
         <div class="test grayest box">
@@ -36,6 +43,16 @@
             <div class="gray box" style="position: relative; left: 20px; top: -40px;"> </div>
         </div>
 
+        <!-- Same as the previous test case, but the iframe is now a descendant
+             of the sibling of the second div, instead of a direct sibling. -->
+        <div class="test grayest box">
+            <div>
+                <iframe class="box" style="margin-left: 10px; margin-top: 10px;" src="data:text/html;charset=utf-8;base64,PGh0bWw+PGJvZHkgc3R5bGU9ImJhY2tncm91bmQ6IHJnYig4MCwgODAsIDgwKTsiPjwvYm9keT48L2Rpdj4="></iframe>
+            </div>
+            <div class="gray box" style="position: relative; left: 20px; top: -40px;"> </div>
+        </div>
+
+
         <!-- The iframe should be painted in tree order since both it and the inner div are
              not positioned elements. -->
         <div class="test grayest box">

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

@@ -20,6 +20,11 @@
         <div class="gray box" style="margin-left: 20px; margin-top: 10px; position: absolute; top: 20px; z-index: 5;"></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>
+
     <div class="test grayest box">
         <div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute; opacity: 0.999;"></div>
         <div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; opacity: 0.999;"></div>
@@ -44,5 +49,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>