mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

added support for gradient background size and fixed linear gradient angle when vendor prefix is used

Browse Source
This commit is contained in:
Matthias Christen
2017-12-09 23:07:27 +01:00
parent 9bc0fb0bd1
commit d1e870de88
4 changed files with 97 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
tests/reftests/background/linear-gradient2.html Normal file
View File

@ -0,0 +1,42 @@
<!doctype html>
<html>
<head>
<title>Background attribute tests</title>
<script type="text/javascript" src="../../test.js"></script>
<style>
body {
background-color: blanchedalmond;
}
div {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 15px solid black;
}
</style>
</head>
<body>
<div style="background: -webkit-linear-gradient(90deg, blue, red);"></div>
<div style="background: linear-gradient(90deg, blue, red);"></div>
<div style="background: linear-gradient(45deg, blue, red);"></div>
<div style="background: linear-gradient(45deg, blue, red); width:200px;"></div>
<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px; background-repeat: no-repeat"></div>
<div style="background-image: linear-gradient(45deg, blue, red); background-position: 20px 30px; background-size: 60px;"></div>
<div style="background-image: linear-gradient(45deg, blue, red);padding:0"></div>
<div style="background: linear-gradient(red, red 60%, blue);"></div>
<div style="background: linear-gradient(90deg, red 60%, blue);"></div>
<div style="background: linear-gradient(135deg, red, red 60%, blue);"></div>
<div style="background: linear-gradient(to right, red, red 60%, blue);"></div>
<div style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);"></div>
<div style="background: linear-gradient(60deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%);"></div>
<div style="background: linear-gradient(45deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: content-box"></div>
<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: padding-box"></div>
<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%); background-origin: border-box"></div>
<div style="background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); "></div>
<div style="background: linear-gradient(90deg, yellow 0%, orange 10%, red 50%, blue 90%, cyan 100%) content-box;"></div>
<div style="background: linear-gradient(60deg, hsla(120,80%,50%,0.8) 0%, transparent 50%, rgba(255,100,100,0.5) 100%);"></div>
</body>
</html>