mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
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.
This commit is contained in:
parent
348c282407
commit
a34d8c7fa9
4 changed files with 64 additions and 5 deletions
|
@ -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,
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue