Unify background placement code

components/gfx/display_list/mod.rs

@@ -729,6 +729,7 @@ pub struct GradientDisplayItem {
     ///
     /// Without tiles, the tile will be the same size as the background.
     pub tile: Size2D<Au>,
+    pub tile_spacing: Size2D<Au>,
 }
 
 /// Paints a radial gradient.
@@ -763,6 +764,7 @@ pub struct RadialGradientDisplayItem {
     ///
     /// Without tiles, the tile will be the same size as the background.
     pub tile: Size2D<Au>,
+    pub tile_spacing: Size2D<Au>,
 }
 
 /// A normal border, supporting CSS border styles.

components/layout/fragment.rs

@@ -421,77 +421,6 @@ impl ImageFragmentInfo {
             metadata: metadata,
         }
     }
-
-    pub fn tile_image_round(position: &mut Au,
-                            size: &mut Au,
-                            absolute_anchor_origin: Au,
-                            image_size: &mut Au) {
-        if *size == Au(0) || *image_size == Au(0) {
-            *position = Au(0);
-            *size =Au(0);
-            return;
-        }
-
-        let number_of_tiles = (size.to_f32_px() / image_size.to_f32_px()).round().max(1.0);
-        *image_size = *size / (number_of_tiles as i32);
-        ImageFragmentInfo::tile_image(position, size, absolute_anchor_origin, *image_size);
-    }
-
-    pub fn tile_image_spaced(position: &mut Au,
-                             size: &mut Au,
-                             tile_spacing: &mut Au,
-                             absolute_anchor_origin: Au,
-                             image_size: Au) {
-        if *size == Au(0) || image_size == Au(0) {
-            *position = Au(0);
-            *size = Au(0);
-            *tile_spacing = Au(0);
-            return;
-        }
-
-        // Per the spec, if the space available is not enough for two images, just tile as
-        // normal but only display a single tile.
-        if image_size * 2 >= *size {
-            ImageFragmentInfo::tile_image(position,
-                                          size,
-                                          absolute_anchor_origin,
-                                          image_size);
-            *tile_spacing = Au(0);
-            *size = image_size;
-            return;
-        }
-
-        // Take the box size, remove room for two tiles on the edges, and then calculate how many
-        // other tiles fit in between them.
-        let size_remaining = *size - (image_size * 2);
-        let num_middle_tiles = (size_remaining.to_f32_px() / image_size.to_f32_px()).floor() as i32;
-
-        // Allocate the remaining space as padding between tiles. background-position is ignored
-        // as per the spec, so the position is just the box origin. We are also ignoring
-        // background-attachment here, which seems unspecced when combined with
-        // background-repeat: space.
-        let space_for_middle_tiles = image_size * num_middle_tiles;
-        *tile_spacing = (size_remaining - space_for_middle_tiles) / (num_middle_tiles + 1);
-    }
-
-    /// Tile an image
-    pub fn tile_image(position: &mut Au,
-                      size: &mut Au,
-                      absolute_anchor_origin: Au,
-                      image_size: Au) {
-        // Avoid division by zero below!
-        if image_size == Au(0) {
-            return
-        }
-
-        let delta_pixels = absolute_anchor_origin - *position;
-        let image_size_px = image_size.to_f32_px();
-        let tile_count = ((delta_pixels.to_f32_px() + image_size_px - 1.0) / image_size_px).floor();
-        let offset = image_size * (tile_count as i32);
-        let new_position = absolute_anchor_origin - offset;
-        *size = *position - new_position + *size;
-        *position = new_position;
-    }
 }
 
 /// A fragment that represents an inline frame (iframe). This stores the frame ID so that the

components/layout/webrender_helpers.rs

@@ -442,7 +442,7 @@ impl WebRenderDisplayItemConverter for DisplayItem {
                 builder.push_gradient(&self.prim_info(),
                                       gradient,
                                       item.tile.to_sizef(),
-                                      webrender_api::LayoutSize::zero());
+                                      item.tile_spacing.to_sizef());
             }
             DisplayItem::RadialGradient(ref item) => {
                 let center = item.gradient.center.to_pointf();
@@ -459,7 +459,7 @@ impl WebRenderDisplayItemConverter for DisplayItem {
                 builder.push_radial_gradient(&self.prim_info(),
                                              gradient,
                                              item.tile.to_sizef(),
-                                             webrender_api::LayoutSize::zero());
+                                             item.tile_spacing.to_sizef());
             }
             DisplayItem::Line(ref item) => {
                 builder.push_line(&self.prim_info(),

tests/wpt/metadata/MANIFEST.json

      {}
     ]
    ],
+   "css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html": [
+    [
+     "/css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html",
+     [
+      [
+       "/css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-backgrounds/background-size-002.html": [
     [
      "/css/css-backgrounds/background-size-002.html",
      {}
     ]
    ],
+   "css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-backgrounds/background-repeat/reference/support/rectangle-96x60.png": [
     [
      {}
    "0a631e1bd4a8b410edd28a51675207f591e04a55",
    "reftest"
   ],
+  "css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html": [
+   "2880f6e6ab270572d9279d04ca196bfeae30a261",
+   "reftest"
+  ],
   "css/css-backgrounds/background-repeat/reference/background-repeat-no-repeat.xht": [
    "3e5eecf9416348440b6d23dc7a817de5ed97ede7",
    "support"
    "0e0e06ed0f62fbcca2f5a087e807bf2ac74b1ad6",
    "support"
   ],
+  "css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html": [
+   "b6e92428d5562a83424ef050f3c57dfc128a95a2",
+   "support"
+  ],
   "css/css-backgrounds/background-repeat/reference/support/rectangle-96x60.png": [
    "36050bffda9382cfd978dc82a2f0244a535a6a46",
    "support"

tests/wpt/web-platform-tests/css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Tiled gradient with spaces is repeated behind the border.</title>
+<link rel="match" href="reference/gradient-repeat-spaced-with-borders.html">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#valdef-background-repeat-space">
+<style>
+    #foo {
+        width: 65px;
+        height: 65px;
+        border: solid 35px transparent;
+        background: radial-gradient(transparent 50%, #36c 50%);
+        background-size: 30px 30px;
+        background-repeat: space;
+    }
+</style>
+<body>
+    <div id="foo"></div>
+</body>

tests/wpt/web-platform-tests/css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Spaced Gradient</title>
+<style>
+    #foo {
+        width: calc(4 * 30px + 3 * 5px);
+        height: calc(4 * 30px + 3 * 5px);
+        background: radial-gradient(transparent 50%, #36c 50%);
+        background-size: 30px 30px;
+        background-repeat: space;
+    }
+</style>
+<body>
+    <div id="foo"></div>
+</body>