Partial fix for background images on wikipedia pages.

This fixes the visual artifacts seen at the top of wikipedia pages by:
 - Setting clipping rect to avoid images going outside their bounds.
 - Handling case of background-position being >= 100% such that wrapping is required.

However, the gradient is not currently visible on wikipedia. This relies on bug #1997 being fixed.

components/layout/fragment.rs

@@ -719,44 +719,78 @@ impl Fragment {
         let vertical_position = model::specified(background.background_position.vertical,
                                                  bounds.size.height);
 
-        let clip_display_item;
+        // TODO: These are some situations below where it is possible
+        // to determine that clipping is not necessary - this is an
+        // optimization to make in the future.
+        let clip_display_item = Some(box ClipDisplayItem {
+            base: BaseDisplayItem::new(bounds, self.node, level),
+            children: DisplayList::new(),
+        });
+
+        let image_width = Au::from_px(image.width as int);
+        let image_height = Au::from_px(image.height as int);
+
         match background.background_attachment {
             background_attachment::scroll => {
-                clip_display_item = None;
                 bounds.origin.x = bounds.origin.x + horizontal_position;
                 bounds.origin.y = bounds.origin.y + vertical_position;
-                bounds.size.width = bounds.size.width - horizontal_position;
-                bounds.size.height = bounds.size.height - vertical_position;
+
+                // Adjust sizes for `background-repeat`.
+                match background.background_repeat {
+                    background_repeat::no_repeat => {
+                        bounds.size.width = Au::min(bounds.size.width - horizontal_position, image_width);
+                        bounds.size.height = Au::min(bounds.size.height - vertical_position, image_height);
+                    }
+                    background_repeat::repeat_x => {
+                        bounds.size.height = Au::min(bounds.size.height - vertical_position, image_height);
+                        if horizontal_position > Au(0) {
+                            bounds.origin.x = bounds.origin.x - image_width;
+                            bounds.size.width = bounds.size.width + image_width;
+                        }
+                    }
+                    background_repeat::repeat_y => {
+                        bounds.size.width = Au::min(bounds.size.width - horizontal_position, image_width);
+                        if vertical_position > Au(0) {
+                            bounds.origin.y = bounds.origin.y - image_height;
+                            bounds.size.height = bounds.size.height + image_height;
+                        }
+                    }
+                    background_repeat::repeat => {
+                        if horizontal_position > Au(0) {
+                            bounds.origin.x = bounds.origin.x - image_width;
+                            bounds.size.width = bounds.size.width + image_width;
+                        }
+                        if vertical_position > Au(0) {
+                            bounds.origin.y = bounds.origin.y - image_height;
+                            bounds.size.height = bounds.size.height + image_height;
+                        }
+                    }
+                };
             }
             background_attachment::fixed => {
-                clip_display_item = Some(box ClipDisplayItem {
-                    base: BaseDisplayItem::new(bounds, self.node, level),
-                    children: DisplayList::new(),
-                });
-
                 bounds = Rect {
                     origin: Point2D(horizontal_position, vertical_position),
                     size: Size2D(bounds.origin.x + bounds.size.width,
                                  bounds.origin.y + bounds.size.height),
-                }
+                };
+
+                // Adjust sizes for `background-repeat`.
+                match background.background_repeat {
+                    background_repeat::no_repeat => {
+                        bounds.size.width = image_width;
+                        bounds.size.height = image_height;
+                    }
+                    background_repeat::repeat_x => {
+                        bounds.size.height = image_height;
+                    }
+                    background_repeat::repeat_y => {
+                        bounds.size.width = image_width;
+                    }
+                    background_repeat::repeat => {}
+                };
             }
         }
 
-        // Adjust sizes for `background-repeat`.
-        match background.background_repeat {
-            background_repeat::no_repeat => {
-                bounds.size.width = Au::from_px(image.width as int);
-                bounds.size.height = Au::from_px(image.height as int)
-            }
-            background_repeat::repeat_x => {
-                bounds.size.height = Au::from_px(image.height as int)
-            }
-            background_repeat::repeat_y => {
-                bounds.size.width = Au::from_px(image.width as int)
-            }
-            background_repeat::repeat => {}
-        };
-
         // Create the image display item.
         let image_display_item = ImageDisplayItemClass(box ImageDisplayItem {
             base: BaseDisplayItem::new(bounds, self.node, level),

tests/ref/background_image_position_a.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style type="text/css">
+            @font-face {
+                font-family: 'ahem';
+                src: url(fonts/ahem/ahem.ttf);
+            }
+            body {
+                font-family: 'ahem';
+                margin: 0;
+            }
+            span {
+                background-image:url(line.png);
+                background-position:0% 100%;
+                font-size: 20px;
+                color: rgba(255, 255, 0, 0);
+            }
+        </style>
+    </head>
+    <body>
+        <span>X</span>
+    </body>
+</html>

tests/ref/background_image_position_ref.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style type="text/css">
+            body {
+                margin: 0;
+            }
+            div {
+                width: 20px;
+                height: 20px;
+                background-color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div></div>
+    </body>
+</html>

tests/ref/basic.list

@@ -112,3 +112,4 @@ flaky_gpu,flaky_linux == acid2_noscroll.html acid2_ref_broken.html
 == fixed_width_overrides_child_intrinsic_width_a.html fixed_width_overrides_child_intrinsic_width_ref.html
 == abs_float_pref_width_a.html abs_float_pref_width_ref.html
 == alpha_png_a.html alpha_png_b.html
+== background_image_position_a.html background_image_position_ref.html