Browse files

[singleimagedisplay] Tests for resizing to window.

  • Loading branch information...
1 parent 4a70d56 commit b1b3eaabb5e43fa8a8ebb4920e44a23a0e015349 @davidmaxwaterman davidmaxwaterman committed Dec 16, 2011
View
38 tests/unit-tests/singleimagedisplay/index.html
@@ -113,11 +113,47 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
- <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-window-is-container">
+ <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-resize-smallersquare-to-window">
<div data-nstest-role="content">
<img id="image8" />
</div>
</div>
+ <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-resize-largersquare-to-window">
+ <div data-nstest-role="content">
+ <img id="image9" />
+ </div>
+ </div>
+
+ <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-resize-largelandscape-to-window">
+ <div data-nstest-role="content">
+ <img id="image10" />
+ </div>
+ </div>
+
+ <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-resize-largerportrait-to-window">
+ <div data-nstest-role="content">
+ <img id="image11" />
+ </div>
+ </div>
+
+ <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-resize-smallerlandscape-to-window">
+ <div data-nstest-role="content">
+ <img id="image12" />
+ </div>
+ </div>
+
+ <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-default-broken-window">
+ <div data-nstest-role="content">
+ <img id="image13" data-nstest-src="broken" />
+ </div>
+ </div>
+
+ <div data-role="page" data-nstest-role="page" id="singleimagedisplay-test-custom-broken-window">
+ <div data-nstest-role="content">
+ <img id="image14" data-nstest-src="broken" />
+ </div>
+ </div>
+
</body>
</html>
View
198 tests/unit-tests/singleimagedisplay/singleimagedisplay.js
@@ -9,15 +9,16 @@
module("Single Image Display");
asyncTest("Should create correct markup", function () {
+ var pageId = '#singleimagedisplay-test-markup';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-markup');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-markup');
+ var $new_page = $( pageId );
var $image = $new_page.find('#image0');
var $div = $image.siblings("div");
@@ -31,23 +32,25 @@
});
asyncTest("Resize small square image to larger square container", function () {
+ var pageId = '#singleimagedisplay-test-resize-smallersquare-to-largersquare';
+ var imageId = '#image1';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-resize-smallersquare-to-largersquare');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-smallersquare-to-largersquare');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-smallersquare-to-largersquare');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image1');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
@@ -87,23 +90,25 @@
});
asyncTest("Resize large square image to smaller square container", function () {
+ var pageId = '#singleimagedisplay-test-resize-largersquare-to-smallersquare';
+ var imageId = '#image2';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-resize-largersquare-to-smallersquare');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-largersquare-to-smallersquare');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-largersquare-to-smallersquare');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image2');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
@@ -143,23 +148,25 @@
});
asyncTest("Resize large landscape image to smaller square container", function () {
+ var pageId = '#singleimagedisplay-test-resize-largelandscape-to-smallersquare';
+ var imageId = '#image3';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-resize-largelandscape-to-smallersquare');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-largelandscape-to-smallersquare');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-largelandscape-to-smallersquare');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image3');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
@@ -199,23 +206,25 @@
});
asyncTest("Resize large portrait image to smaller square container", function () {
+ var pageId = '#singleimagedisplay-test-resize-largerportrait-to-smallersquare';
+ var imageId = '#image4';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-resize-largerportrait-to-smallersquare');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-largerportrait-to-smallersquare');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-largerportrait-to-smallersquare');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image4');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
@@ -255,23 +264,25 @@
});
asyncTest("Resize small landscape image to larger square container", function () {
+ var pageId = '#singleimagedisplay-test-resize-smallerlandscape-to-largersquare';
+ var imageId = '#image5';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-resize-smallerlandscape-to-largersquare');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-smallerlandscape-to-largersquare');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-resize-smallerlandscape-to-largersquare');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image5');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
@@ -311,17 +322,19 @@
});
asyncTest("Broken image displays default broken image sized to container", function () {
+ var pageId = '#singleimagedisplay-test-default-broken';
+ var imageId = '#image6';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-default-broken');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-default-broken');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image6');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $siblings = $image.siblings();
@@ -353,18 +366,20 @@
});
asyncTest("Broken image displays custom broken image sized to container", function () {
+ var pageId = '#singleimagedisplay-test-custom-broken';
+ var imageId = '#image7';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-custom-broken');
+ $.testHelper.openPage( pageId );
},
function () {
var $new_page = $('#singleimagedisplay-test-custom-broken');
var $customSrc = 'images/noContent-2.png';
- var $image = $new_page.find('#image7');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $siblings = $image.siblings();
@@ -399,23 +414,25 @@
// WINDOW TESTS
asyncTest("Resize small square image to window", function () {
+ var pageId = '#singleimagedisplay-test-resize-smallersquare-to-window';
+ var imageId = '#image8';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-window-is-container');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image8');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
@@ -458,23 +475,26 @@
});
asyncTest("Resize large square image to window", function () {
+ var pageId = "#singleimagedisplay-test-resize-largersquare-to-window";
+ var imageId = '#image9';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-window-is-container');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image8');
+ var $image = $new_page.find( imageId );
+ ok( $image, imageId+" found" );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
@@ -508,49 +528,50 @@
$image.singleimagedisplay( 'option', 'source', "images/singleimage_s.jpg" );
},
- function () { expect(3); start(); }
+ function () { expect(4); start(); }
]);
});
asyncTest("Resize large landscape image to window", function () {
+ var pageId = "#singleimagedisplay-test-resize-largelandscape-to-window";
+ var imageId = '#image10';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-window-is-container');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image8');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
var height = $realImage.height();
var imageArea = width*height;
var aspectRatio = (imageArea==0)?1.0:(width/height);
- var imageIsPortrait = aspectRatio<1.0;
var parentWidth = window.innerWidth;
var parentHeight = window.innerHeight;
- var parentLimit = Math.min( parentWidth, parentHeight );
+ var parentAspectRatio = parentWidth/parentHeight;
// test width/height is same as container
- if ( imageIsPortrait ) {
+ if ( parentAspectRatio>aspectRatio ) {
// height is the limit
- equal(height, parentLimit, "portrait image height correct");
+ equal(height, parentHeight, "portrait image height correct");
} else {
// width is the limit
- equal(width, parentLimit, "landscape image width correct");
+ equal(width, parentWidth, "landscape image width correct");
}
var originalImage = $realImage[0];
@@ -572,48 +593,50 @@
});
asyncTest("Resize large portrait image to window", function () {
+ var pageId = "#singleimagedisplay-test-resize-largerportrait-to-window";
+ var imageId = '#image11';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-window-is-container');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image8');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
var height = $realImage.height();
var imageArea = width*height;
var aspectRatio = (imageArea==0)?1.0:(width/height);
- var imageIsPortrait = aspectRatio<1.0;
var parentWidth = window.innerWidth;
var parentHeight = window.innerHeight;
- var parentLimit = Math.min( parentWidth, parentHeight );
+ var parentAspectRatio = parentWidth/parentHeight;
// test width/height is same as container
- if ( imageIsPortrait ) {
+ if ( parentAspectRatio>aspectRatio ) {
// height is the limit
- equal(height, parentLimit, "portrait image height correct");
+ equal(height, parentHeight, "portrait image height correct");
} else {
// width is the limit
- equal(width, parentLimit, "landscape image width correct");
+ equal(width, parentWidth, "landscape image width correct");
}
var originalImage = $realImage[0];
var originalAspectRatio = originalImage.naturalWidth/originalImage.naturalHeight;
- equal( aspectRatio, originalAspectRatio, "aspect ratio correct" );
+ // need a fuzzy compare here, it seems
+ equal( Math.round(aspectRatio*10)/10, originalAspectRatio, "aspect ratio correct" );
$image.unbind( "init" );
});
@@ -629,42 +652,43 @@
});
asyncTest("Resize small landscape image to window", function () {
+ var pageId = "#singleimagedisplay-test-resize-smallerlandscape-to-window";
+ var imageId = '#image12';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-window-is-container');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
ok($new_page.hasClass('ui-page-active'), "page active");
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image8');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $realImage = $image.siblings("img.ui-singleimagedisplay");
var width = $realImage.width();
var height = $realImage.height();
var imageArea = width*height;
var aspectRatio = (imageArea==0)?1.0:(width/height);
- var imageIsPortrait = aspectRatio<1.0;
var parentWidth = window.innerWidth;
var parentHeight = window.innerHeight;
- var parentLimit = Math.min( parentWidth, parentHeight );
+ var parentAspectRatio = parentWidth/parentHeight;
// test width/height is same as container
- if ( imageIsPortrait ) {
+ if ( parentAspectRatio>aspectRatio ) {
// height is the limit
- equal(height, parentLimit, "portrait image height correct");
+ equal(height, parentHeight, "portrait image height correct");
} else {
// width is the limit
- equal(width, parentLimit, "landscape image width correct");
+ equal(width, parentWidth, "landscape image width correct");
}
var originalImage = $realImage[0];
@@ -686,17 +710,19 @@
});
asyncTest("Broken image displays default broken image sized to window", function () {
+ var pageId = "#singleimagedisplay-test-default-broken-window";
+ var imageId = '#image13';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-window-is-container');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
- var $image = $new_page.find('#image8');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $siblings = $image.siblings();
@@ -708,12 +734,23 @@
var width = $div.width();
var height = $div.height();
+ var imageArea = width*height;
+ var aspectRatio = (imageArea==0)?1.0:(width/height);
var parentWidth = window.innerWidth;
var parentHeight = window.innerHeight;
+ var parentAspectRatio = parentWidth/parentHeight;
- equal( width, parentWidth, "background image fills container width" );
- equal( height, parentHeight, "background image fills container height" );
+ // test width/height is same as container
+ if ( parentAspectRatio>aspectRatio ) {
+ // height is the limit - should be square
+ equal(height, parentHeight, "background image height correct");
+ equal(width, parentHeight, "background image height correct");
+ } else {
+ // width is the limit - should be square
+ equal(width, parentWidth, "background image width correct");
+ equal(height, parentWidth, "background image width correct");
+ }
$image.unbind( "init" );
});
@@ -728,18 +765,20 @@
});
asyncTest("Broken image displays custom broken image sized to window", function () {
+ var pageId = "#singleimagedisplay-test-custom-broken-window";
+ var imageId = '#image14';
$.testHelper.pageSequence([
function () {
- $.testHelper.openPage('#singleimagedisplay-test-window-is-container');
+ $.testHelper.openPage( pageId );
},
function () {
- var $new_page = $('#singleimagedisplay-test-window-is-container');
+ var $new_page = $( pageId );
var $customSrc = 'images/noContent-2.png';
- var $image = $new_page.find('#image8');
+ var $image = $new_page.find( imageId );
$image.bind( "init", function() {
var $siblings = $image.siblings();
@@ -752,12 +791,23 @@
var width = $realImage.width();
var height = $realImage.height();
+ var imageArea = width*height;
+ var aspectRatio = (imageArea==0)?1.0:(width/height);
var parentWidth = window.innerWidth;
var parentHeight = window.innerHeight;
+ var parentAspectRatio = parentWidth/parentHeight;
- equal( width, parentWidth, "background image fills container width" );
- equal( height, parentHeight, "background image fills container height" );
+ // test width/height is same as container
+ if ( parentAspectRatio>aspectRatio ) {
+ // height is the limit - should be square
+ equal(height, parentHeight, "background image height correct");
+ equal(width, parentHeight, "background image height correct");
+ } else {
+ // width is the limit - should be square
+ equal(width, parentWidth, "background image width correct");
+ equal(height, parentWidth, "background image width correct");
+ }
$image.unbind( "init" );
});

0 comments on commit b1b3eaa

Please sign in to comment.