Auto merge of #7292 - pcwalton:layer-sorting, r=glennw

gfx: Sort layers according to their Z-index value before handing them off to the compositor.

Closes #7166.

r? @glennw

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

components/gfx/paint_task.rs

@@ -27,6 +27,7 @@ use msg::constellation_msg::PipelineExitType;
 use profile_traits::mem::{self, ReportsChan};
 use profile_traits::time::{self, profile};
 use rand::{self, Rng};
+use smallvec::SmallVec;
 use skia::gl_context::GLContext;
 use std::borrow::ToOwned;
 use std::mem as std_mem;
@@ -393,7 +394,14 @@ impl<C> PaintTask<C> where C: PaintListener + Send + 'static {
                 }
             };
 
+            // Sort positioned children according to z-index.
+            let mut positioned_children: SmallVec<[Arc<StackingContext>; 8]> = SmallVec::new();
             for kid in &stacking_context.display_list.children {
+                positioned_children.push((*kid).clone());
+            }
+            positioned_children.sort_by(|this, other| this.z_index.cmp(&other.z_index));
+
+            for kid in positioned_children.iter() {
                 build(properties, &**kid, &page_position, &transform, &perspective, next_parent_id)
             }
         }

tests/ref/basic.list

@@ -191,6 +191,7 @@ experimental == iframe/size_attributes_vertical_writing_mode.html iframe/size_at
 == jumpiness_a.html jumpiness_ref.html
 == last_child_pseudo_a.html last_child_pseudo_b.html
 == last_of_type_pseudo_a.html last_of_type_pseudo_b.html
+== layerization_z_order_a.html layerization_z_order_ref.html
 == legacy_cellspacing_attribute_a.html border_spacing_ref.html
 == legacy_input_size_attribute_override_a.html legacy_input_size_attribute_override_ref.html
 == legacy_table_border_attribute_a.html legacy_table_border_attribute_ref.html

tests/ref/layerization_z_order_a.html

@@ -0,0 +1,26 @@
+<style>
+body, html {
+    margin: 0;
+}
+#a, #b {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+}
+#a {
+    z-index: 2;
+    background: red;
+}
+#b {
+    top: 50px;
+    left: 50px;
+    background: green;
+}
+#c {
+    position: fixed;
+}
+</style>
+<div id=a></div>
+<div id=b></div>
+<div id=c></div>
+

tests/ref/layerization_z_order_ref.html

@@ -0,0 +1,22 @@
+<style>
+body, html {
+    margin: 0;
+}
+#a, #b {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+}
+#a {
+    z-index: 2;
+    background: red;
+}
+#b {
+    top: 50px;
+    left: 50px;
+    background: green;
+}
+</style>
+<div id=a></div>
+<div id=b></div>
+