image-selector
Version:
A responsive image selector
304 lines (270 loc) • 7.87 kB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Unit Tests for ImageSelector
</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css" type="text/css" media="screen" />
<script src="//code.jquery.com/qunit/qunit-1.10.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/1.2.4/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<script src="../imageSelector.js"></script>
</head>
<body>
<h1 id="qunit-header">Image Selector</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div id="dom-tests">
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
]' width="100" id="sized-with-html" />
<img data-cuts='{
"56x100": {
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
"112x200": {
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
}' width="100" id="object-not-array" />
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
]' style="width: 100px" id="sized-with-css" />
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 75,
"width": 100,
"aspectRatio": "4:3",
"src": "http://placehold.it/100x75"
}
]' style="width: 100px; height: 75px" id="height-and-width-with-css" />
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
]' style="width: 100px; margin: 50px;" id="lots-of-margin" />
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 75,
"width": 100,
"aspectRatio": "4:3",
"src": "http://placehold.it/100x75"
},
{
"height": 50,
"width": 100,
"aspectRatio": "2:1",
"src": "http://placehold.it/100x50"
}
]' data-aspect-ratio="4:3" width="100" id="uses-aspect-ratio" />
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
]' width="100" data-src-attribute="data-src" id="data-src-attribute" />
<div style="width: 100px">
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
]' style="width: 100%" id="sized-by-parent" />
</div>
<div style="width: 100px"><span>
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
]' style="width: 100%" id="sized-by-grandparent" />
</span></div>
<img data-cuts='[
{
"height": 56,
"width": 100,
"aspectRatio": "16:9",
"src": "http://placehold.it/100x56"
},
{
"height": 112,
"width": 200,
"aspectRatio": "16:9",
"src": "http://placehold.it/200x112"
}
]' width="100" id="is-responsive" data-responsive="true" />
</div>
<script type="text/javascript">
var basicCuts = [
{
height: 56,
width: 100,
aspectRatio: '16:9',
src: 'http://placehold.it/100x56'
},
{
height: 112,
width: 200,
aspectRatio: '16:9',
src: 'http://placehold.it/200x112'
}
];
var objectCuts = {
"arbitraryKey1": {
height: 56,
width: 100,
aspectRatio: '16:9',
src: 'http://placehold.it/100x56'
},
"arbitraryKey2": {
height: 112,
width: 200,
aspectRatio: '16:9',
src: 'http://placehold.it/200x112'
}
};
var cutsWithAspectRatio = [
{
height: 56,
width: 100,
aspectRatio: '16:9',
src: 'http://placehold.it/100x56'
},
{
height: 75,
width: 100,
aspectRatio: '4:3',
src: 'http://placehold.it/100x75'
},
{
height: 50,
width: 100,
aspectRatio: '2:1',
src: 'http://placehold.it/100x50'
}
];
module('Selection');
test('No aspect ratio', function() {
var cut = imageSelector.selectCut( basicCuts, 100 );
equal( cut.width, 100, "selects a cut that's right on" );
var cut = imageSelector.selectCut( basicCuts, 120 );
equal( cut.width, 100, "selects a cut that's closest" );
var cut = imageSelector.selectCut( basicCuts, 150 );
equal( cut.width, 200, "errs on the side of too large" );
var cut = imageSelector.selectCut( basicCuts, 49 );
equal( cut, undefined, "undefined if cuts are too large" );
var cut = imageSelector.selectCut( basicCuts, 401 );
equal( cut, undefined, "undefined if cuts are too small" );
var cut = imageSelector.selectCut( basicCuts, 100 );
equal( cut.width, 100, "Object instead of an array" );
})
test('With aspect ratio', function() {
var cut = imageSelector.selectCutWithAspectRatio( cutsWithAspectRatio, 100, '16:9' );
equal( cut.aspectRatio, '16:9', "selects the first one" );
var cut = imageSelector.selectCutWithAspectRatio( cutsWithAspectRatio, 100, '4:3' );
equal( cut.aspectRatio, '4:3', "selects one from the middle" );
var cut = imageSelector.selectCutWithAspectRatio( cutsWithAspectRatio, 100, '2:1' );
equal( cut.aspectRatio, '2:1', "selects the last one" );
})
test('With height', function() {
var cut = imageSelector.selectCutWithWidthAndHeight( cutsWithAspectRatio, 100, 56 );
equal( cut.aspectRatio, '16:9', "size is right on" );
var cut = imageSelector.selectCutWithWidthAndHeight( cutsWithAspectRatio, 125, 94 );
equal( cut.aspectRatio, '4:3', "A little off" );
var cut = imageSelector.selectCutWithWidthAndHeight( cutsWithAspectRatio, 100, 30 );
equal( cut, undefined, "too far off" );
})
test('DOM stuff', function() {
imageSelector.selectImages(document.getElementById('dom-tests'));
var byId = function( id ) { return document.getElementById(id)};
equal( byId('sized-with-html').src, "http://placehold.it/100x56", 'sized with html' );
equal( byId('object-not-array').src, "http://placehold.it/100x56", 'object not array' );
equal( byId('sized-with-css').src, "http://placehold.it/100x56", 'sized with css' );
equal( byId('height-and-width-with-css').src, "http://placehold.it/100x75", 'height and width with css' );
equal( byId('lots-of-margin').src, "http://placehold.it/100x56", 'lots of margin' );
equal( byId('uses-aspect-ratio').src, "http://placehold.it/100x75", 'uses aspect ratio' );
equal( byId('data-src-attribute').getAttribute('data-src'), "http://placehold.it/100x56", 'uses data-src-attribute' );
equal( byId('sized-by-parent').src, "http://placehold.it/100x56", 'sized by parent' );
equal( byId('sized-by-grandparent').src, "http://placehold.it/100x56", 'sized by grandparent' );
equal( byId('is-responsive').src, "http://placehold.it/100x56", 'is responsive' );
})
</script>
</body>
</html>