mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
add unit testing for css
This commit is contained in:
Niklas von Hertzen
parent
7726cd9f39
commit
8affbc3db5
92
tests/qunit/index.html
Normal file
92
tests/qunit/index.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>QUnit Test Suite</title>
|
||||
<link rel="stylesheet" href="lib/qunit.css">
|
||||
<script src="lib/qunit.js"></script>
|
||||
|
||||
|
||||
|
||||
<!-- src files -->
|
||||
<script type="text/javascript" src="../../external/jquery-1.6.2.js"></script>
|
||||
|
||||
<!-- 'Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas' -->
|
||||
<script type="text/javascript" src="../../src/Core.js"></script>
|
||||
<script type="text/javascript" src="../../src/Generate.js"></script>
|
||||
<script type="text/javascript" src="../../src/Parse.js"></script>
|
||||
<script type="text/javascript" src="../../src/Preload.js"></script>
|
||||
<script type="text/javascript" src="../../src/Queue.js"></script>
|
||||
<script type="text/javascript" src="../../src/Renderer.js"></script>
|
||||
<script type="text/javascript" src="../../src/Util.js"></script>
|
||||
<script type="text/javascript" src="../../src/renderers/Canvas.js"></script>
|
||||
|
||||
<script src="unit/css.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
#borders div {
|
||||
border-color: #000;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
#backgroundPosition div {
|
||||
width:50px;
|
||||
height:50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture" style="display:none;">
|
||||
<div id="borders">
|
||||
<div style="border-width: 1px 0;"></div>
|
||||
<div style="border-width: 1em 0;"></div>
|
||||
<div style="border-width: thin medium thick;"></div>
|
||||
<div style="border-width: 5% 6px 12%;"></div> <!-- percentages aren't valid -->
|
||||
<div style="border-width: 5em 5ex 5in 5cm;"></div>
|
||||
<div style="border-width: 500em 500ex 500in 500cm;"></div>
|
||||
<div style="border-width: 5mm 5pt 5pc 5px;"></div>
|
||||
<div style="border-width: auto inherit;"></div>
|
||||
<div style="border-width: 500mm 500pt 500pc 500px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="padding">
|
||||
<div style="padding: 1px 0;"></div>
|
||||
<div style="padding: 1em 0;"></div>
|
||||
<div style="padding: thin medium thick;"></div>
|
||||
<div style="padding: 5% 6px 12%;"></div>
|
||||
<div style="padding: 5em 5ex 5in 5cm;"></div>
|
||||
<div style="padding: 500em 500ex 500in 500cm;"></div>
|
||||
<div style="padding: 5mm 5pt 5pc 5px;"></div>
|
||||
<div style="padding: 500mm 500pt 500pc 500px;"></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>
|
||||
<div style="background-position: 500em 500ex;"></div>
|
||||
<div style="background-position: 5pc 5px;"></div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- <iframe src="../borders.html" id="borders"></iframe> -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
232
tests/qunit/lib/qunit.css
Normal file
232
tests/qunit/lib/qunit.css
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
/**
|
||||
* QUnit v1.4.0pre - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://docs.jquery.com/QUnit
|
||||
*
|
||||
* Copyright (c) 2012 John Resig, Jörn Zaefferer
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* or GPL (GPL-LICENSE.txt) licenses.
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 15px 15px 0 0;
|
||||
-moz-border-radius: 15px 15px 0 0;
|
||||
-webkit-border-top-right-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-header label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests ol {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
|
||||
box-shadow: inset 0px 2px 13px #999;
|
||||
-moz-box-shadow: inset 0px 2px 13px #999;
|
||||
-webkit-box-shadow: inset 0px 2px 13px #999;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
margin: 0.5em;
|
||||
padding: 0.4em 0.5em 0.4em 0.5em;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #5E740B;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 26px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 15px 15px;
|
||||
-moz-border-radius: 0 0 15px 15px;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
1632
tests/qunit/lib/qunit.js
Normal file
1632
tests/qunit/lib/qunit.js
Normal file
File diff suppressed because it is too large
Load Diff
139
tests/qunit/unit/css.js
Normal file
139
tests/qunit/unit/css.js
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
/*
|
||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
||||
* @created 3.3.2012
|
||||
* @website http://hertzen.com
|
||||
*/
|
||||
|
||||
module("CSS");
|
||||
$(function() {
|
||||
|
||||
|
||||
var propsToTest = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
|
||||
numDivs = $('#borders div').length;
|
||||
/*
|
||||
expecting = [
|
||||
// #1
|
||||
"1px",
|
||||
"0px",
|
||||
"1px",
|
||||
"0px",
|
||||
|
||||
// #2
|
||||
"16px",
|
||||
"0px",
|
||||
"16px",
|
||||
"0px",
|
||||
|
||||
// #3
|
||||
"1px",
|
||||
"3px",
|
||||
"5px",
|
||||
"3px",
|
||||
|
||||
// #4
|
||||
"3px",
|
||||
"3px",
|
||||
"3px",
|
||||
"3px",
|
||||
|
||||
// #5
|
||||
"80px",
|
||||
"35px",
|
||||
"480px",
|
||||
"188px",
|
||||
|
||||
// #6
|
||||
"3904px",
|
||||
"3500px",
|
||||
"2944px",
|
||||
"2513px",
|
||||
|
||||
// #7
|
||||
"18px",
|
||||
"6px",
|
||||
"80px",
|
||||
"5px",
|
||||
|
||||
// #8
|
||||
"1889px",
|
||||
"666px",
|
||||
"3904px",
|
||||
"500px"
|
||||
];
|
||||
*/
|
||||
|
||||
test('border-width', propsToTest.length * numDivs, function() {
|
||||
|
||||
$('#borders div').each(function(i, el) {
|
||||
$.each(propsToTest, function(s, prop) {
|
||||
var expect = $(el).css(prop);
|
||||
|
||||
// older IE's don't necessarily return px even with jQuery
|
||||
if (expect === "thin") {
|
||||
expect = "1px";
|
||||
} else if (expect === "medium") {
|
||||
expect = "3px";
|
||||
} else if (expect === "thick") {
|
||||
expect = "5px";
|
||||
}
|
||||
|
||||
QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) );
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
var propsToTest2 = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
|
||||
numDivs2 = $('#padding div').length;
|
||||
|
||||
test('padding width', propsToTest2.length * numDivs2, function() {
|
||||
|
||||
$('#padding div').each(function(i, el) {
|
||||
$.each(propsToTest2, function(s, prop) {
|
||||
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;
|
||||
|
||||
test('background-position', propsToTest3.length * numDivs3 * 2, function() {
|
||||
|
||||
$('#backgroundPosition div').each(function(i, el) {
|
||||
$.each(propsToTest3, function(s, prop) {
|
||||
var img = new Image();
|
||||
img.width = 50;
|
||||
img.height = 50;
|
||||
var item = _html2canvas.Util.getCSS(el, prop),
|
||||
pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img);
|
||||
|
||||
|
||||
var split = $(el).css(prop).split(" ");
|
||||
var testEl = $('<div />').css({
|
||||
'position': 'absolute',
|
||||
'left': split[0],
|
||||
'top': split[1]
|
||||
});
|
||||
|
||||
testEl.appendTo(el);
|
||||
|
||||
|
||||
|
||||
|
||||
QUnit.equal( pos.left, parseFloat(testEl.css('left'), 10), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item );
|
||||
QUnit.equal( pos.top, parseFloat(testEl.css('top'), 10), "div #" + (i + 1) + " background-position-y equals " + pos.top );
|
||||
|
||||
testEl.remove();
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
// TODO add backgroundPosition % tests
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user