Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 00:45:33 +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

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>