Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make background gradient cover padding

Browse source 
CSS-gradients should not only cover the content of an
element but also the padding (but not the border).

Add a reftest.
This commit is contained in:
Pyfisch 2017-06-18 22:51:54 +02:00
parent 348c282407
commit a34d8c7fa9
4 changed files with 64 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/layout/display_list_builder.rs
View file

@ -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,

25
tests/wpt/metadata/MANIFEST.json
View file

@ -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"

15
tests/wpt/web-platform-tests/css/css-images-3/gradient-button-ref.html Normal file
View file

@ -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>

19
tests/wpt/web-platform-tests/css/css-images-3/gradient-button.html Normal file
View file

@ -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>