Skip to content

Commit 89d749e

Browse files
niklasvhniklasvh
committed
2 parents c056ace + c6ec656 commit 89d749e

2 files changed

Lines changed: 103 additions & 24 deletions

File tree

‎tests/qunit/index.html‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,10 @@
6969
<div style="padding: 15% 0 3%;"></div>
7070
</div>
7171

72-
73-
74-
7572
<div id="backgroundPosition">
7673
<div style="background-position: 1px 0;"></div>
7774
<div style="background-position: 1em 0;"></div>
7875
<div style="background-position: thin medium;"></div>
79-
8076
<div style="background-position: 5em 5ex;"></div>
8177
<div style="background-position: 5in 5cm;"></div>
8278
<div style="background-position: 500in 500cm;"></div>
@@ -85,14 +81,50 @@
8581
<div style="background-position: 500pc 500px;"></div>
8682
<div style="background-position: 5mm 5pt;"></div>
8783
<div style="background-position: 500mm 500pt;"></div>
88-
8984
</div>
9085

9186
<div id="backgroundPositionPercentage">
9287
<div style="background-position: 5% 6px;"></div>
9388
<div style="background-position: center center;"></div>
9489
<div style="background-position: left bottom;"></div>
9590
</div>
91+
92+
<style>
93+
.linearGradientSimple {
94+
/* FF 3.6+ */
95+
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
96+
/* Chrome,Safari4+ */
97+
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
98+
/* Chrome 10+, Safari 5.1+ */
99+
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
100+
/* Opera 11.10+ */
101+
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
102+
/* IE 10+ */
103+
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
104+
/* W3C */
105+
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
106+
}
107+
.linearGradientWithStops {
108+
/* IE9 SVG */
109+
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
110+
/* FF 3.6+ */
111+
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
112+
/* Chrome, Safari 4+ */
113+
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));
114+
/* Chrome 10+, Safari 5.1+ */
115+
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
116+
/* Opera 11.10+ */
117+
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
118+
/* IE10+ */
119+
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
120+
/* W3C */
121+
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
122+
}
123+
</style>
124+
<div id="backgroundGradients">
125+
<div class="linearGradientSimple"></div>
126+
<div class="linearGradientWithStops"></div>
127+
</div>
96128
</div>
97129
<!--
98130
<div id="fixture-iframes"></div>

‎tests/qunit/unit/css.js‎

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1+
// declare vars (preventing JSHint messages)
2+
var test = test || function(){},
3+
QUnit = QUnit || {},
4+
_html2canvas = _html2canvas || {};
5+
6+
17
module("CSS");
2-
$(function() {
8+
$(function() {
9+
10+
var propsToTest = {},
11+
numDivs = {};
12+
313

414

5-
var propsToTest = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
6-
numDivs = $('#borders div').length;
15+
propsToTest['border-width'] = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
16+
numDivs['border-width'] = $('#borders div').length;
717
/*
818
expecting = [
919
// #1
@@ -56,10 +66,10 @@ $(function() {
5666
];
5767
*/
5868

59-
test('border-width', propsToTest.length * numDivs, function() {
69+
test('border-width', propsToTest['border-width'].length * numDivs['border-width'], function() {
6070

6171
$('#borders div').each(function(i, el) {
62-
$.each(propsToTest, function(s, prop) {
72+
$.each(propsToTest['border-width'], function(s, prop) {
6373
var expect = $(el).css(prop);
6474

6575
// older IE's don't necessarily return px even with jQuery
@@ -76,32 +86,28 @@ $(function() {
7686
});
7787
});
7888

79-
var propsToTest2 = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
80-
numDivs2 = $('#padding div').length;
89+
propsToTest['padding width'] = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
90+
numDivs['padding width'] = $('#padding div').length;
8191

82-
test('padding width', propsToTest2.length * numDivs2 * 2, function() {
92+
test('padding width', propsToTest['padding width'].length * numDivs['padding width'] * 2, function() {
8393

8494
$('#padding div').each(function(i, el) {
85-
$.each(propsToTest2, function(s, prop) {
95+
$.each(propsToTest['padding width'], function(s, prop) {
8696
var isPx = _html2canvas.Util.getCSS(el, prop).indexOf("px");
8797
QUnit.notEqual( isPx, -1, "div #" + (i + 1) + " property " + prop + " is in pixels" );
8898
QUnit.equal( _html2canvas.Util.getCSS(el, prop), $(el).css(prop), "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) );
8999
});
90100

91101
});
92-
});
93-
102+
});
94103

95-
96-
97-
98-
var propsToTest3 = ["backgroundPosition"],
99-
numDivs3 = $('#backgroundPosition div').length;
104+
propsToTest['background-position'] = ["backgroundPosition"];
105+
numDivs['background-position'] = $('#backgroundPosition div').length;
100106

101-
test('background-position', propsToTest3.length * numDivs3 * 2, function() {
107+
test('background-position', propsToTest['background-position'].length * numDivs['background-position'] * 2, function() {
102108

103109
$('#backgroundPosition div').each(function(i, el) {
104-
$.each(propsToTest3, function(s, prop) {
110+
$.each(propsToTest['background-position'], function(s, prop) {
105111
var img = new Image();
106112
img.width = 50;
107113
img.height = 50;
@@ -113,7 +119,7 @@ $(function() {
113119
if ( window.getComputedStyle ) {
114120
split = $(el).css(prop).split(" ");
115121
} else {
116-
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")]
122+
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")];
117123
}
118124

119125
var testEl = $('<div />').css({
@@ -139,4 +145,45 @@ $(function() {
139145
});
140146

141147
// TODO add backgroundPosition % tests
148+
149+
propsToTest['background-gradient'] = ["backgroundImage"];
150+
numDivs['background-gradient'] = $('#backgroundGradients div').length;
151+
152+
test('background-gradient', propsToTest['background-gradient'].length * numDivs['background-gradient'], function() {
153+
154+
$('#backgroundGradients div').each(function(i, el) {
155+
$.each(propsToTest['background-gradient'], function(s, prop) {
156+
var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0;
157+
158+
src = _html2canvas.Util.getCSS(el, prop),
159+
img = _html2canvas.Generate.Gradient(src, {
160+
width: 50,
161+
height: 50
162+
});
163+
164+
canvas = document.createElement('canvas');
165+
canvas.width = 50;
166+
canvas.height = 50;
167+
ctx = canvas.getContext('2d');
168+
ctx.drawImage(img, 0, 0);
169+
id = ctx.getImageData(0, 0, 50, 50);
170+
data = id.data;
171+
len = data.length;
172+
173+
//console.log(img);
174+
175+
for (var i = 0; i < len; i += 4) {
176+
red = data[i]; // red
177+
green = data[i + 1]; // green
178+
blue = data[i + 2]; // blue
179+
// i+3 is alpha (the fourth element)
180+
181+
overallColor += (red + green + blue) / 3;
182+
}
183+
overallColor /= (len / 4);
184+
185+
QUnit.notEqual(overallColor, 255, 'No Background Gradient - CSS was ' + src);
186+
});
187+
});
188+
});
142189
});

0 commit comments

Comments
 (0)