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

Beging implementing reftests

Browse Source
This commit is contained in:
Niklas von Hertzen
2017-08-09 00:50:31 +08:00
parent 93f08c7547
commit 58d1bef3b6
163 changed files with 15221 additions and 14371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
tests/reftests/background/clip.html Normal file
View File

@@ -0,0 +1,66 @@
<!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:url(../../assets/image.jpg);background-clip: border-box; background-repeat: no-repeat;"></div>
<div style="background:url(../../assets/image.jpg);background-clip: padding-box; background-repeat: repeat-y;"></div>
<div style="background:url(../../assets/image.jpg);background-clip: content-box; background-repeat: repeat-x;"></div>
<div style="background:url(../../assets/image.jpg); background-repeat: no-repeat;"></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>

29
tests/reftests/background/clip.txt Normal file
View File

@@ -0,0 +1,29 @@
Window: [800, 1568]
Rectangle: [0, 0, 800, 1568] rgb(255,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 1048) > Vector(x: 8, y: 1048))
Fill: rgb(0,255,0)
Clip: Path (Vector(x: 18, y: 18) > Vector(x: 278, y: 18) > Vector(x: 278, y: 258) > Vector(x: 18, y: 258))
Repeat: Image ("/tests/assets/image.jpg") [58, 28] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 278, y: 18) > Vector(x: 278, y: 258) > Vector(x: 18, y: 258))
Clip: Path (Vector(x: 338, y: 28) > Vector(x: 538, y: 28) > Vector(x: 538, y: 228) > Vector(x: 338, y: 228))
Repeat: Image ("/tests/assets/image.jpg") [338, 28] Size (75, 75) Path (Vector(x: 298, y: 18) > Vector(x: 558, y: 18) > Vector(x: 558, y: 258) > Vector(x: 298, y: 258))
Clip: Path (Vector(x: 58, y: 288) > Vector(x: 258, y: 288) > Vector(x: 258, y: 488) > Vector(x: 58, y: 488))
Repeat: Image ("/tests/assets/image.jpg") [58, 288] Size (75, 75) Path (Vector(x: 18, y: 278) > Vector(x: 278, y: 278) > Vector(x: 278, y: 518) > Vector(x: 18, y: 518))
Clip: Path (Vector(x: 298, y: 278) > Vector(x: 558, y: 278) > Vector(x: 558, y: 518) > Vector(x: 298, y: 518))
Repeat: Image ("/tests/assets/image.jpg") [338, 288] Size (75, 75) Path (Vector(x: 298, y: 278) > Vector(x: 558, y: 278) > Vector(x: 558, y: 518) > Vector(x: 298, y: 518))
Clip: Path (Vector(x: 18, y: 538) > Vector(x: 278, y: 538) > Vector(x: 278, y: 778) > Vector(x: 18, y: 778))
Repeat: Image ("/tests/assets/image.jpg") [58, 548] Size (75, 75) Path (Vector(x: 58, y: 548) > Vector(x: 133, y: 548) > Vector(x: 133, y: 623) > Vector(x: 58, y: 623))
Clip: Path (Vector(x: 338, y: 548) > Vector(x: 538, y: 548) > Vector(x: 538, y: 748) > Vector(x: 338, y: 748))
Repeat: Image ("/tests/assets/image.jpg") [338, 548] Size (75, 75) Path (Vector(x: 338, y: 538) > Vector(x: 413, y: 538) > Vector(x: 413, y: 778) > Vector(x: 338, y: 778))
Clip: Path (Vector(x: 58, y: 808) > Vector(x: 258, y: 808) > Vector(x: 258, y: 1008) > Vector(x: 58, y: 1008))
Repeat: Image ("/tests/assets/image.jpg") [58, 808] Size (75, 75) Path (Vector(x: 18, y: 808) > Vector(x: 278, y: 808) > Vector(x: 278, y: 883) > Vector(x: 18, y: 883))
Clip: Path (Vector(x: 298, y: 798) > Vector(x: 558, y: 798) > Vector(x: 558, y: 1038) > Vector(x: 298, y: 1038))
Repeat: Image ("/tests/assets/image.jpg") [338, 808] Size (75, 75) Path (Vector(x: 338, y: 808) > Vector(x: 413, y: 808) > Vector(x: 413, y: 883) > Vector(x: 338, y: 883))
Clip: Path (Vector(x: 18, y: 1058) > Vector(x: 278, y: 1058) > Vector(x: 278, y: 1298) > Vector(x: 18, y: 1298))
Fill: rgb(0,128,0)
Clip: Path (Vector(x: 338, y: 1068) > Vector(x: 538, y: 1068) > Vector(x: 538, y: 1268) > Vector(x: 338, y: 1268))
Fill: rgb(0,128,0)
Clip: Path (Vector(x: 58, y: 1328) > Vector(x: 258, y: 1328) > Vector(x: 258, y: 1528) > Vector(x: 58, y: 1528))
Fill: rgb(0,128,0)
Clip: Path (Vector(x: 298, y: 1318) > Vector(x: 558, y: 1318) > Vector(x: 558, y: 1558) > Vector(x: 298, y: 1558))
Fill: rgb(0,128,0)

52
tests/reftests/background/encoded.html Normal file
View File

@@ -0,0 +1,52 @@
<!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:1px solid #000;
}
.small, .medium{
clear:both;
}
div{
display:block;
}
.encoded {
background:url("data:image/jpeg;base64,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");
}
</style>
</head>
<body>
<div class="medium">
<div class="encoded"></div>
</div>
</body>
</html>

11
tests/reftests/background/encoded.txt Normal file
View File

@@ -0,0 +1,11 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgb(255,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 8) > Vector(x: 8, y: 8))
Fill: rgb(0,255,0)
Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Repeat: Image ("/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4") [19, 19] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))

193
tests/reftests/background/linear-gradient.html Normal file
View File

@@ -0,0 +1,193 @@
<!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;
}
.small div{
width:100px;
height:100px;
float:left;
margin:10px;
border:1px solid #000;
}
.horizontal {
width: auto !important;
height: auto !important;
}
.medium div{
width:210px;
height:200px;
float:left;
margin:10px;
border:1px solid #000;
}
.medium .horizontal div{
width:200px;
height:100px;
}
.small, .medium{
clear:both;
}
div{
display:block;
}
.linearGradient {
/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 0, 0)), to(rgb(0, 0, 255)));*/
background: -webkit-linear-gradient(top left, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
background: -moz-linear-gradient(top right, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
}
.linearGradient2 {
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
}
.linearGradient3 {
/* FF 3.6+ */
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* IE 10+ */
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* W3C */
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
}
.linearGradient4 {
/* FF 3.6+ */
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* Chrome, Safari 4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* IE10+ */
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* W3C */
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
}
.linearGradient5 {
/* FF 3.6+ */
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
/* Chrome, Safari 4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
/* IE 10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
/* W3C */
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
}
.linearGradient6 {
/* FF 3.6+ */
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
/* IE10+ */
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
/* W3C */
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6, #26558b 100%);
}
.linearGradient7 {
background: #cce5f4;
background: -moz-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cce5f4), color-stop(100%, #00263c));
background: -webkit-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: -o-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: -ms-linear-gradient(top, #cce5f4 0%, #00263c 100%);
background: linear-gradient(to bottom, #cce5f4 0%, #00263c 100%);
}
.linearGradient8 {
background: linear-gradient(to bottom left, #fff 0%, #00263c 100%);
}
.linearGradient9 {
background: linear-gradient(to bottom left, #0000Ff, rgb(255, 0,0) 50px, green 199px, rgba(0, 0, 0, 0.5) 100.0%);
}
.linearGradient10 {
background: linear-gradient(to left top, #0000Ff, rgb(255, 0,0) 50px, green 199px, rgba(0, 0, 0, 0.5) 100.0%);
}
.linearGradient11 {
background: linear-gradient(to bottom right, #0000Ff, rgb(255, 0,0) 50px, green 199px, rgba(0, 0, 0, 0.5) 100.0%);
}
.linearGradient12 {
background: linear-gradient(to top right, #0000Ff, rgb(255, 0,0) 50px, green 199px, rgba(0, 0, 0, 0.5) 100.0%);
}
.linearGradient13 {
background: linear-gradient(to top left, white 0%, black 100%);
}
.linearGradient14 {
background: linear-gradient(-375.5grad, yellow, blue, red 60%, blue);
}
.linearGradient15 {
background: linear-gradient(-375.5turn, yellow, red 60%, blue);
}
.linearGradient16 {
background: linear-gradient(-375.5rad, yellow, orange, red 60%, blue);
}
.linearGradient17 {
background: linear-gradient(-375.5deg, yellow, red 60%, blue);
width: 800px !important;
}
</style>
</head>
<body>
<div class="medium">
<div class="linearGradient">&nbsp;</div>
<div class="linearGradient2">&nbsp;</div>
<div class="linearGradient3">&nbsp;</div>
<div class="linearGradient4">&nbsp;</div>
<div class="linearGradient5">&nbsp;</div>
<div class="linearGradient6">&nbsp;</div>
<div class="linearGradient7">&nbsp;</div>
<div class="linearGradient8">&nbsp;</div>
<div class="linearGradient9">&nbsp;</div>
<div class="linearGradient10">&nbsp;</div>
<div class="linearGradient11">&nbsp;</div>
<div class="linearGradient12">&nbsp;</div>
<div class="horizontal">
<div class="linearGradient9">&nbsp;</div>
<div class="linearGradient10">&nbsp;</div>
<div class="linearGradient11">&nbsp;</div>
<div class="linearGradient12">&nbsp;</div>
</div>
<div class="linearGradient13">&nbsp;</div>
<div class="linearGradient14">&nbsp;</div>
<div class="linearGradient15">&nbsp;</div>
<div class="linearGradient16">&nbsp;</div>
<div class="linearGradient17">&nbsp;</div>
</div>
</body>
</html>

132
tests/reftests/background/linear-gradient.txt Normal file
View File

@@ -0,0 +1,132 @@
Window: [820, 1828]
Rectangle: [0, 0, 820, 1828] rgb(255,0,0)
Opacity: 1
Clip: Path (Vector(x: 18, y: 18) > Vector(x: 230, y: 18) > Vector(x: 230, y: 220) > Vector(x: 18, y: 220))
Gradient: [18, 18, 212, 202] linear-gradient(x0: 207, x1: 5, y0: 207, y1: -5 rgb(255,0,0) 0, rgb(0,0,255) 0.33, rgb(186,218,85) 0.67, rgba(0,0,255,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 230, y: 18) > Vector(x: 229, y: 19) > Vector(x: 19, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 18) > Vector(x: 230, y: 220) > Vector(x: 229, y: 219) > Vector(x: 229, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 229, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
Clip: Path (Vector(x: 250, y: 18) > Vector(x: 462, y: 18) > Vector(x: 462, y: 220) > Vector(x: 250, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 18) > Vector(x: 462, y: 18) > Vector(x: 461, y: 19) > Vector(x: 251, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 462, y: 220) > Vector(x: 461, y: 219) > Vector(x: 461, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 250, y: 220) > Vector(x: 251, y: 219) > Vector(x: 461, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 220) > Vector(x: 250, y: 18) > Vector(x: 251, y: 19) > Vector(x: 251, y: 219))
Clip: Path (Vector(x: 482, y: 18) > Vector(x: 694, y: 18) > Vector(x: 694, y: 220) > Vector(x: 482, y: 220))
Gradient: [482, 18, 212, 202] linear-gradient(x0: 212, x1: 0, y0: 101, y1: 101 rgb(255,0,0) 0, rgb(255,255,0) 0.5, rgb(0,255,0) 1)
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 18) > Vector(x: 694, y: 18) > Vector(x: 693, y: 19) > Vector(x: 483, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 18) > Vector(x: 694, y: 220) > Vector(x: 693, y: 219) > Vector(x: 693, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 220) > Vector(x: 482, y: 220) > Vector(x: 483, y: 219) > Vector(x: 693, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 220) > Vector(x: 482, y: 18) > Vector(x: 483, y: 19) > Vector(x: 483, y: 219))
Clip: Path (Vector(x: 18, y: 240) > Vector(x: 230, y: 240) > Vector(x: 230, y: 442) > Vector(x: 18, y: 442))
Gradient: [18, 240, 212, 202] linear-gradient(x0: 212, x1: 0, y0: 101, y1: 101 rgb(206,219,233) 0, rgb(170,197,222) 0.17, rgb(97,153,199) 0.5, rgb(58,132,195) 0.51, rgb(65,154,214) 0.59, rgb(75,184,240) 0.71, rgb(58,139,194) 0.84, rgb(38,85,139) 1)
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 230, y: 240) > Vector(x: 229, y: 241) > Vector(x: 19, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 240) > Vector(x: 230, y: 442) > Vector(x: 229, y: 441) > Vector(x: 229, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 229, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
Clip: Path (Vector(x: 250, y: 240) > Vector(x: 462, y: 240) > Vector(x: 462, y: 442) > Vector(x: 250, y: 442))
Gradient: [250, 240, 212, 202] linear-gradient(x0: 106, x1: 106, y0: 202, y1: 0 rgb(240,183,161) 0, rgb(140,51,16) 0.5, rgb(117,34,1) 0.51, rgb(191,110,78) 1)
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 240) > Vector(x: 462, y: 240) > Vector(x: 461, y: 241) > Vector(x: 251, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 240) > Vector(x: 462, y: 442) > Vector(x: 461, y: 441) > Vector(x: 461, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 442) > Vector(x: 250, y: 442) > Vector(x: 251, y: 441) > Vector(x: 461, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 442) > Vector(x: 250, y: 240) > Vector(x: 251, y: 241) > Vector(x: 251, y: 441))
Clip: Path (Vector(x: 482, y: 240) > Vector(x: 694, y: 240) > Vector(x: 694, y: 442) > Vector(x: 482, y: 442))
Gradient: [482, 240, 212, 202] linear-gradient(x0: 212, x1: 0, y0: 101, y1: 101 rgb(206,219,233) 0, rgb(170,197,222) 0.17, rgb(97,153,199) 0.5, rgb(58,132,195) 0.51, rgb(65,154,214) 0.76, rgb(38,85,139) 1)
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 240) > Vector(x: 694, y: 240) > Vector(x: 693, y: 241) > Vector(x: 483, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 240) > Vector(x: 694, y: 442) > Vector(x: 693, y: 441) > Vector(x: 693, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 442) > Vector(x: 482, y: 442) > Vector(x: 483, y: 441) > Vector(x: 693, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 442) > Vector(x: 482, y: 240) > Vector(x: 483, y: 241) > Vector(x: 483, y: 441))
Clip: Path (Vector(x: 18, y: 462) > Vector(x: 230, y: 462) > Vector(x: 230, y: 664) > Vector(x: 18, y: 664))
Gradient: [18, 462, 212, 202] linear-gradient(x0: 106, x1: 106, y0: 202, y1: 0 rgb(204,229,244) 0, rgb(0,38,60) 1)
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 230, y: 462) > Vector(x: 229, y: 463) > Vector(x: 19, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 462) > Vector(x: 230, y: 664) > Vector(x: 229, y: 663) > Vector(x: 229, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 664) > Vector(x: 18, y: 664) > Vector(x: 19, y: 663) > Vector(x: 229, y: 663))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 664) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 663))
Clip: Path (Vector(x: 250, y: 462) > Vector(x: 462, y: 462) > Vector(x: 462, y: 664) > Vector(x: 250, y: 664))
Gradient: [250, 462, 212, 202] linear-gradient(x0: 5, x1: 207, y0: 207, y1: -5 rgb(255,255,255) 0, rgb(0,38,60) 1)
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 462) > Vector(x: 462, y: 462) > Vector(x: 461, y: 463) > Vector(x: 251, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 462) > Vector(x: 462, y: 664) > Vector(x: 461, y: 663) > Vector(x: 461, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 664) > Vector(x: 250, y: 664) > Vector(x: 251, y: 663) > Vector(x: 461, y: 663))
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 664) > Vector(x: 250, y: 462) > Vector(x: 251, y: 463) > Vector(x: 251, y: 663))
Clip: Path (Vector(x: 482, y: 462) > Vector(x: 694, y: 462) > Vector(x: 694, y: 664) > Vector(x: 482, y: 664))
Gradient: [482, 462, 212, 202] linear-gradient(x0: 5, x1: 207, y0: 207, y1: -5 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.66, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 462) > Vector(x: 694, y: 462) > Vector(x: 693, y: 463) > Vector(x: 483, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 462) > Vector(x: 694, y: 664) > Vector(x: 693, y: 663) > Vector(x: 693, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 664) > Vector(x: 482, y: 664) > Vector(x: 483, y: 663) > Vector(x: 693, y: 663))
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 664) > Vector(x: 482, y: 462) > Vector(x: 483, y: 463) > Vector(x: 483, y: 663))
Clip: Path (Vector(x: 18, y: 684) > Vector(x: 230, y: 684) > Vector(x: 230, y: 886) > Vector(x: 18, y: 886))
Gradient: [18, 684, 212, 202] linear-gradient(x0: 5, x1: 207, y0: -5, y1: 207 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.66, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 684) > Vector(x: 230, y: 684) > Vector(x: 229, y: 685) > Vector(x: 19, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 684) > Vector(x: 230, y: 886) > Vector(x: 229, y: 885) > Vector(x: 229, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 886) > Vector(x: 18, y: 886) > Vector(x: 19, y: 885) > Vector(x: 229, y: 885))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 886) > Vector(x: 18, y: 684) > Vector(x: 19, y: 685) > Vector(x: 19, y: 885))
Clip: Path (Vector(x: 250, y: 684) > Vector(x: 462, y: 684) > Vector(x: 462, y: 886) > Vector(x: 250, y: 886))
Gradient: [250, 684, 212, 202] linear-gradient(x0: 207, x1: 5, y0: 207, y1: -5 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.66, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 684) > Vector(x: 462, y: 684) > Vector(x: 461, y: 685) > Vector(x: 251, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 684) > Vector(x: 462, y: 886) > Vector(x: 461, y: 885) > Vector(x: 461, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 886) > Vector(x: 250, y: 886) > Vector(x: 251, y: 885) > Vector(x: 461, y: 885))
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 886) > Vector(x: 250, y: 684) > Vector(x: 251, y: 685) > Vector(x: 251, y: 885))
Clip: Path (Vector(x: 482, y: 684) > Vector(x: 694, y: 684) > Vector(x: 694, y: 886) > Vector(x: 482, y: 886))
Gradient: [482, 684, 212, 202] linear-gradient(x0: 207, x1: 5, y0: -5, y1: 207 rgb(0,0,255) 0, rgb(255,0,0) 0.17, rgb(0,128,0) 0.66, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 684) > Vector(x: 694, y: 684) > Vector(x: 693, y: 685) > Vector(x: 483, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 684) > Vector(x: 694, y: 886) > Vector(x: 693, y: 885) > Vector(x: 693, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 886) > Vector(x: 482, y: 886) > Vector(x: 483, y: 885) > Vector(x: 693, y: 885))
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 886) > Vector(x: 482, y: 684) > Vector(x: 483, y: 685) > Vector(x: 483, y: 885))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 906) > Vector(x: 782, y: 906) > Vector(x: 781, y: 907) > Vector(x: 19, y: 907))
Shape: rgb(0,0,0) Path (Vector(x: 782, y: 906) > Vector(x: 782, y: 1152) > Vector(x: 781, y: 1151) > Vector(x: 781, y: 907))
Shape: rgb(0,0,0) Path (Vector(x: 782, y: 1152) > Vector(x: 18, y: 1152) > Vector(x: 19, y: 1151) > Vector(x: 781, y: 1151))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1152) > Vector(x: 18, y: 906) > Vector(x: 19, y: 907) > Vector(x: 19, y: 1151))
Clip: Path (Vector(x: 29, y: 917) > Vector(x: 231, y: 917) > Vector(x: 231, y: 1019) > Vector(x: 29, y: 1019))
Gradient: [29, 917, 202, 102] linear-gradient(x0: 60, x1: 142, y0: 132, y1: -30 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 29, y: 917) > Vector(x: 231, y: 917) > Vector(x: 230, y: 918) > Vector(x: 30, y: 918))
Shape: rgb(0,0,0) Path (Vector(x: 231, y: 917) > Vector(x: 231, y: 1019) > Vector(x: 230, y: 1018) > Vector(x: 230, y: 918))
Shape: rgb(0,0,0) Path (Vector(x: 231, y: 1019) > Vector(x: 29, y: 1019) > Vector(x: 30, y: 1018) > Vector(x: 230, y: 1018))
Shape: rgb(0,0,0) Path (Vector(x: 29, y: 1019) > Vector(x: 29, y: 917) > Vector(x: 30, y: 918) > Vector(x: 30, y: 1018))
Clip: Path (Vector(x: 251, y: 917) > Vector(x: 453, y: 917) > Vector(x: 453, y: 1019) > Vector(x: 251, y: 1019))
Gradient: [251, 917, 202, 102] linear-gradient(x0: 60, x1: 142, y0: -30, y1: 132 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 251, y: 917) > Vector(x: 453, y: 917) > Vector(x: 452, y: 918) > Vector(x: 252, y: 918))
Shape: rgb(0,0,0) Path (Vector(x: 453, y: 917) > Vector(x: 453, y: 1019) > Vector(x: 452, y: 1018) > Vector(x: 452, y: 918))
Shape: rgb(0,0,0) Path (Vector(x: 453, y: 1019) > Vector(x: 251, y: 1019) > Vector(x: 252, y: 1018) > Vector(x: 452, y: 1018))
Shape: rgb(0,0,0) Path (Vector(x: 251, y: 1019) > Vector(x: 251, y: 917) > Vector(x: 252, y: 918) > Vector(x: 252, y: 1018))
Clip: Path (Vector(x: 473, y: 917) > Vector(x: 675, y: 917) > Vector(x: 675, y: 1019) > Vector(x: 473, y: 1019))
Gradient: [473, 917, 202, 102] linear-gradient(x0: 142, x1: 60, y0: 132, y1: -30 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 473, y: 917) > Vector(x: 675, y: 917) > Vector(x: 674, y: 918) > Vector(x: 474, y: 918))
Shape: rgb(0,0,0) Path (Vector(x: 675, y: 917) > Vector(x: 675, y: 1019) > Vector(x: 674, y: 1018) > Vector(x: 674, y: 918))
Shape: rgb(0,0,0) Path (Vector(x: 675, y: 1019) > Vector(x: 473, y: 1019) > Vector(x: 474, y: 1018) > Vector(x: 674, y: 1018))
Shape: rgb(0,0,0) Path (Vector(x: 473, y: 1019) > Vector(x: 473, y: 917) > Vector(x: 474, y: 918) > Vector(x: 474, y: 1018))
Clip: Path (Vector(x: 29, y: 1039) > Vector(x: 231, y: 1039) > Vector(x: 231, y: 1141) > Vector(x: 29, y: 1141))
Gradient: [29, 1039, 202, 102] linear-gradient(x0: 142, x1: 60, y0: -30, y1: 132 rgb(0,0,255) 0, rgb(255,0,0) 0.25, rgb(0,128,0) 0.98, rgba(0,0,0,0.5) 1)
Shape: rgb(0,0,0) Path (Vector(x: 29, y: 1039) > Vector(x: 231, y: 1039) > Vector(x: 230, y: 1040) > Vector(x: 30, y: 1040))
Shape: rgb(0,0,0) Path (Vector(x: 231, y: 1039) > Vector(x: 231, y: 1141) > Vector(x: 230, y: 1140) > Vector(x: 230, y: 1040))
Shape: rgb(0,0,0) Path (Vector(x: 231, y: 1141) > Vector(x: 29, y: 1141) > Vector(x: 30, y: 1140) > Vector(x: 230, y: 1140))
Shape: rgb(0,0,0) Path (Vector(x: 29, y: 1141) > Vector(x: 29, y: 1039) > Vector(x: 30, y: 1040) > Vector(x: 30, y: 1140))
Clip: Path (Vector(x: 18, y: 1172) > Vector(x: 230, y: 1172) > Vector(x: 230, y: 1374) > Vector(x: 18, y: 1374))
Gradient: [18, 1172, 212, 202] linear-gradient(x0: 5, x1: 207, y0: -5, y1: 207 rgb(255,255,255) 0, rgb(0,0,0) 1)
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1172) > Vector(x: 230, y: 1172) > Vector(x: 229, y: 1173) > Vector(x: 19, y: 1173))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1172) > Vector(x: 230, y: 1374) > Vector(x: 229, y: 1373) > Vector(x: 229, y: 1173))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1374) > Vector(x: 18, y: 1374) > Vector(x: 19, y: 1373) > Vector(x: 229, y: 1373))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1374) > Vector(x: 18, y: 1172) > Vector(x: 19, y: 1173) > Vector(x: 19, y: 1373))
Clip: Path (Vector(x: 250, y: 1172) > Vector(x: 462, y: 1172) > Vector(x: 462, y: 1374) > Vector(x: 250, y: 1374))
Gradient: [250, 1172, 212, 202] linear-gradient(x0: 156, x1: 56, y0: -23, y1: 225 rgb(255,255,0) 0, rgb(0,0,255) 0.3, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 1172) > Vector(x: 462, y: 1172) > Vector(x: 461, y: 1173) > Vector(x: 251, y: 1173))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 1172) > Vector(x: 462, y: 1374) > Vector(x: 461, y: 1373) > Vector(x: 461, y: 1173))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 1374) > Vector(x: 250, y: 1374) > Vector(x: 251, y: 1373) > Vector(x: 461, y: 1373))
Shape: rgb(0,0,0) Path (Vector(x: 250, y: 1374) > Vector(x: 250, y: 1172) > Vector(x: 251, y: 1173) > Vector(x: 251, y: 1373))
Clip: Path (Vector(x: 482, y: 1172) > Vector(x: 694, y: 1172) > Vector(x: 694, y: 1374) > Vector(x: 482, y: 1374))
Gradient: [482, 1172, 212, 202] linear-gradient(x0: 106, x1: 106, y0: 202, y1: 0 rgb(255,255,0) 0, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 1172) > Vector(x: 694, y: 1172) > Vector(x: 693, y: 1173) > Vector(x: 483, y: 1173))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 1172) > Vector(x: 694, y: 1374) > Vector(x: 693, y: 1373) > Vector(x: 693, y: 1173))
Shape: rgb(0,0,0) Path (Vector(x: 694, y: 1374) > Vector(x: 482, y: 1374) > Vector(x: 483, y: 1373) > Vector(x: 693, y: 1373))
Shape: rgb(0,0,0) Path (Vector(x: 482, y: 1374) > Vector(x: 482, y: 1172) > Vector(x: 483, y: 1173) > Vector(x: 483, y: 1373))
Clip: Path (Vector(x: 18, y: 1394) > Vector(x: 230, y: 1394) > Vector(x: 230, y: 1596) > Vector(x: 18, y: 1596))
Gradient: [18, 1394, 212, 202] linear-gradient(x0: 219, x1: -7, y0: 92, y1: 110 rgb(255,255,0) 0, rgb(255,165,0) 0.3, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1394) > Vector(x: 230, y: 1394) > Vector(x: 229, y: 1395) > Vector(x: 19, y: 1395))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1394) > Vector(x: 230, y: 1596) > Vector(x: 229, y: 1595) > Vector(x: 229, y: 1395))
Shape: rgb(0,0,0) Path (Vector(x: 230, y: 1596) > Vector(x: 18, y: 1596) > Vector(x: 19, y: 1595) > Vector(x: 229, y: 1595))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1596) > Vector(x: 18, y: 1394) > Vector(x: 19, y: 1395) > Vector(x: 19, y: 1595))
Clip: Path (Vector(x: 18, y: 1616) > Vector(x: 820, y: 1616) > Vector(x: 820, y: 1818) > Vector(x: 18, y: 1818))
Gradient: [18, 1616, 802, 202] linear-gradient(x0: 346, x1: 456, y0: -96, y1: 298 rgb(255,255,0) 0, rgb(255,0,0) 0.6, rgb(0,0,255) 1)
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1616) > Vector(x: 820, y: 1616) > Vector(x: 819, y: 1617) > Vector(x: 19, y: 1617))
Shape: rgb(0,0,0) Path (Vector(x: 820, y: 1616) > Vector(x: 820, y: 1818) > Vector(x: 819, y: 1817) > Vector(x: 819, y: 1617))
Shape: rgb(0,0,0) Path (Vector(x: 820, y: 1818) > Vector(x: 18, y: 1818) > Vector(x: 19, y: 1817) > Vector(x: 819, y: 1817))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1818) > Vector(x: 18, y: 1616) > Vector(x: 19, y: 1617) > Vector(x: 19, y: 1817))

50
tests/reftests/background/multi.html Normal file
View File

@@ -0,0 +1,50 @@
<!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:1px solid #000;
}
.small, .medium{
clear:both;
}
div{
display:block;
}
</style>
</head>
<body>
<div class="medium">
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 130px;"></div>
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 20px -20px;"></div>
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 450px 100px;"></div>
</div>
</body>
</html>

26
tests/reftests/background/multi.txt Normal file
View File

@@ -0,0 +1,26 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgb(255,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 8) > Vector(x: 8, y: 8))
Fill: rgb(0,255,0)
Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Repeat: Image ("/tests/assets/image2.jpg") [119, 149] Size (75, 75) Path (Vector(x: 18, y: 148) > Vector(x: 220, y: 148) > Vector(x: 220, y: 223) > Vector(x: 18, y: 223))
Repeat: Image ("/tests/assets/image.jpg") [69, 69] Size (75, 75) Path (Vector(x: 18, y: 68) > Vector(x: 220, y: 68) > Vector(x: 220, y: 143) > Vector(x: 18, y: 143))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
Repeat: Image ("/tests/assets/image2.jpg") [261, -1] Size (75, 75) Path (Vector(x: 240, y: -2) > Vector(x: 442, y: -2) > Vector(x: 442, y: 73) > Vector(x: 240, y: 73))
Repeat: Image ("/tests/assets/image.jpg") [291, 69] Size (75, 75) Path (Vector(x: 240, y: 68) > Vector(x: 442, y: 68) > Vector(x: 442, y: 143) > Vector(x: 240, y: 143))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
Repeat: Image ("/tests/assets/image2.jpg") [913, 119] Size (75, 75) Path (Vector(x: 462, y: 118) > Vector(x: 664, y: 118) > Vector(x: 664, y: 193) > Vector(x: 462, y: 193))
Repeat: Image ("/tests/assets/image.jpg") [513, 69] Size (75, 75) Path (Vector(x: 462, y: 68) > Vector(x: 664, y: 68) > Vector(x: 664, y: 143) > Vector(x: 462, y: 143))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))

66
tests/reftests/background/position.html Normal file
View File

@@ -0,0 +1,66 @@
<!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:1px solid #000;
}
.small, .medium{
clear:both;
}
div{
display:block;
}
</style>
</head>
<body>
<div class="medium">
<div style='background:url("../../assets/image.jpg") center center;'></div>
<div style="background:url('../../assets/image.jpg') repeat-x center center;"></div>
<div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
<div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
</div>
<div class="small">
<div style="background:url(../../assets/image.jpg) center center;"></div>
<div style="background:url(../../assets/image.jpg) repeat-x center center;"></div>
<div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
<div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
</div>
<div class="medium">
<div style="background:url(../../assets/image.jpg) -15% 25px;"></div>
<div style="background:url(../../assets/image.jpg) repeat-x 50px 50px;"></div>
<div style="background:url(../../assets/image.jpg) repeat-y 50px 50px;"></div>
<div style="background:url(../../assets/image.jpg) no-repeat 50px 50px;"></div>
</div>
</body>
</html>

77
tests/reftests/background/position.txt Normal file
View File

@@ -0,0 +1,77 @@
Window: [800, 1018]
Rectangle: [0, 0, 800, 1018] rgb(255,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 574) > Vector(x: 8, y: 574))
Fill: rgb(0,255,0)
Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Repeat: Image ("/tests/assets/image.jpg") [82, 82] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
Repeat: Image ("/tests/assets/image.jpg") [304, 82] Size (75, 75) Path (Vector(x: 240, y: 82) > Vector(x: 442, y: 82) > Vector(x: 442, y: 157) > Vector(x: 240, y: 157))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
Repeat: Image ("/tests/assets/image.jpg") [526, 82] Size (75, 75) Path (Vector(x: 526, y: 18) > Vector(x: 601, y: 18) > Vector(x: 601, y: 220) > Vector(x: 526, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))
Clip: Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 18, y: 442))
Repeat: Image ("/tests/assets/image.jpg") [82, 304] Size (75, 75) Path (Vector(x: 82, y: 304) > Vector(x: 157, y: 304) > Vector(x: 157, y: 379) > Vector(x: 82, y: 379))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 219, y: 241) > Vector(x: 19, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 219, y: 441) > Vector(x: 219, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 219, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
Clip: Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [32, 476] Size (75, 75) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 119, y: 463) > Vector(x: 19, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 119, y: 563) > Vector(x: 119, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 120, y: 564) > Vector(x: 18, y: 564) > Vector(x: 19, y: 563) > Vector(x: 119, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 564) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 563))
Clip: Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 140, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [154, 476] Size (75, 75) Path (Vector(x: 140, y: 476) > Vector(x: 242, y: 476) > Vector(x: 242, y: 551) > Vector(x: 140, y: 551))
Shape: rgb(0,0,0) Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 241, y: 463) > Vector(x: 141, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 241, y: 563) > Vector(x: 241, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 242, y: 564) > Vector(x: 140, y: 564) > Vector(x: 141, y: 563) > Vector(x: 241, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 140, y: 564) > Vector(x: 140, y: 462) > Vector(x: 141, y: 463) > Vector(x: 141, y: 563))
Clip: Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 262, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [276, 476] Size (75, 75) Path (Vector(x: 276, y: 462) > Vector(x: 351, y: 462) > Vector(x: 351, y: 564) > Vector(x: 276, y: 564))
Shape: rgb(0,0,0) Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 363, y: 463) > Vector(x: 263, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 363, y: 563) > Vector(x: 363, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 364, y: 564) > Vector(x: 262, y: 564) > Vector(x: 263, y: 563) > Vector(x: 363, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 262, y: 564) > Vector(x: 262, y: 462) > Vector(x: 263, y: 463) > Vector(x: 263, y: 563))
Clip: Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 384, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [398, 476] Size (75, 75) Path (Vector(x: 398, y: 476) > Vector(x: 473, y: 476) > Vector(x: 473, y: 551) > Vector(x: 398, y: 551))
Shape: rgb(0,0,0) Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 485, y: 463) > Vector(x: 385, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 485, y: 563) > Vector(x: 485, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 486, y: 564) > Vector(x: 384, y: 564) > Vector(x: 385, y: 563) > Vector(x: 485, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 384, y: 564) > Vector(x: 384, y: 462) > Vector(x: 385, y: 463) > Vector(x: 385, y: 563))
Clip: Path (Vector(x: 18, y: 584) > Vector(x: 220, y: 584) > Vector(x: 220, y: 786) > Vector(x: 18, y: 786))
Repeat: Image ("/tests/assets/image.jpg") [0, 610] Size (75, 75) Path (Vector(x: 18, y: 584) > Vector(x: 220, y: 584) > Vector(x: 220, y: 786) > Vector(x: 18, y: 786))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 584) > Vector(x: 220, y: 584) > Vector(x: 219, y: 585) > Vector(x: 19, y: 585))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 584) > Vector(x: 220, y: 786) > Vector(x: 219, y: 785) > Vector(x: 219, y: 585))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 786) > Vector(x: 18, y: 786) > Vector(x: 19, y: 785) > Vector(x: 219, y: 785))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 786) > Vector(x: 18, y: 584) > Vector(x: 19, y: 585) > Vector(x: 19, y: 785))
Clip: Path (Vector(x: 240, y: 584) > Vector(x: 442, y: 584) > Vector(x: 442, y: 786) > Vector(x: 240, y: 786))
Repeat: Image ("/tests/assets/image.jpg") [291, 635] Size (75, 75) Path (Vector(x: 240, y: 635) > Vector(x: 442, y: 635) > Vector(x: 442, y: 710) > Vector(x: 240, y: 710))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 584) > Vector(x: 442, y: 584) > Vector(x: 441, y: 585) > Vector(x: 241, y: 585))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 584) > Vector(x: 442, y: 786) > Vector(x: 441, y: 785) > Vector(x: 441, y: 585))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 786) > Vector(x: 240, y: 786) > Vector(x: 241, y: 785) > Vector(x: 441, y: 785))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 786) > Vector(x: 240, y: 584) > Vector(x: 241, y: 585) > Vector(x: 241, y: 785))
Clip: Path (Vector(x: 462, y: 584) > Vector(x: 664, y: 584) > Vector(x: 664, y: 786) > Vector(x: 462, y: 786))
Repeat: Image ("/tests/assets/image.jpg") [513, 635] Size (75, 75) Path (Vector(x: 513, y: 584) > Vector(x: 588, y: 584) > Vector(x: 588, y: 786) > Vector(x: 513, y: 786))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 584) > Vector(x: 664, y: 584) > Vector(x: 663, y: 585) > Vector(x: 463, y: 585))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 584) > Vector(x: 664, y: 786) > Vector(x: 663, y: 785) > Vector(x: 663, y: 585))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 786) > Vector(x: 462, y: 786) > Vector(x: 463, y: 785) > Vector(x: 663, y: 785))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 786) > Vector(x: 462, y: 584) > Vector(x: 463, y: 585) > Vector(x: 463, y: 785))
Clip: Path (Vector(x: 18, y: 806) > Vector(x: 220, y: 806) > Vector(x: 220, y: 1008) > Vector(x: 18, y: 1008))
Repeat: Image ("/tests/assets/image.jpg") [69, 857] Size (75, 75) Path (Vector(x: 69, y: 857) > Vector(x: 144, y: 857) > Vector(x: 144, y: 932) > Vector(x: 69, y: 932))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 806) > Vector(x: 220, y: 806) > Vector(x: 219, y: 807) > Vector(x: 19, y: 807))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 806) > Vector(x: 220, y: 1008) > Vector(x: 219, y: 1007) > Vector(x: 219, y: 807))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 1008) > Vector(x: 18, y: 1008) > Vector(x: 19, y: 1007) > Vector(x: 219, y: 1007))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 1008) > Vector(x: 18, y: 806) > Vector(x: 19, y: 807) > Vector(x: 19, y: 1007))

161
tests/reftests/background/radial-gradient.html Normal file
View File

@@ -0,0 +1,161 @@
<!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:1px solid #000;
}
.small, .medium{
clear:both;
}
div{
display:block;
}
.radialGradient {
/* FF 3.6+ */
background: -moz-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%, #2f7bd8 50%, #0a0a0a 64%, #4e4e4e 80%, #383838 87%, #1b1b1b 100%);
/* Chrome, Safari 4+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#959595), color-stop(48%,#0d0d0d), color-stop(50%,#2f7bd8), color-stop(64%,#0a0a0a), color-stop(80%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
/* Opera 12+ */
background: -o-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
/* IE 10+ */
background: -ms-radial-gradient(center, ellipse cover, #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
/* W3C */
background: radial-gradient(center, ellipse cover, #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
}
.radialGradient2 {
/* thx to https://twitter.com/#!/markjmclaren/status/13067366701 */
background-color: #FFF;
background-image:
-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
background-image:
-moz-radial-gradient(42px 42px, circle farthest-corner, #A7D30C 0%, #A7D30C 3%, rgba(1,159,98,0) 11%),
-moz-radial-gradient(45px 45px, circle farthest-corner, #019F62 0%, #019F62 13%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 100%),
-moz-radial-gradient(102px 102px, circle farthest-corner, #ff5f98 0%, #ff5f98 15%, rgba(255,1,136,0) 27%),
-moz-radial-gradient(105px 105px, circle farthest-corner, #FF0188 0%, #FF0188 28%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%),
-moz-radial-gradient(92px 12px, circle farthest-corner, #00c9ff 0%, #00c9ff 10%, rgba(0,181,226,0) 26%),
-moz-radial-gradient(95px 15px, circle farthest-corner, #00b5e2 0%, #00b5e2 28%, rgba(255,255,255,0) 31%, rgba(255,255,255,0) 100%),
-moz-radial-gradient(0px 150px, circle farthest-corner, #f4f201 0%, #f4f201 25%, rgba(228,199,0,0) 45%),
-moz-radial-gradient(0px 150px, circle farthest-corner, #e4c700 0%, #e4c700 47%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
}
.radialGradient3 {
background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient4 {
background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient5 {
background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
}
.radialGradient6 {
background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient7 {
background: -moz-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient8 {
background: -moz-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient9 {
background: -moz-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient10 {
background: -moz-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient11 {
background: -moz-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
}
</style>
</head>
<body>
<div class="medium">
<div class="radialGradient">&nbsp;</div>
<div class="radialGradient2">&nbsp;</div>
<div class="radialGradient3">&nbsp;</div>
<div class="radialGradient4">&nbsp;</div>
<div class="radialGradient5">&nbsp;</div>
<div class="radialGradient6">&nbsp;</div>
<div class="radialGradient7">&nbsp;</div>
<div class="radialGradient8">&nbsp;</div>
<div class="radialGradient9">&nbsp;</div>
<div class="radialGradient10">&nbsp;</div>
<div class="radialGradient11">&nbsp;</div>
</div>
</body>
</html>

61
tests/reftests/background/radial-gradient.txt Normal file
View File

@@ -0,0 +1,61 @@
Window: [800, 896]
Rectangle: [0, 0, 800, 896] rgb(255,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 8) > Vector(x: 8, y: 8))
Fill: rgb(0,255,0)
Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
Fill: rgb(255,255,255)
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))
Clip: Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 18, y: 442))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 219, y: 241) > Vector(x: 19, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 219, y: 441) > Vector(x: 219, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 219, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
Clip: Path (Vector(x: 240, y: 240) > Vector(x: 442, y: 240) > Vector(x: 442, y: 442) > Vector(x: 240, y: 442))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 240) > Vector(x: 442, y: 240) > Vector(x: 441, y: 241) > Vector(x: 241, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 240) > Vector(x: 442, y: 442) > Vector(x: 441, y: 441) > Vector(x: 441, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 442) > Vector(x: 240, y: 442) > Vector(x: 241, y: 441) > Vector(x: 441, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 442) > Vector(x: 240, y: 240) > Vector(x: 241, y: 241) > Vector(x: 241, y: 441))
Clip: Path (Vector(x: 462, y: 240) > Vector(x: 664, y: 240) > Vector(x: 664, y: 442) > Vector(x: 462, y: 442))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 240) > Vector(x: 664, y: 240) > Vector(x: 663, y: 241) > Vector(x: 463, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 240) > Vector(x: 664, y: 442) > Vector(x: 663, y: 441) > Vector(x: 663, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 442) > Vector(x: 462, y: 442) > Vector(x: 463, y: 441) > Vector(x: 663, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 442) > Vector(x: 462, y: 240) > Vector(x: 463, y: 241) > Vector(x: 463, y: 441))
Clip: Path (Vector(x: 18, y: 462) > Vector(x: 220, y: 462) > Vector(x: 220, y: 664) > Vector(x: 18, y: 664))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 220, y: 462) > Vector(x: 219, y: 463) > Vector(x: 19, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 462) > Vector(x: 220, y: 664) > Vector(x: 219, y: 663) > Vector(x: 219, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 664) > Vector(x: 18, y: 664) > Vector(x: 19, y: 663) > Vector(x: 219, y: 663))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 664) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 663))
Clip: Path (Vector(x: 240, y: 462) > Vector(x: 442, y: 462) > Vector(x: 442, y: 664) > Vector(x: 240, y: 664))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 462) > Vector(x: 442, y: 462) > Vector(x: 441, y: 463) > Vector(x: 241, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 462) > Vector(x: 442, y: 664) > Vector(x: 441, y: 663) > Vector(x: 441, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 664) > Vector(x: 240, y: 664) > Vector(x: 241, y: 663) > Vector(x: 441, y: 663))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 664) > Vector(x: 240, y: 462) > Vector(x: 241, y: 463) > Vector(x: 241, y: 663))
Clip: Path (Vector(x: 462, y: 462) > Vector(x: 664, y: 462) > Vector(x: 664, y: 664) > Vector(x: 462, y: 664))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 462) > Vector(x: 664, y: 462) > Vector(x: 663, y: 463) > Vector(x: 463, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 462) > Vector(x: 664, y: 664) > Vector(x: 663, y: 663) > Vector(x: 663, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 664) > Vector(x: 462, y: 664) > Vector(x: 463, y: 663) > Vector(x: 663, y: 663))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 664) > Vector(x: 462, y: 462) > Vector(x: 463, y: 463) > Vector(x: 463, y: 663))
Clip: Path (Vector(x: 18, y: 684) > Vector(x: 220, y: 684) > Vector(x: 220, y: 886) > Vector(x: 18, y: 886))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 684) > Vector(x: 220, y: 684) > Vector(x: 219, y: 685) > Vector(x: 19, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 684) > Vector(x: 220, y: 886) > Vector(x: 219, y: 885) > Vector(x: 219, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 886) > Vector(x: 18, y: 886) > Vector(x: 19, y: 885) > Vector(x: 219, y: 885))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 886) > Vector(x: 18, y: 684) > Vector(x: 19, y: 685) > Vector(x: 19, y: 885))
Clip: Path (Vector(x: 240, y: 684) > Vector(x: 442, y: 684) > Vector(x: 442, y: 886) > Vector(x: 240, y: 886))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 684) > Vector(x: 442, y: 684) > Vector(x: 441, y: 685) > Vector(x: 241, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 684) > Vector(x: 442, y: 886) > Vector(x: 441, y: 885) > Vector(x: 441, y: 685))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 886) > Vector(x: 240, y: 886) > Vector(x: 241, y: 885) > Vector(x: 441, y: 885))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 886) > Vector(x: 240, y: 684) > Vector(x: 241, y: 685) > Vector(x: 241, y: 885))

57
tests/reftests/background/repeat.html Normal file
View File

@@ -0,0 +1,57 @@
<!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:1px solid #000;
}
.small, .medium{
clear:both;
}
div{
display:block;
}
</style>
</head>
<body>
<div class="medium">
<div style="background:url(../../assets/image.jpg);"></div>
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
</div>
<div class="small">
<div style="background:url(../../assets/image.jpg);"></div>
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
</div>
</body>
</html>

53
tests/reftests/background/repeat.txt Normal file
View File

@@ -0,0 +1,53 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgb(255,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 452) > Vector(x: 8, y: 452))
Fill: rgb(0,255,0)
Clip: Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Repeat: Image ("/tests/assets/image.jpg") [19, 19] Size (75, 75) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 18, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 18) > Vector(x: 220, y: 18) > Vector(x: 219, y: 19) > Vector(x: 19, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 18) > Vector(x: 220, y: 220) > Vector(x: 219, y: 219) > Vector(x: 219, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 220) > Vector(x: 18, y: 220) > Vector(x: 19, y: 219) > Vector(x: 219, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 220) > Vector(x: 18, y: 18) > Vector(x: 19, y: 19) > Vector(x: 19, y: 219))
Clip: Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 240, y: 220))
Repeat: Image ("/tests/assets/image.jpg") [241, 19] Size (75, 75) Path (Vector(x: 240, y: 19) > Vector(x: 442, y: 19) > Vector(x: 442, y: 94) > Vector(x: 240, y: 94))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 18) > Vector(x: 442, y: 18) > Vector(x: 441, y: 19) > Vector(x: 241, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 18) > Vector(x: 442, y: 220) > Vector(x: 441, y: 219) > Vector(x: 441, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 442, y: 220) > Vector(x: 240, y: 220) > Vector(x: 241, y: 219) > Vector(x: 441, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 240, y: 220) > Vector(x: 240, y: 18) > Vector(x: 241, y: 19) > Vector(x: 241, y: 219))
Clip: Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 462, y: 220))
Repeat: Image ("/tests/assets/image.jpg") [463, 19] Size (75, 75) Path (Vector(x: 463, y: 18) > Vector(x: 538, y: 18) > Vector(x: 538, y: 220) > Vector(x: 463, y: 220))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 18) > Vector(x: 664, y: 18) > Vector(x: 663, y: 19) > Vector(x: 463, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 18) > Vector(x: 664, y: 220) > Vector(x: 663, y: 219) > Vector(x: 663, y: 19))
Shape: rgb(0,0,0) Path (Vector(x: 664, y: 220) > Vector(x: 462, y: 220) > Vector(x: 463, y: 219) > Vector(x: 663, y: 219))
Shape: rgb(0,0,0) Path (Vector(x: 462, y: 220) > Vector(x: 462, y: 18) > Vector(x: 463, y: 19) > Vector(x: 463, y: 219))
Clip: Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 18, y: 442))
Repeat: Image ("/tests/assets/image.jpg") [19, 241] Size (75, 75) Path (Vector(x: 19, y: 241) > Vector(x: 94, y: 241) > Vector(x: 94, y: 316) > Vector(x: 19, y: 316))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 240) > Vector(x: 220, y: 240) > Vector(x: 219, y: 241) > Vector(x: 19, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 240) > Vector(x: 220, y: 442) > Vector(x: 219, y: 441) > Vector(x: 219, y: 241))
Shape: rgb(0,0,0) Path (Vector(x: 220, y: 442) > Vector(x: 18, y: 442) > Vector(x: 19, y: 441) > Vector(x: 219, y: 441))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 442) > Vector(x: 18, y: 240) > Vector(x: 19, y: 241) > Vector(x: 19, y: 441))
Clip: Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [19, 463] Size (75, 75) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 18, y: 564))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 462) > Vector(x: 120, y: 462) > Vector(x: 119, y: 463) > Vector(x: 19, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 120, y: 462) > Vector(x: 120, y: 564) > Vector(x: 119, y: 563) > Vector(x: 119, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 120, y: 564) > Vector(x: 18, y: 564) > Vector(x: 19, y: 563) > Vector(x: 119, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 18, y: 564) > Vector(x: 18, y: 462) > Vector(x: 19, y: 463) > Vector(x: 19, y: 563))
Clip: Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 140, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [141, 463] Size (75, 75) Path (Vector(x: 140, y: 463) > Vector(x: 242, y: 463) > Vector(x: 242, y: 538) > Vector(x: 140, y: 538))
Shape: rgb(0,0,0) Path (Vector(x: 140, y: 462) > Vector(x: 242, y: 462) > Vector(x: 241, y: 463) > Vector(x: 141, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 242, y: 462) > Vector(x: 242, y: 564) > Vector(x: 241, y: 563) > Vector(x: 241, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 242, y: 564) > Vector(x: 140, y: 564) > Vector(x: 141, y: 563) > Vector(x: 241, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 140, y: 564) > Vector(x: 140, y: 462) > Vector(x: 141, y: 463) > Vector(x: 141, y: 563))
Clip: Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 262, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [263, 463] Size (75, 75) Path (Vector(x: 263, y: 462) > Vector(x: 338, y: 462) > Vector(x: 338, y: 564) > Vector(x: 263, y: 564))
Shape: rgb(0,0,0) Path (Vector(x: 262, y: 462) > Vector(x: 364, y: 462) > Vector(x: 363, y: 463) > Vector(x: 263, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 364, y: 462) > Vector(x: 364, y: 564) > Vector(x: 363, y: 563) > Vector(x: 363, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 364, y: 564) > Vector(x: 262, y: 564) > Vector(x: 263, y: 563) > Vector(x: 363, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 262, y: 564) > Vector(x: 262, y: 462) > Vector(x: 263, y: 463) > Vector(x: 263, y: 563))
Clip: Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 384, y: 564))
Repeat: Image ("/tests/assets/image.jpg") [385, 463] Size (75, 75) Path (Vector(x: 385, y: 463) > Vector(x: 460, y: 463) > Vector(x: 460, y: 538) > Vector(x: 385, y: 538))
Shape: rgb(0,0,0) Path (Vector(x: 384, y: 462) > Vector(x: 486, y: 462) > Vector(x: 485, y: 463) > Vector(x: 385, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 486, y: 462) > Vector(x: 486, y: 564) > Vector(x: 485, y: 563) > Vector(x: 485, y: 463))
Shape: rgb(0,0,0) Path (Vector(x: 486, y: 564) > Vector(x: 384, y: 564) > Vector(x: 385, y: 563) > Vector(x: 485, y: 563))
Shape: rgb(0,0,0) Path (Vector(x: 384, y: 564) > Vector(x: 384, y: 462) > Vector(x: 385, y: 463) > Vector(x: 385, y: 563))

61
tests/reftests/background/size.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>Background size tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style>
.horizontal div, .vertical div {
display: block;
background:url("../../assets/image.jpg") center center;
}
.vertical {
float: right;
}
.horizontal {
float: left;
}
.horizontal div {
width: 400px; height: 100px;
}
.vertical div {
width: 200px; height: 200px;
}
.container {
float: left;
border: 1px solid black;
width: 150px;
height: 200px;
background-image: url(../../assets/image.jpg);
background-size: 34px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="container" style="background-repeat: repeat-y"></div>
<div class="container" style="background-repeat: repeat-x"></div>
<div class="container" style="background-size: 150% auto"></div>
<div class="horizontal">
<div style='background-size: cover;'></div>
<div style='background-size: contain;'></div>
<div style='background-size: auto 100%;'></div>
<div style='background-size: auto;'></div>
</div>
<div class="vertical">
<div style='background-size: cover;'></div>
<div style='background-size: contain;'></div>
<div style='background-size: auto 100%;'></div>
<div style='background-size: auto;'></div>
</div>
</body>
</html>

43
tests/reftests/background/size.txt Normal file
View File

@@ -0,0 +1,43 @@
Window: [800, 1010]
Rectangle: [0, 0, 800, 1010] rgba(0,0,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 160, y: 8) > Vector(x: 160, y: 210) > Vector(x: 8, y: 210))
Repeat: Image ("/tests/assets/image.jpg") [67, 92] Size (34, 34) Path (Vector(x: 67, y: 92) > Vector(x: 101, y: 92) > Vector(x: 101, y: 126) > Vector(x: 67, y: 126))
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 8) > Vector(x: 160, y: 8) > Vector(x: 159, y: 9) > Vector(x: 9, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 160, y: 8) > Vector(x: 160, y: 210) > Vector(x: 159, y: 209) > Vector(x: 159, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 160, y: 210) > Vector(x: 8, y: 210) > Vector(x: 9, y: 209) > Vector(x: 159, y: 209))
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 210) > Vector(x: 8, y: 8) > Vector(x: 9, y: 9) > Vector(x: 9, y: 209))
Clip: Path (Vector(x: 160, y: 8) > Vector(x: 312, y: 8) > Vector(x: 312, y: 210) > Vector(x: 160, y: 210))
Repeat: Image ("/tests/assets/image.jpg") [219, 92] Size (34, 34) Path (Vector(x: 219, y: 8) > Vector(x: 253, y: 8) > Vector(x: 253, y: 210) > Vector(x: 219, y: 210))
Shape: rgb(0,0,0) Path (Vector(x: 160, y: 8) > Vector(x: 312, y: 8) > Vector(x: 311, y: 9) > Vector(x: 161, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 312, y: 8) > Vector(x: 312, y: 210) > Vector(x: 311, y: 209) > Vector(x: 311, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 312, y: 210) > Vector(x: 160, y: 210) > Vector(x: 161, y: 209) > Vector(x: 311, y: 209))
Shape: rgb(0,0,0) Path (Vector(x: 160, y: 210) > Vector(x: 160, y: 8) > Vector(x: 161, y: 9) > Vector(x: 161, y: 209))
Clip: Path (Vector(x: 312, y: 8) > Vector(x: 464, y: 8) > Vector(x: 464, y: 210) > Vector(x: 312, y: 210))
Repeat: Image ("/tests/assets/image.jpg") [371, 92] Size (34, 34) Path (Vector(x: 312, y: 92) > Vector(x: 464, y: 92) > Vector(x: 464, y: 126) > Vector(x: 312, y: 126))
Shape: rgb(0,0,0) Path (Vector(x: 312, y: 8) > Vector(x: 464, y: 8) > Vector(x: 463, y: 9) > Vector(x: 313, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 464, y: 8) > Vector(x: 464, y: 210) > Vector(x: 463, y: 209) > Vector(x: 463, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 464, y: 210) > Vector(x: 312, y: 210) > Vector(x: 313, y: 209) > Vector(x: 463, y: 209))
Shape: rgb(0,0,0) Path (Vector(x: 312, y: 210) > Vector(x: 312, y: 8) > Vector(x: 313, y: 9) > Vector(x: 313, y: 209))
Clip: Path (Vector(x: 464, y: 8) > Vector(x: 616, y: 8) > Vector(x: 616, y: 210) > Vector(x: 464, y: 210))
Repeat: Image ("/tests/assets/image.jpg") [426, -5] Size (228, 228) Path (Vector(x: 426, y: -5) > Vector(x: 654, y: -5) > Vector(x: 654, y: 223) > Vector(x: 426, y: 223))
Shape: rgb(0,0,0) Path (Vector(x: 464, y: 8) > Vector(x: 616, y: 8) > Vector(x: 615, y: 9) > Vector(x: 465, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 616, y: 8) > Vector(x: 616, y: 210) > Vector(x: 615, y: 209) > Vector(x: 615, y: 9))
Shape: rgb(0,0,0) Path (Vector(x: 616, y: 210) > Vector(x: 464, y: 210) > Vector(x: 465, y: 209) > Vector(x: 615, y: 209))
Shape: rgb(0,0,0) Path (Vector(x: 464, y: 210) > Vector(x: 464, y: 8) > Vector(x: 465, y: 9) > Vector(x: 465, y: 209))
Clip: Path (Vector(x: 8, y: 210) > Vector(x: 408, y: 210) > Vector(x: 408, y: 310) > Vector(x: 8, y: 310))
Repeat: Image ("/tests/assets/image.jpg") [8, 60] Size (400, 400) Path (Vector(x: 8, y: 210) > Vector(x: 408, y: 210) > Vector(x: 408, y: 310) > Vector(x: 8, y: 310))
Clip: Path (Vector(x: 8, y: 310) > Vector(x: 408, y: 310) > Vector(x: 408, y: 410) > Vector(x: 8, y: 410))
Repeat: Image ("/tests/assets/image.jpg") [158, 310] Size (100, 100) Path (Vector(x: 8, y: 310) > Vector(x: 408, y: 310) > Vector(x: 408, y: 410) > Vector(x: 8, y: 410))
Clip: Path (Vector(x: 8, y: 410) > Vector(x: 408, y: 410) > Vector(x: 408, y: 510) > Vector(x: 8, y: 510))
Repeat: Image ("/tests/assets/image.jpg") [158, 410] Size (100, 100) Path (Vector(x: 8, y: 410) > Vector(x: 408, y: 410) > Vector(x: 408, y: 510) > Vector(x: 8, y: 510))
Clip: Path (Vector(x: 8, y: 510) > Vector(x: 408, y: 510) > Vector(x: 408, y: 610) > Vector(x: 8, y: 610))
Repeat: Image ("/tests/assets/image.jpg") [171, 523] Size (75, 75) Path (Vector(x: 8, y: 510) > Vector(x: 408, y: 510) > Vector(x: 408, y: 610) > Vector(x: 8, y: 610))
Clip: Path (Vector(x: 592, y: 210) > Vector(x: 792, y: 210) > Vector(x: 792, y: 410) > Vector(x: 592, y: 410))
Repeat: Image ("/tests/assets/image.jpg") [592, 210] Size (200, 200) Path (Vector(x: 592, y: 210) > Vector(x: 792, y: 210) > Vector(x: 792, y: 410) > Vector(x: 592, y: 410))
Clip: Path (Vector(x: 592, y: 410) > Vector(x: 792, y: 410) > Vector(x: 792, y: 610) > Vector(x: 592, y: 610))
Repeat: Image ("/tests/assets/image.jpg") [592, 410] Size (200, 200) Path (Vector(x: 592, y: 410) > Vector(x: 792, y: 410) > Vector(x: 792, y: 610) > Vector(x: 592, y: 610))
Clip: Path (Vector(x: 592, y: 610) > Vector(x: 792, y: 610) > Vector(x: 792, y: 810) > Vector(x: 592, y: 810))
Repeat: Image ("/tests/assets/image.jpg") [592, 610] Size (200, 200) Path (Vector(x: 592, y: 610) > Vector(x: 792, y: 610) > Vector(x: 792, y: 810) > Vector(x: 592, y: 810))
Clip: Path (Vector(x: 592, y: 810) > Vector(x: 792, y: 810) > Vector(x: 792, y: 1010) > Vector(x: 592, y: 1010))
Repeat: Image ("/tests/assets/image.jpg") [655, 873] Size (75, 75) Path (Vector(x: 592, y: 810) > Vector(x: 792, y: 810) > Vector(x: 792, y: 1010) > Vector(x: 592, y: 1010))