layout: Make absolutely-positioned elements with z-index: auto not

stacking contexts.

Improves many sites.

Closes #7069.

components/layout/display_list_builder.rs

@@ -1631,15 +1631,28 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
                 Some(outer_display_list_for_overflow_scroll)
             }
             _ => {
-                self.build_display_list_for_block_base(
+                let establishes_stacking_context = self.fragment.establishes_stacking_context();
-                    &mut *display_list,
+                let background_and_border_level = if establishes_stacking_context {
-                    layout_context,
+                    BackgroundAndBorderLevel::RootOfStackingContext
-                    border_painting_mode,
+                } else {
-                    BackgroundAndBorderLevel::RootOfStackingContext);
+                    BackgroundAndBorderLevel::Block
+                };
+
+                self.build_display_list_for_block_base(&mut *display_list,
+                                                       layout_context,
+                                                       border_painting_mode,
+                                                       background_and_border_level);
                 None
             }
         };
 
+        if !self.fragment.establishes_stacking_context() {
+            display_list.form_pseudo_stacking_context_for_positioned_content();
+            self.base.display_list_building_result =
+                DisplayListBuildingResult::Normal(display_list);
+            return
+        }
+
         if !self.will_get_layer() {
             // We didn't need a layer.
             self.base.display_list_building_result =

components/layout/fragment.rs

@@ -35,9 +35,9 @@ use std::fmt;
 use std::sync::{Arc, Mutex};
 use string_cache::Atom;
 use style::computed_values::content::ContentItem;
-use style::computed_values::{border_collapse, clear, mix_blend_mode, overflow_wrap, position};
+use style::computed_values::{border_collapse, clear, mix_blend_mode, overflow_wrap, overflow_x};
-use style::computed_values::{text_align, text_decoration, white_space, word_break};
+use style::computed_values::{position, text_align, text_decoration, transform_style, white_space};
-use style::computed_values::transform_style;
+use style::computed_values::{word_break, z_index};
 use style::properties::{self, ComputedValues, cascade_anonymous};
 use style::values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto};
 use style::values::computed::{LengthOrPercentageOrNone};
@@ -2027,13 +2027,24 @@ impl Fragment {
             return true
         }
 
-        match self.style().get_box().position {
+        // FIXME(pcwalton): Don't unconditionally form stacking contexts for `overflow_x: scroll`
-            position::T::absolute | position::T::fixed => {
+        // and `overflow_y: scroll`. This needs multiple layers per stacking context.
-                // FIXME(pcwalton): This should only establish a new stacking context when
+        match (self.style().get_box().position,
-                // `z-index` is not `auto`. But this matches what we did before.
+               self.style().get_box().z_index,
-                true
+               self.style().get_box().overflow_x,
-            }
+               self.style().get_box().overflow_y.0) {
-            position::T::relative | position::T::static_ => {
+            (position::T::absolute,
+             z_index::T::Auto,
+             overflow_x::T::visible,
+             overflow_x::T::visible) |
+            (position::T::fixed,
+             z_index::T::Auto,
+             overflow_x::T::visible,
+             overflow_x::T::visible) => false,
+            (position::T::absolute, _, _, _) |
+            (position::T::fixed, _, _, _) => true,
+            (position::T::relative, _, _, _) |
+            (position::T::static_, _, _, _) => {
                 // FIXME(pcwalton): `position: relative` establishes a new stacking context if
                 // `z-index` is not `auto`. But this matches what we did before.
                 false

tests/ref/absolute_z_index_auto_paint_order_a.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+body, html {
+    margin: 0;
+    padding: 0;
+}
+</style>
+<div style="background: red;   position: absolute; height: 40px; width: 40px; top: 10px; left: 10px;"></div>
+<div style="background: green; position: relative; height: 40px; width: 40px; top: 20px; left: 20px;"></div>

tests/ref/absolute_z_index_auto_paint_order_ref.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+body, html {
+    margin: 0;
+    padding: 0;
+}
+</style>
+<div style="background: red;   position: absolute; height: 40px; width: 40px; top: 10px; left: 10px;"></div>
+<div style="background: green; position: absolute; height: 40px; width: 40px; top: 20px; left: 20px;"></div>

tests/ref/basic.list

@@ -11,6 +11,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
 
 == abs_rel_explicit_height.html abs_rel_explicit_height_ref.html
 == absolute_inline_containing_block_a.html absolute_inline_containing_block_ref.html
+== absolute_z_index_auto_paint_order_a.html absolute_z_index_auto_paint_order_ref.html
 == acid1_a.html acid1_b.html
 == acid2_noscroll.html acid2_ref_broken.html
 == after_block_iteration.html after_block_iteration_ref.html

tests/wpt/metadata-css/css21_dev/html4/background-intrinsic-010.htm.ini

@@ -1,3 +0,0 @@
-[background-intrinsic-010.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/border-005.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/border-006.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/border-008.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/content-177.htm.ini

@@ -1,5 +0,0 @@
-[content-177.htm]
-  type: reftest
-  expected:
-    if os == "mac": PASS
-    FAIL

tests/wpt/metadata-css/css21_dev/html4/margin-bottom-103.htm.ini

@@ -1,3 +0,0 @@
-[margin-bottom-103.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/margin-bottom-104.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/margin-left-113.htm.ini

@@ -1,3 +0,0 @@
-[margin-left-113.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/position-relative-016.htm.ini

@@ -1,3 +0,0 @@
-[position-relative-016.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/top-019.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-020.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-031.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-032.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-043.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-044.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-055.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-056.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-067.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-068.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-079.htm.ini

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

tests/wpt/metadata-css/css21_dev/html4/top-080.htm.ini

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