Auto merge of #7883 - notriddle:master, r=pcwalton

Draw shadows after the background.

Fixes #7872

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

components/layout/display_list_builder.rs

@@ -971,14 +971,14 @@ impl FragmentDisplayListBuilding for Fragment {
             // Add shadows, background, borders, and outlines, if applicable.
             if let Some(ref inline_context) = self.inline_context {
                 for node in inline_context.nodes.iter().rev() {
-                    self.build_display_list_for_box_shadow_if_applicable(
+                    self.build_display_list_for_background_if_applicable(
                         &*node.style,
                         display_list,
                         layout_context,
                         level,
                         &stacking_relative_border_box,
                         &clip);
-                    self.build_display_list_for_background_if_applicable(
+                    self.build_display_list_for_box_shadow_if_applicable(
                         &*node.style,
                         display_list,
                         layout_context,
@@ -1008,13 +1008,13 @@ impl FragmentDisplayListBuilding for Fragment {
             }
 
             if !self.is_scanned_text_fragment() {
-                self.build_display_list_for_box_shadow_if_applicable(&*self.style,
+                self.build_display_list_for_background_if_applicable(&*self.style,
                                                                      display_list,
                                                                      layout_context,
                                                                      level,
                                                                      &stacking_relative_border_box,
                                                                      &clip);
-                self.build_display_list_for_background_if_applicable(&*self.style,
+                self.build_display_list_for_box_shadow_if_applicable(&*self.style,
                                                                      display_list,
                                                                      layout_context,
                                                                      level,

tests/ref/basic.list

@@ -77,10 +77,12 @@ flaky_cpu == append_style_a.html append_style_b.html
 == border_spacing_fixed_layout_a.html border_spacing_ref.html
 == border_style_none_a.html border_style_none_b.html
 == borders_a.html borders_b.html
+== box_shadow_bg.html box_shadow_bg_ref.html
 != box_shadow_blur_a.html box_shadow_blur_ref.html
 == box_shadow_border_box_a.html box_shadow_border_box_ref.html
 == box_shadow_default_color_a.html box_shadow_default_color_ref.html
 == box_shadow_inset_a.html box_shadow_inset_ref.html
+== box_shadow_inset_bg.html box_shadow_inset_bg_ref.html
 == box_shadow_inset_parsing_a.html box_shadow_inset_parsing_ref.html
 == box_shadow_paint_order_a.html box_shadow_paint_order_ref.html
 == box_shadow_spread_a.html box_shadow_spread_ref.html

tests/ref/box_shadow_bg.html

@@ -0,0 +1,11 @@
+<div></div>
+
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    box-shadow: 0 20px 0 0 red;
+    background-color: rgba(0,0,0,0.7);
+  }
+</style>
+

tests/ref/box_shadow_bg_ref.html

@@ -0,0 +1,16 @@
+<div></div><span></span>
+
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    background-color: rgba(0,0,0,0.7);
+  }
+  span {
+    background-color: red;
+    width: 100px;
+    height: 20px;
+    display: block;
+  }
+</style>
+

tests/ref/box_shadow_inset_bg.html

@@ -0,0 +1,11 @@
+<div></div>
+
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    box-shadow: inset 0 20px 0 0 red;
+    background-color: rgba(0,0,0,0.7);
+  }
+</style>
+

tests/ref/box_shadow_inset_bg_ref.html

@@ -0,0 +1,16 @@
+<div><span></span></div>
+
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    background-color: rgba(0,0,0,0.7);
+  }
+  span {
+    background-color: red;
+    width: 100px;
+    height: 20px;
+    display: block;
+  }
+</style>
+