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

"test: backgroundGradient"

Browse Source
This commit is contained in:
André Fiedler 2012-03-04 16:59:00 +00:00
parent 00d73c0bf8
commit 2a0dff32b2
2 changed files with 76 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
tests/qunit/index.html
View File

@ -89,7 +89,21 @@
</div> </div>
<style> <style>
.linearGradient { .linearGradientSimple {
/* 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);
}
.linearGradientWithStops {
/* IE9 SVG */ /* IE9 SVG */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* FF 3.6+ */ /* FF 3.6+ */
@ -107,7 +121,8 @@
} }
</style> </style>
<div id="backgroundGradients"> <div id="backgroundGradients">
<div class="linearGradient"></div> <div class="linearGradientSimple"></div>
<div class="linearGradientWithStops"></div>
</div> </div>
</div> </div>

77
tests/qunit/unit/css.js
View File

@ -5,11 +5,15 @@ var test = test || function(){},
module("CSS"); module("CSS");
$(function() { $(function() {
var propsToTest = {},
numDivs = {};
var propsToTest = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"], propsToTest['border-width'] = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
numDivs = $('#borders div').length; numDivs['border-width'] = $('#borders div').length;
/* /*
expecting = [ expecting = [
// #1 // #1
@ -62,10 +66,10 @@ $(function() {
]; ];
*/ */
test('border-width', propsToTest.length * numDivs, function() { test('border-width', propsToTest['border-width'].length * numDivs['border-width'], function() {
$('#borders div').each(function(i, el) { $('#borders div').each(function(i, el) {
$.each(propsToTest, function(s, prop) { $.each(propsToTest['border-width'], function(s, prop) {
var expect = $(el).css(prop); var expect = $(el).css(prop);
// older IE's don't necessarily return px even with jQuery // older IE's don't necessarily return px even with jQuery
@ -82,32 +86,28 @@ $(function() {
}); });
}); });
var propsToTest2 = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"], propsToTest['padding width'] = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
numDivs2 = $('#padding div').length; numDivs['padding width'] = $('#padding div').length;
test('padding width', propsToTest2.length * numDivs2 * 2, function() { test('padding width', propsToTest['padding width'].length * numDivs['padding width'] * 2, function() {
$('#padding div').each(function(i, el) { $('#padding div').each(function(i, el) {
$.each(propsToTest2, function(s, prop) { $.each(propsToTest['padding width'], function(s, prop) {
var isPx = _html2canvas.Util.getCSS(el, prop).indexOf("px"); var isPx = _html2canvas.Util.getCSS(el, prop).indexOf("px");
QUnit.notEqual( isPx, -1, "div #" + (i + 1) + " property " + prop + " is in pixels" ); QUnit.notEqual( isPx, -1, "div #" + (i + 1) + " property " + prop + " is in pixels" );
QUnit.equal( _html2canvas.Util.getCSS(el, prop), $(el).css(prop), "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) ); QUnit.equal( _html2canvas.Util.getCSS(el, prop), $(el).css(prop), "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) );
}); });
}); });
}); });
propsToTest['background-position'] = ["backgroundPosition"];
numDivs['background-position'] = $('#backgroundPosition div').length;
test('background-position', propsToTest['background-position'].length * numDivs['background-position'] * 2, function() {
var propsToTest3 = ["backgroundPosition"],
numDivs3 = $('#backgroundPosition div').length;
test('background-position', propsToTest3.length * numDivs3 * 2, function() {
$('#backgroundPosition div').each(function(i, el) { $('#backgroundPosition div').each(function(i, el) {
$.each(propsToTest3, function(s, prop) { $.each(propsToTest['background-position'], function(s, prop) {
var img = new Image(); var img = new Image();
img.width = 50; img.width = 50;
img.height = 50; img.height = 50;
@ -145,4 +145,45 @@ $(function() {
}); });
// TODO add backgroundPosition % tests // TODO add backgroundPosition % tests
propsToTest['background-gradient'] = ["backgroundImage"];
numDivs['background-gradient'] = $('#backgroundGradients div').length;
test('background-gradient', propsToTest['background-gradient'].length * numDivs['background-gradient'], function() {
$('#backgroundGradients div').each(function(i, el) {
$.each(propsToTest['background-gradient'], function(s, prop) {
var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0;
src = _html2canvas.Util.getCSS(el, prop),
img = _html2canvas.Generate.Gradient(src, {
width: 50,
height: 50
}, img);
canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
id = ctx.getImageData(0, 0, 50, 50);
data = id.data;
len = data.length;
//console.log(img);
for (var i = 0; i < len; i += 4) {
red = data[i]; // red
green = data[i + 1]; // green
blue = data[i + 2]; // blue
// i+3 is alpha (the fourth element)
overallColor += (red + green + blue) / 3;
}
overallColor /= len;
QUnit.notEqual(overallColor, 255, 'No Background Gradient - CSS was ' + src);
});
});
});
}); });