Position the background image on the padding box.

According to CSS2.1 spec, background image should be positioned on padding box. Spec: http://www.w3.org/TR/CSS21/colors.html#propdef-background-position Fixes #6034.
servo · May 13, 2015 · 7283f75 · 7283f75
1 parent b3b9dea
commit 7283f75
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
@@ -435,8 +435,11 @@ impl FragmentDisplayListBuilding for Fragment {
             let vertical_position = model::specified(background.background_position.vertical,
                                                      bounds.size.height - image_size.height);
 
-            let abs_x = virtual_origin_x + horizontal_position;
-            let abs_y = virtual_origin_y + vertical_position;
+            // Background image should be positioned on the padding box basis.
+            let border = style.logical_border_width().to_physical(style.writing_mode);
+
+            let abs_x = border.left + virtual_origin_x + horizontal_position;
+            let abs_y = border.top + virtual_origin_y + vertical_position;
 
             // Adjust origin and size based on background-repeat
             match background.background_repeat {

diff --git a/tests/ref/background_image_a.html b/tests/ref/background_image_a.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    background-image: url("test.jpeg");
+    width: 420px;
+    height: 298px;
+    border-width: 10px 20px 30px 40px;
+    border-style: solid;
+    border-color: red;
+    padding: 40px;
+}
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
+
diff --git a/tests/ref/background_image_ref.html b/tests/ref/background_image_ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    width: 560px;
+    height: 418px;
+    background-color: red;
+}
+
+</style>
+</head>
+<body>
+
+<div>
+<!-- Image dimension is 500x378. -->
+<img src="test.jpeg" style="position:relative; left:40px; top:10px;">
+</div>
+
+</body>
+</html>
+