mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
added support for radial gradients
This commit is contained in:
Matthias Christen
committed by
Niklas von Hertzen
Niklas von Hertzen
parent
0b74e69611
commit
8ef3861a5c
151
tests/node/gradient.js
Normal file
151
tests/node/gradient.js
Normal file
@ -0,0 +1,151 @@
|
||||
const Gradient = require('../../dist/npm/Gradient');
|
||||
const assert = require('assert');
|
||||
|
||||
describe('Gradient', () => {
|
||||
describe('transformWebkitRadialGradientArgs', () => {
|
||||
it('white, black', () => {
|
||||
assert.equal(Gradient.transformWebkitRadialGradientArgs(['white', 'black'])[0], '');
|
||||
});
|
||||
|
||||
it('circle, white, black', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs(['circle', 'white', 'black'])[0],
|
||||
'circle'
|
||||
);
|
||||
});
|
||||
|
||||
it('10% 30%, white, black', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs(['10% 30%', 'white', 'black'])[0],
|
||||
'10% 30%'
|
||||
);
|
||||
});
|
||||
|
||||
it('30% 30%, closest-corner, white, black', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'30% 30%',
|
||||
'closest-corner',
|
||||
'white',
|
||||
'black'
|
||||
])[0],
|
||||
'closest-corner at 30% 30%'
|
||||
);
|
||||
});
|
||||
|
||||
it('30% 30%, circle closest-corner, white, black', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'30% 30%',
|
||||
'circle closest-corner',
|
||||
'white',
|
||||
'black'
|
||||
])[0],
|
||||
'circle closest-corner at 30% 30%'
|
||||
);
|
||||
});
|
||||
|
||||
it('center, 5em 40px, white, black', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'center',
|
||||
'5em 40px',
|
||||
'white',
|
||||
'black'
|
||||
])[0],
|
||||
'5em 40px at center'
|
||||
);
|
||||
});
|
||||
|
||||
it('45 45, 10, 52 50, 30, from(#A7D30C), to(red)', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'45 45',
|
||||
'10',
|
||||
'52 50',
|
||||
'30',
|
||||
'from(#A7D30C)'
|
||||
])[0],
|
||||
'30px at 52px 50px'
|
||||
);
|
||||
});
|
||||
|
||||
it('75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'75% 19%',
|
||||
'ellipse closest-side',
|
||||
'#ababab',
|
||||
'#0000ff 33%',
|
||||
'#991f1f 100%'
|
||||
])[0],
|
||||
'ellipse closest-side at 75% 19%'
|
||||
);
|
||||
});
|
||||
|
||||
it('75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'75% 19%',
|
||||
'circle contain',
|
||||
'#ababab',
|
||||
'#0000ff 33%',
|
||||
'#991f1f 100%'
|
||||
])[0],
|
||||
'circle closest-side at 75% 19%'
|
||||
);
|
||||
});
|
||||
|
||||
it('75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'75% 19%',
|
||||
'circle cover',
|
||||
'#ababab',
|
||||
'#0000ff 33%',
|
||||
'#991f1f 100%'
|
||||
])[0],
|
||||
'circle farthest-corner at 75% 19%'
|
||||
);
|
||||
});
|
||||
|
||||
it('right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'right 19%',
|
||||
'ellipse cover',
|
||||
'#ababab',
|
||||
'#0000ff 33%',
|
||||
'#991f1f 100%'
|
||||
])[0],
|
||||
'ellipse farthest-corner at right 19%'
|
||||
);
|
||||
});
|
||||
|
||||
it('left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'left 19%',
|
||||
'ellipse cover',
|
||||
'#ababab',
|
||||
'#0000ff 33%',
|
||||
'#991f1f 100%'
|
||||
])[0],
|
||||
'ellipse farthest-corner at left 19%'
|
||||
);
|
||||
});
|
||||
|
||||
it('left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%', () => {
|
||||
assert.equal(
|
||||
Gradient.transformWebkitRadialGradientArgs([
|
||||
'left top',
|
||||
'circle cover',
|
||||
'#ababab',
|
||||
'#0000ff 33%',
|
||||
'#991f1f 100%'
|
||||
])[0],
|
||||
'circle farthest-corner at left top'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
51
tests/reftests/background/radial-gradient2.html
Normal file
51
tests/reftests/background/radial-gradient2.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Background attribute tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
border: 15px solid black;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background: radial-gradient(red, blue)"></div>
|
||||
<div style="background: radial-gradient(circle, red, blue)"></div>
|
||||
<div style="background: radial-gradient(ellipse, red, blue)"></div>
|
||||
<div style="background: radial-gradient(circle, red, blue); width:200px"></div>
|
||||
<div style="background: radial-gradient(ellipse, red, blue); width:200px"></div>
|
||||
<div style="background: radial-gradient(closest-side, red, blue)"></div>
|
||||
<div style="background: radial-gradient(closest-corner, red, blue)"></div>
|
||||
<div style="background: radial-gradient(farthest-side, red, blue)"></div>
|
||||
<div style="background: radial-gradient(farthest-corner, red, blue)"></div>
|
||||
<div style="background: radial-gradient(circle 20px, red, blue)"></div>
|
||||
<div style="background: radial-gradient(ellipse 20px 30px, red, blue)"></div>
|
||||
<div style="font-size: 24px; border: none; padding: 0; width: auto;">
|
||||
<div style="background: radial-gradient(circle 20px at 2em 80px, red, blue)"></div>
|
||||
<div style="background: radial-gradient(circle 20px at 6rem 80px, red, blue)"></div>
|
||||
</div>
|
||||
<div style="background: radial-gradient(circle farthest-side, red, blue)"></div>
|
||||
<div style="background: radial-gradient(at 20px 20px, red, blue)"></div>
|
||||
<div style="background: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);"></div>
|
||||
<div style="background: radial-gradient(16px at 70px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);"></div>
|
||||
<div style="background: radial-gradient(16px at 70px 50% , #000000 0%, #000000 87.5%, rgba(0, 0, 0, 0.3) 112.5%, rgba(0, 0, 0, 0) 118.75%);"></div>
|
||||
<div style="background: radial-gradient(19px at 70px 50% , #000000 0%, #000000 73.68%, rgba(0, 0, 0, 0.3) 94.74%, rgba(0, 0, 0, 0) 100%);"></div>
|
||||
<div style="background: radial-gradient(ellipse 60px 30px at 70px 50%, #000000 0%, blue 10%, yellow 15%, red 18%);"></div>
|
||||
<div style="background: radial-gradient(circle farthest-corner at left top, aquamarine, deeppink);"></div>
|
||||
<div style="width: 300px; height: 200px; transform: translate(20px, 30px) rotate(20deg)">
|
||||
<div style="width: 200px; height: 150px; transform: translate(-10px, -20px) rotate(10deg)">
|
||||
<div style="background: radial-gradient(circle, red, blue)"></div>
|
||||
<div style="background: radial-gradient(ellipse, red, blue); width:150px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user