site/external/skrollr/test/tests.js
2014-07-05 23:14:58 +02:00

439 lines
7.2 KiB
JavaScript
Executable File

$(window).on('load', function() {
//Initialize skrollr and save the instance.
var s = skrollr.init({
edgeStrategy: 'set',
constants: {
myconst: 300,
my500: function() {
return 500;
}
},
easing: {
half1: function() {
return 0.5
}
}
});
//Counts how many assertions will be needed for the tests.
var countAssertions = function(tests) {
var counter = 0;
for(var i = 0; i < tests.length; i++) {
var curTest = tests[i];
if(curTest.styles) {
$.each(curTest.styles, function() {
counter++;
});
}
if(curTest.attributes) {
$.each(curTest.attributes, function() {
counter++;
});
}
counter += !!curTest.selector;
}
return counter;
};
//A meta-test which runs common tests
//which need synchronization of scrolling and rendering.
var scrollTests = function(offset, tests) {
module('at scroll position ' + offset);
asyncTest('rendering', function() {
//We can't run them in parallel,
//because they would interfere with each others scroll top offset.
stop();
expect(countAssertions(tests));
//Scroll to offset, which will cause rendering (sooner or later)
s.setScrollTop(offset, true);
s.on('render', function(info) {
//Prevent another render event. Only need one for test.
s.off('render');
for(var i = 0; i < tests.length; i++) {
var curTest = tests[i];
if(curTest.styles) {
$.each(curTest.styles, function(k) {
QUnit.numericCSSPropertyEquals(curTest.element.css(k), curTest.styles[k], curTest.message || 'element\'s (#' + curTest.element[0].id + ') "' + k + '" CSS property is correct');
});
}
if(curTest.attributes) {
$.each(curTest.attributes, function(k, value) {
console.log(curTest.element.prop(k));
QUnit.numericCSSPropertyEquals(curTest.element.attr(k), curTest.attributes[k], curTest.message || 'element\'s (#' + curTest.element[0].id + ') "' + k + '" attribute is correct');
});
}
if(curTest.selector) {
ok(curTest.element.is(curTest.selector), 'element matches "' + curTest.selector + '"');
}
}
start(2);
});
});
};
//
// Now the actual tests.
//
//Add one element dynamically
var newElement = $('<div id="dynamic" data-0="bottom:0px;" data-250="bottom:100px;">TEST</div>').appendTo('body');
s.refresh(newElement[0]);
module('basic stuff');
test('CSS classes present', function() {
strictEqual($('.skrollable').length, 23, 'All elements have the .skrollable class');
ok($('html').is('.skrollr'), 'HTML element has skrollr class');
ok($('html').is(':not(.no-skrollr)'), 'HTML element does not have no-skrollr class');
});
scrollTests(500, [
{
message: 'colons inside urls are preserved (#73)',
element: $('#colon-url'),
styles: {
backgroundImage: 'url(https://secure.travis-ci.org/Prinzhorn/skrollr.png)'
}
},
{
message: 'a single period is no number (#74)',
element: $('#period-number'),
styles: {
backgroundImage: 'url(https://secure.travis-ci.org/Prinzhorn/skrollr.png?1337)'
}
},
{
element: $('#simple-numeric'),
styles: {
left: '100px',
top: '50px'
}
},
{
element: $('#easing'),
styles: {
left: '25px'
}
},
{
element: $('#compound-numeric'),
styles: {
marginTop: '30px',
marginRight: '20px',
marginBottom: '10px',
marginLeft: '0px'
}
},
{
element: $('#rgb-color'),
styles: {
color: 'rgb(50, 100, 150)'
}
},
{
element: $('#rgba-color'),
styles: {
color: 'rgba(50, 100, 150, 0.5)'
}
},
{
element: $('#hsl-color'),
styles: {
color: 'rgb(191, 63, 63)'
}
},
{
element: $('#no-interpolation'),
styles: {
right: '100px'
}
},
{
element: $('#anchor-2'),
styles: {
right: '200px'
}
},
{
element: $('#foreign-anchor'),
styles: {
paddingTop: '100px',
paddingRight: '100px',
paddingBottom: '100px',
paddingLeft: '100px'
}
},
{
element: $('#float'),
styles: {
float: 'left'
}
},
{
message: 'z-index "auto" is no converted to a number (#351)',
element: $('#auto-z-index'),
styles: {
zIndex: 'auto'
}
},
{
message: 'attribute interpolation',
element: $('#attr'),
attributes: {
title: '0'
}
}
]);
scrollTests(0, [
{
element: $('#simple-numeric'),
styles: {
left: '-100px',
top: '0px'
}
},
{
element: $('#easing'),
styles: {
left: '25px'
}
},
{
element: $('#compound-numeric'),
styles: {
marginTop: '0px',
marginRight: '10px',
marginBottom: '20px',
marginLeft: '30px'
}
},
{
element: $('#rgb-color'),
styles: {
color: 'rgb(0, 0, 0)'
}
},
{
element: $('#rgba-color'),
styles: {
color: 'rgba(0, 0, 0, 0.2)'
}
},
{
element: $('#hsl-color'),
styles: {
color: 'rgb(0, 0, 0)'
}
},
{
element: $('#no-interpolation'),
styles: {
right: '0px'
}
},
{
element: $('#end'),
styles: {
fontSize: '10px'
}
},
{
element: newElement,
styles: {
bottom: '0px'
}
},
{
element: $('#float'),
styles: {
float: 'none'
}
},
{
message: 'z-index "auto" is no converted to a number (#351)',
element: $('#auto-z-index'),
styles: {
zIndex: '1'
}
},
{
message: 'attribute interpolation',
element: $('#attr'),
attributes: {
title: '500',
'data-test': 'skrollr'
}
}
]);
scrollTests(250, [
{
element: $('#simple-numeric'),
styles: {
left: '0px',
top: '25px'
}
},
{
element: $('#easing'),
styles: {
left: '25px'
}
},
{
element: $('#compound-numeric'),
styles: {
marginTop: '15px',
marginRight: '15px',
marginBottom: '15px',
marginLeft: '15px'
}
},
{
element: $('#rgb-color'),
styles: {
color: 'rgb(25, 50, 75)'
}
},
{
element: $('#rgba-color'),
styles: {
color: 'rgba(25, 50, 75, 0.35)'
}
},
{
element: $('#hsl-color'),
styles: {
color: 'rgb(79, 47, 47)'
}
},
{
element: $('#no-interpolation'),
styles: {
right: '0px'
}
},
{
element: $('#anchor-2'),
styles: {
right: '100px'
}
},
{
element: newElement,
styles: {
bottom: '100px'
}
},
{
element: $('#foreign-anchor'),
styles: {
paddingTop: '150px',
paddingRight: '150px',
paddingBottom: '150px',
paddingLeft: '150px'
}
},
{
element: $('#float'),
styles: {
float: 'none'
}
},
{
message: 'attribute interpolation',
element: $('#attr'),
attributes: {
title: '250',
'data-test': 'skrollr'
}
}
]);
//bottom-top + 50%
scrollTests(150, [
{
element: $('#relative-percentage-offset'),
styles: {
left: '250px'
}
}
]);
//200%
scrollTests(600, [
{
element: $('#percentage-offset'),
styles: {
left: '500px'
}
},
{
message: 'attribute interpolation',
element: $('#attr'),
attributes: {
'data-test': 'skrollr-test'
}
}
]);
//100%
scrollTests(300, [
{
element: $('#percentage-offset'),
styles: {
left: '250px'
}
}
]);
//We scroll to a ridiculous large position so that the browser cuts it at the actual position.
var maxScrollHeight = s.setScrollTop(1e5) && s.getScrollTop();
scrollTests(maxScrollHeight, [
{
element: $('#anchor-1'),
styles: {
right: '100px'
}
},
{
element: $('#easing'),
styles: {
left: '50px'
}
},
{
element: $('#easing_with_easing_strategy'),
styles: {
left: '25px'
}
},
{
element: $('#reset-strategy'),
styles: {
left: '1337px'
}
}
]);
});//DOM ready