mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
background clipping support
This commit is contained in:
60
tests/cases/background/clip.html
Normal file
60
tests/cases/background/clip.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
html {
|
||||
background-color: red;
|
||||
}
|
||||
body {
|
||||
background-color: lime;
|
||||
}
|
||||
.small div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:1px solid #000;
|
||||
}
|
||||
|
||||
.medium div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
border:20px solid transparent;
|
||||
border-width: 10px 20px 30px 40px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.small, .medium{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: border-box;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: padding-box;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);background-clip: content-box;"></div>
|
||||
<div style="background:url(../../assets/image.jpg);"></div>
|
||||
</div>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background-clip: border-box;"></div>
|
||||
<div style="background-clip: padding-box;"></div>
|
||||
<div style="background-clip: content-box;"></div>
|
||||
<div style=""></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user