Skip to content

Commit c04311f

Browse files
niklasvhniklasvh
committed
updated tests
1 parent 58529a0 commit c04311f

File tree

3 files changed

+185
-16
lines changed

3 files changed

+185
-16
lines changed

‎tests/background.html

Lines changed: 173 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@
1010
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1111
<script type="text/javascript" src="test.js"></script>
1212
<style>
13-
13+
html {
14+
background-color: red;
15+
}
16+
body {
17+
background-color: lime;
18+
}
1419
.small div{
1520
width:100px;
1621
height:100px;
@@ -49,16 +54,180 @@
4954
.linearGradient2 {
5055
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
5156
}
57+
58+
.linearGradient3 {
59+
/* FF 3.6+ */
60+
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
61+
/* Chrome,Safari4+ */
62+
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
63+
/* Chrome 10+, Safari 5.1+ */
64+
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
65+
/* Opera 11.10+ */
66+
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
67+
/* IE 10+ */
68+
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
69+
/* W3C */
70+
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
71+
}
72+
73+
.linearGradient4 {
74+
/* FF 3.6+ */
75+
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
76+
/* Chrome, Safari 4+ */
77+
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));
78+
/* Chrome 10+, Safari 5.1+ */
79+
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
80+
/* Opera 11.10+ */
81+
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
82+
/* IE10+ */
83+
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
84+
/* W3C */
85+
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
86+
}
87+
88+
.linearGradient5 {
89+
/* FF 3.6+ */
90+
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
91+
/* Chrome, Safari 4+ */
92+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
93+
/* Chrome 10+, Safari 5.1+ */
94+
background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
95+
/* Opera 11.10+ */
96+
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
97+
/* IE 10+ */
98+
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
99+
/* W3C */
100+
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
101+
}
102+
103+
.radialGradient {
104+
/* FF 3.6+ */
105+
background: -moz-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%, #2f7bd8 50%, #0a0a0a 64%, #4e4e4e 80%, #383838 87%, #1b1b1b 100%);
106+
/* Chrome, Safari 4+ */
107+
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));
108+
/* Chrome 10+, Safari 5.1+ */
109+
background: -webkit-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
110+
/* Opera 12+ */
111+
background: -o-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
112+
/* IE 10+ */
113+
background: -ms-radial-gradient(center, ellipse cover, #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
114+
/* W3C */
115+
background: radial-gradient(center, ellipse cover, #959595 0%,#0d0d0d 48%,#2f7bd8 50%,#0a0a0a 64%,#4e4e4e 80%,#383838 87%,#1b1b1b 100%);
116+
}
117+
118+
.radialGradient2 {
119+
/* thx to https://twitter.com/#!/markjmclaren/status/13067366701 */
120+
121+
background-color: #FFF;
122+
123+
background-image:
124+
-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
125+
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
126+
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
127+
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
128+
129+
background-image:
130+
-moz-radial-gradient(42px 42px, circle farthest-corner, #A7D30C 0%, #A7D30C 3%, rgba(1,159,98,0) 11%),
131+
-moz-radial-gradient(45px 45px, circle farthest-corner, #019F62 0%, #019F62 13%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 100%),
132+
133+
-moz-radial-gradient(102px 102px, circle farthest-corner, #ff5f98 0%, #ff5f98 15%, rgba(255,1,136,0) 27%),
134+
-moz-radial-gradient(105px 105px, circle farthest-corner, #FF0188 0%, #FF0188 28%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%),
135+
136+
-moz-radial-gradient(92px 12px, circle farthest-corner, #00c9ff 0%, #00c9ff 10%, rgba(0,181,226,0) 26%),
137+
-moz-radial-gradient(95px 15px, circle farthest-corner, #00b5e2 0%, #00b5e2 28%, rgba(255,255,255,0) 31%, rgba(255,255,255,0) 100%),
138+
139+
-moz-radial-gradient(0px 150px, circle farthest-corner, #f4f201 0%, #f4f201 25%, rgba(228,199,0,0) 45%),
140+
-moz-radial-gradient(0px 150px, circle farthest-corner, #e4c700 0%, #e4c700 47%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
141+
}
142+
143+
.radialGradient3 {
144+
background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
145+
background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
146+
background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
147+
background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
148+
background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
149+
}
150+
151+
.radialGradient4 {
152+
background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
153+
background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
154+
background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
155+
background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
156+
background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
157+
}
158+
.radialGradient5 {
159+
background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
160+
background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
161+
background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
162+
background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
163+
background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
164+
}
165+
.radialGradient6 {
166+
background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
167+
background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
168+
background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
169+
background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
170+
background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
171+
}
172+
.radialGradient7 {
173+
background: -moz-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
174+
background: -webkit-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
175+
background: -o-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
176+
background: -ms-radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
177+
background: radial-gradient(75% 19%, circle contain, #ababab, #0000ff 33%,#991f1f 100%);
178+
}
179+
.radialGradient8 {
180+
background: -moz-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
181+
background: -webkit-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
182+
background: -o-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
183+
background: -ms-radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
184+
background: radial-gradient(75% 19%, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
185+
}
186+
.radialGradient9 {
187+
background: -moz-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
188+
background: -webkit-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
189+
background: -o-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
190+
background: -ms-radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
191+
background: radial-gradient(right 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
192+
}
193+
.radialGradient10 {
194+
background: -moz-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
195+
background: -webkit-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
196+
background: -o-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
197+
background: -ms-radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
198+
background: radial-gradient(left 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
199+
}
200+
.radialGradient11 {
201+
background: -moz-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
202+
background: -webkit-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
203+
background: -o-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
204+
background: -ms-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
205+
background: radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%);
206+
}
52207
</style>
53208

54209
</head>
55210
<body>
56211
<div class="medium">
57212
<div class="linearGradient">&nbsp;</div>
58213
<div class="linearGradient2">&nbsp;</div>
214+
<div class="linearGradient3">&nbsp;</div>
215+
<div class="linearGradient4">&nbsp;</div>
216+
<div class="linearGradient5">&nbsp;</div>
217+
</div>
218+
<div class="medium">
219+
<div class="radialGradient">&nbsp;</div>
220+
<div class="radialGradient2">&nbsp;</div>
221+
<div class="radialGradient3">&nbsp;</div>
222+
<div class="radialGradient4">&nbsp;</div>
223+
<div class="radialGradient5">&nbsp;</div>
224+
<div class="radialGradient6">&nbsp;</div>
225+
<div class="radialGradient7">&nbsp;</div>
226+
<div class="radialGradient8">&nbsp;</div>
227+
<div class="radialGradient9">&nbsp;</div>
228+
<div class="radialGradient10">&nbsp;</div>
229+
<div class="radialGradient11">&nbsp;</div>
59230
</div>
60-
61-
62231

63232
<div class="medium">
64233
<div style="background:url(http://github.com/image.jpg);"></div>
@@ -106,4 +275,4 @@
106275
</div>
107276

108277
</body>
109-
</html>
278+
</html>

‎tests/origin.html

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
22
<html>
33
<head>
4-
5-
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
6-
<script type="text/javascript" src="../js/html2canvas.js"></script>
7-
<script type="text/javascript" src="../js/jquery.plugin.html2canvas.js"></script>
4+
<script type="text/javascript" src="test.js"></script>
85
<script type="text/javascript">
9-
$(document).ready(function() {
10-
$('#bar').html2canvas();
11-
// var ss = $('ul').offset();
12-
// alert(ss.left);
13-
});
6+
function setUp(){
7+
h2cSelector = '#bar';
8+
}
9+
1410
</script>
1511
<title>
16-
display/box/float/clear test
12+
display/box/float/clear test
1713
</title>
1814
<style type="text/css">
19-
/* last modified: 1 Dec 98 */
15+
/* last modified: 1 Dec 98 */
2016

2117
html {
2218
font: 10px/1 Verdana, sans-serif;

‎tests/test.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
66
Released under MIT License
77
*/
8+
var h2cSelector, h2cOptions;
89
(function(document, window) {
910
var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
1011
document.write(scrStart + '../js/jquery-1.7.1.js' + scrEnd);
@@ -13,11 +14,14 @@
1314
document.write(scrStart + '../js/' + html2canvas[i] + '.js' + scrEnd);
1415
}
1516
window.onload = function() {
17+
18+
h2cSelector = [document.body];
19+
1620
if (window.setUp) {
1721
window.setUp();
1822
}
1923
setTimeout(function() {
20-
$(document.body).html2canvas({
24+
$(h2cSelector).html2canvas({
2125
flashcanvas: "../external/flashcanvas.min.js",
2226
logging: true,
2327
profile: true,

0 commit comments

Comments
 (0)