Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 16:35: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

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>