Skip to content

Commit 2a0dff3

Browse files
author
André Fiedler
committed
"test: backgroundGradient"
1 parent 00d73c0 commit 2a0dff3

2 files changed

Lines changed: 76 additions & 20 deletions

File tree

‎tests/qunit/index.html‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,21 @@
8989
</div>
9090

9191
<style>
92-
.linearGradient {
92+
.linearGradientSimple {
93+
/* FF 3.6+ */
94+
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
95+
/* Chrome,Safari4+ */
96+
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
97+
/* Chrome 10+, Safari 5.1+ */
98+
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
99+
/* Opera 11.10+ */
100+
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
101+
/* IE 10+ */
102+
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
103+
/* W3C */
104+
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
105+
}
106+
.linearGradientWithStops {
93107
/* IE9 SVG */
94108
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
95109
/* FF 3.6+ */
@@ -107,7 +121,8 @@
107121
}
108122
</style>
109123
<div id="backgroundGradients">
110-
<div class="linearGradient"></div>
124+
<div class="linearGradientSimple"></div>
125+
<div class="linearGradientWithStops"></div>
111126
</div>
112127
</div>
113128

‎tests/qunit/unit/css.js‎

Lines changed: 59 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ var test = test || function(){},
55

66

77
module("CSS");
8-
$(function() {
8+
$(function() {
9+
10+
var propsToTest = {},
11+
numDivs = {};
12+
913

1014

11-
var propsToTest = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
12-
numDivs = $('#borders div').length;
15+
propsToTest['border-width'] = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
16+
numDivs['border-width'] = $('#borders div').length;
1317
/*
1418
expecting = [
1519
// #1
@@ -62,10 +66,10 @@ $(function() {
6266
];
6367
*/
6468

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

6771
$('#borders div').each(function(i, el) {
68-
$.each(propsToTest, function(s, prop) {
72+
$.each(propsToTest['border-width'], function(s, prop) {
6973
var expect = $(el).css(prop);
7074

7175
// older IE's don't necessarily return px even with jQuery
@@ -82,32 +86,28 @@ $(function() {
8286
});
8387
});
8488

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

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

9094
$('#padding div').each(function(i, el) {
91-
$.each(propsToTest2, function(s, prop) {
95+
$.each(propsToTest['padding width'], function(s, prop) {
9296
var isPx = _html2canvas.Util.getCSS(el, prop).indexOf("px");
9397
QUnit.notEqual( isPx, -1, "div #" + (i + 1) + " property " + prop + " is in pixels" );
9498
QUnit.equal( _html2canvas.Util.getCSS(el, prop), $(el).css(prop), "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) );
9599
});
96100

97101
});
98-
});
99-
100-
101-
102-
102+
});
103103

104-
var propsToTest3 = ["backgroundPosition"],
105-
numDivs3 = $('#backgroundPosition div').length;
104+
propsToTest['background-position'] = ["backgroundPosition"];
105+
numDivs['background-position'] = $('#backgroundPosition div').length;
106106

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

109109
$('#backgroundPosition div').each(function(i, el) {
110-
$.each(propsToTest3, function(s, prop) {
110+
$.each(propsToTest['background-position'], function(s, prop) {
111111
var img = new Image();
112112
img.width = 50;
113113
img.height = 50;
@@ -145,4 +145,45 @@ $(function() {
145145
});
146146

147147
// 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+
}, img);
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;
184+
185+
QUnit.notEqual(overallColor, 255, 'No Background Gradient - CSS was ' + src);
186+
});
187+
});
188+
});
148189
});

0 commit comments

Comments
 (0)