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

Auto merge of #17395 - pyfisch:issue17387, r=emilio

Browse source 
Make background gradient cover padding

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

<!-- Please describe your changes on the following line: -->

Thanks to @atouchet for catching this.

<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #17387 (github issue number if applicable).

<!-- Either: -->
- [x] These changes do not require tests because gradients are hard to test automatically but you can use [this gist](https://gist.github.com/pyfisch/fa263c8dfc57e5812fe8a4869ad61513) as a manual test.

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/17395)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2017-06-21 06:50:09 -07:00 • committed by GitHub
commit 7a80192a82
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>