Auto merge of #8023 - mrobinson:zindex, r=pcwalton

Z-index should be ignored for non-positioned stacking contexts

When a stacking-context is not positioned, its z-index should be
ignored. This is per CSS 2 9.9.1. The only exception to this is when
the z-index is applied to an element with display: flex | inline-flex.
inline-flex does not appear to be implemented at this time so we only
do this for flex.

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/8023)
<!-- Reviewable:end -->

4 files changed, 36 insertions, 5 deletions

diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
index 3edbab40e86..299f0155e4d 100644
--- a/components/layout/display_list_builder.rs
+++ b/components/layout/display_list_builder.rs
@@ -1331,7 +1331,7 @@ impl FragmentDisplayListBuilding for Fragment {
         Arc::new(StackingContext::new(display_list,
                                       &border_box,
                                       &overflow,
-                                      self.style().get_box().z_index.number_or_zero(),
+                                      self.effective_z_index(),
                                       filters,
                                       self.style().get_effects().mix_blend_mode,
                                       transform,
diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
index cd05ff04572..469cb0b6654 100644
--- a/components/layout/fragment.rs
+++ b/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, overflow_x};
-use style::computed_values::{position, text_align, text_decoration, transform_style, white_space};
-use style::computed_values::{word_break, z_index};
+use style::computed_values::{border_collapse, clear, display, mix_blend_mode, overflow_wrap};
+use style::computed_values::{overflow_x, position, text_align, text_decoration, transform_style};
+use style::computed_values::{white_space, word_break, z_index};
 use style::properties::ComputedValues;
 use style::values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto};
 use style::values::computed::{LengthOrPercentageOrNone};
@@ -2166,6 +2166,25 @@ impl Fragment {
         }
     }
 
+    // Get the effective z-index of this fragment. Z-indices only apply to positioned element
+    // per CSS 2 9.9.1 (http://www.w3.org/TR/CSS2/visuren.html#z-index), so this value may differ
+    // from the value specified in the style.
+    pub fn effective_z_index(&self) -> i32 {
+        match self.style().get_box().position {
+            position::T::static_ => {},
+            _ => return self.style().get_box().z_index.number_or_zero(),
+        }
+
+        if self.style().get_effects().transform.0.is_some() {
+            return self.style().get_box().z_index.number_or_zero();
+        }
+
+        match self.style().get_box().display {
+            display::T::flex => self.style().get_box().z_index.number_or_zero(),
+            _ => 0,
+        }
+    }
+
     /// Computes the overflow rect of this fragment relative to the start of the flow.
     pub fn compute_overflow(&self,
                             flow_size: &Size2D<Au>,
diff --git a/tests/wpt/mozilla/tests/css/stacked_layers.html b/tests/wpt/mozilla/tests/css/stacked_layers.html
index 6cd0141a27d..a0edbaf667c 100644
--- a/tests/wpt/mozilla/tests/css/stacked_layers.html
+++ b/tests/wpt/mozilla/tests/css/stacked_layers.html
@@ -20,5 +20,12 @@
             <div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: fixed;"></div>
             <div class="gray box" style="margin-left: 20px; margin-top: 10px; position: absolute; top: 20px; z-index: 5;"> </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">
+            <div class="grayer box" style="margin-left: 10px; margin-top: 10px; opacity: 0.999; z-index: -1;"></div>
+            <div class="gray box" style="margin-left: 20px; margin-top: -40px; opacity: 0.999;"> </div>
+        </div>
     </body>
 </html>
diff --git a/tests/wpt/mozilla/tests/css/stacked_layers_ref.html b/tests/wpt/mozilla/tests/css/stacked_layers_ref.html
index 27ec9f85692..fbec3c30c7d 100644
--- a/tests/wpt/mozilla/tests/css/stacked_layers_ref.html
+++ b/tests/wpt/mozilla/tests/css/stacked_layers_ref.html
@@ -12,12 +12,17 @@
 <body>
     <div class="test grayest box">
         <div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute;"></div>
-        <div class="gray box" style="margin-left: 20px; margin-top: 10px; position: relative; top: 10px; z-index: 5;"></div>
+        <div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; z-index: 5;"></div>
     </div>
 
     <div class="test grayest box">
         <div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute;"></div>
         <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; position: absolute; opacity: 0.999;"></div>
+        <div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; opacity: 0.999;"></div>
+    </div>
 </body>
 </html>