Make background gradient cover padding

CSS-gradients should not only cover the content of an element but also the padding (but not the border). Add a reftest.
servo · Jun 20, 2017 · a34d8c7 · a34d8c7
1 parent 348c282
commit a34d8c7
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 5 deletions.
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
@@ -1300,12 +1300,12 @@ impl FragmentDisplayListBuilding for Fragment {
         let mut clip = clip.clone();
         clip.intersect_rect(clip_bounds);
 
-        let border_padding = self.border_padding.to_physical(style.writing_mode);
+        let border = self.border_width().to_physical(style.writing_mode);
         let mut bounds = *absolute_bounds;
-        bounds.origin.x = bounds.origin.x + border_padding.left;
-        bounds.origin.y = bounds.origin.y + border_padding.top;
-        bounds.size.width = bounds.size.width - border_padding.horizontal();
-        bounds.size.height = bounds.size.height - border_padding.vertical();
+        bounds.origin.x = bounds.origin.x + border.left;
+        bounds.origin.y = bounds.origin.y + border.top;
+        bounds.size.width = bounds.size.width - border.horizontal();
+        bounds.size.height = bounds.size.height - border.vertical();
 
         let base = state.create_base_display_item(&bounds,
                                                   &clip,

diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
@@ -109911,6 +109911,18 @@
      {}
     ]
    ],
+   "css/css-images-3/gradient-button.html": [
+    [
+     "/css/css-images-3/gradient-button.html",
+     [
+      [
+       "/css/css-images-3/gradient-button-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-logical-props-1/cascading-001.html": [
     [
      "/css/css-logical-props-1/cascading-001.html",
@@ -228122,6 +228134,11 @@
      {}
     ]
    ],
+   "css/css-images-3/gradient-button-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-images-3/support/1x1-green.gif": [
     [
      {}
@@ -493655,6 +493672,14 @@
    "94471f5d29319241d0d25b8391430778f668ff4f",
    "reftest"
   ],
+  "css/css-images-3/gradient-button-ref.html": [
+   "17a42eca5cfb86e29bfb5e20a65f0585d9727e30",
+   "support"
+  ],
+  "css/css-images-3/gradient-button.html": [
+   "41dc276e1c60a3fbf7920f44b8032fc2b0d7114e",
+   "reftest"
+  ],
   "css/css-images-3/image-fit-001.xht": [
    "868d9469f57e6013a024efa5e04ef2455d97296e",
    "visual"

diff --git a/tests/wpt/web-platform-tests/css/css-images-3/gradient-button-ref.html b/tests/wpt/web-platform-tests/css/css-images-3/gradient-button-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Big button with gradient (without padding)</title>
+<style>
+    #button {
+        width: calc(300px + 2 * 30px);
+        height: calc(80px + 2 * 20px);
+        background: linear-gradient(blue, green);
+        border-width: 5px;
+        border-style: solid;
+        border-color: red;
+        border-radius: 10px;
+    }
+</style>
+<div id="button"></div>
diff --git a/tests/wpt/web-platform-tests/css/css-images-3/gradient-button.html b/tests/wpt/web-platform-tests/css/css-images-3/gradient-button.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Gradients with padding</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients">
+<meta name="assert" content="gradients cover element padding">
+<link rel="match" href="gradient-button-ref.html">
+<style>
+#button {
+    width: 300px;
+    height: 80px;
+    padding: 20px 30px;
+    background: linear-gradient(blue, green);
+    border-width: 5px;
+    border-style: solid;
+    border-color: red;
+    border-radius: 10px;
+}
+</style>
+<div id="button"></div>