From a34d8c7fa97791f469717f3d3a0917a48850b5c7 Mon Sep 17 00:00:00 2001 From: Pyfisch Date: Sun, 18 Jun 2017 22:51:54 +0200 Subject: [PATCH] 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. --- components/layout/display_list_builder.rs | 10 ++++---- tests/wpt/metadata/MANIFEST.json | 25 +++++++++++++++++++ .../css/css-images-3/gradient-button-ref.html | 15 +++++++++++ .../css/css-images-3/gradient-button.html | 19 ++++++++++++++ 4 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 tests/wpt/web-platform-tests/css/css-images-3/gradient-button-ref.html create mode 100644 tests/wpt/web-platform-tests/css/css-images-3/gradient-button.html diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs index 129a479d1c9..cb436a6fca7 100644 --- 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 index 02bcc380548..d6c45aef8a0 100644 --- 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 new file mode 100644 index 00000000000..2f4d7ba77fc --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-images-3/gradient-button-ref.html @@ -0,0 +1,15 @@ + + +Big button with gradient (without padding) + +
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 new file mode 100644 index 00000000000..76cd933bcc3 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-images-3/gradient-button.html @@ -0,0 +1,19 @@ + + +Gradients with padding + + + + +