Correctly place images with background-position: center

Add a regression ref test. See also #19680.
servo · Jan 5, 2018 · 859f002 · 859f002
1 parent 3692f13
commit 859f002
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 1 deletion.
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
@@ -1581,7 +1581,7 @@ impl FragmentDisplayListBuilding for Fragment {
         let mut tile_size = compute_background_image_size(bg_size, bounds.size, intrinsic_size);
 
         let mut tile_spacing = Size2D::zero();
-        let own_position = bounds.size - intrinsic_size.unwrap_or(Size2D::zero());
+        let own_position = bounds.size - tile_size;
         let pos_x = bg_position_x.to_used_value(own_position.width);
         let pos_y = bg_position_y.to_used_value(own_position.height);
         tile_image_axis(

diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
@@ -96597,6 +96597,18 @@
      {}
     ]
    ],
+   "css/css-backgrounds/background-image-centered.html": [
+    [
+     "/css/css-backgrounds/background-image-centered.html",
+     [
+      [
+       "/css/css-backgrounds/background-image-centered-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-backgrounds/background-image-first-letter.html": [
     [
      "/css/css-backgrounds/background-image-first-letter.html",
@@ -228200,6 +228212,11 @@
      {}
     ]
    ],
+   "css/css-backgrounds/background-image-centered-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-backgrounds/background-origin/list.txt": [
     [
      {}
@@ -463909,6 +463926,14 @@
    "b0231f487c5d467ac707eb91dcdd561462a54ca1",
    "reftest"
   ],
+  "css/css-backgrounds/background-image-centered-ref.html": [
+   "655c4a1f457630f0788d4d4eae465d757b26c6df",
+   "support"
+  ],
+  "css/css-backgrounds/background-image-centered.html": [
+   "dfb5aed73f04867336a353a53698ba851b2a1da8",
+   "reftest"
+  ],
   "css/css-backgrounds/background-image-first-letter.html": [
    "7e296a53a2abebcd5fcee2431b182efe6f148c64",
    "reftest"

diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/background-image-centered-ref.html b/tests/wpt/web-platform-tests/css/css-backgrounds/background-image-centered-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Centered Background Gradient</title>
+<style>
+    #a {
+        width: 200px;
+        height: 150px;
+        border-style: solid;
+        border-width: 10px;
+        background-position: 0px 0px;
+        background-image: repeating-radial-gradient(blue, green 20px);
+    }
+</style>
+<body>
+    <div id="a"></div>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/background-image-centered.html b/tests/wpt/web-platform-tests/css/css-backgrounds/background-image-centered.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Centered Background Gradient</title>
+<link rel="match" href="background-image-centered-ref.html">
+<link rel="help" href="http://www.w3.org/TR/css3-background/">
+<style>
+    #a {
+        width: 200px;
+        height: 150px;
+        border-style: solid;
+        border-width: 10px;
+        background-position: center center;
+        background-image: repeating-radial-gradient(blue, green 20px);
+    }
+</style>
+<body>
+    <div id="a"></div>
+</body>