html2canvas/tests/reftests/background/linear-gradient2.html

42 lines
2.3 KiB
HTML
Raw Normal View History

<!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>