Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tests background gradient #70

Merged
merged 5 commits into from
Mar 4, 2012
Merged

Tests background gradient #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5e57ebc
"preventing JSHint messages"
Mar 4, 2012
00d73c0
"test: backgroundGradients markup"
Mar 4, 2012
2a0dff3
"test: backgroundGradient"
Mar 4, 2012
d78687a
"fixed typo"
Mar 4, 2012
f47f902
"tests: small bugfix"
Mar 4, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 37 additions & 5 deletions tests/qunit/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,10 @@
<div style="padding: 15% 0 3%;"></div>
</div>




<div id="backgroundPosition">
<div style="background-position: 1px 0;"></div>
<div style="background-position: 1em 0;"></div>
<div style="background-position: thin medium;"></div>

<div style="background-position: 5em 5ex;"></div>
<div style="background-position: 5in 5cm;"></div>
<div style="background-position: 500in 500cm;"></div>
Expand All @@ -84,14 +80,50 @@
<div style="background-position: 500pc 500px;"></div>
<div style="background-position: 5mm 5pt;"></div>
<div style="background-position: 500mm 500pt;"></div>

</div>

<div id="backgroundPositionPercentage">
<div style="background-position: 5% 6px;"></div>
<div style="background-position: center center;"></div>
<div style="background-position: left bottom;"></div>
</div>

<style>
.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 */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGJlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzYxOTljNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzNhODRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzQxOWFkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzRiYjhmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjU1OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* 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%);
}
</style>
<div id="backgroundGradients">
<div class="linearGradientSimple"></div>
<div class="linearGradientWithStops"></div>
</div>
</div>

<!-- <iframe src="../borders.html" id="borders"></iframe> -->
Expand Down
85 changes: 66 additions & 19 deletions tests/qunit/unit/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
// declare vars (preventing JSHint messages)
var test = test || function(){},
QUnit = QUnit || {},
_html2canvas = _html2canvas || {};


module("CSS");
$(function() {
$(function() {

var propsToTest = {},
numDivs = {};



var propsToTest = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
numDivs = $('#borders div').length;
propsToTest['border-width'] = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
numDivs['border-width'] = $('#borders div').length;
/*
expecting = [
// #1
Expand Down Expand Up @@ -56,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) {
$.each(propsToTest, function(s, prop) {
$.each(propsToTest['border-width'], function(s, prop) {
var expect = $(el).css(prop);

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

var propsToTest2 = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
numDivs2 = $('#padding div').length;
propsToTest['padding width'] = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
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) {
$.each(propsToTest2, function(s, prop) {
$.each(propsToTest['padding width'], function(s, prop) {
var isPx = _html2canvas.Util.getCSS(el, prop).indexOf("px");
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) );
});

});
});

});




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

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

$('#backgroundPosition div').each(function(i, el) {
$.each(propsToTest3, function(s, prop) {
$.each(propsToTest['background-position'], function(s, prop) {
var img = new Image();
img.width = 50;
img.height = 50;
Expand All @@ -113,7 +119,7 @@ $(function() {
if ( window.getComputedStyle ) {
split = $(el).css(prop).split(" ");
} else {
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")]
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")];
}

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

// 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
});

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 / 4);

QUnit.notEqual(overallColor, 255, 'No Background Gradient - CSS was ' + src);
});
});
});
});