20f8df1291
data tables are going to need some work yet, but the other stuff seems to be working 100%
309 lines
12 KiB
HTML
309 lines
12 KiB
HTML
<html>
|
|
<head>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../build/logger/assets/logger.css" />
|
|
<link type="text/css" rel="stylesheet" href="../build/yuitest/assets/testlogger.css" />
|
|
|
|
<style>
|
|
.everything { position:relative; height:420px; }
|
|
.everything div { border:1px solid #888; }
|
|
.topmain { position:absolute; top:10px; left:120px; height:75px; width:100px; }
|
|
.duo1 { position:absolute; top:130px; left:20px; height:67px; width:100px; }
|
|
#duo1 { background-image:url('http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg'); }
|
|
.duo2 { position:absolute; top:130px; left:220px; height:53px; width:100px; }
|
|
.src { position:absolute; top:220px; left:120px; height:72px; width:100px; }
|
|
.trigger { position:absolute; top:330px; left:120px; height:75px; width:100px; }
|
|
.sizer { position:absolute; top:450px; left:20px; height:150px; width:200px; }
|
|
.sharedTrigger1 { position:absolute; top:10px; left:420px; height:72px; width:100px; }
|
|
.sharedTrigger2 { position:absolute; top:10px; left:550px; height:67px; width:100px; }
|
|
.fold-top { position:absolute; top:130px; left:420px; height:75px; width:100px; }
|
|
.fold-bottom { position:absolute; top:500px; left:420px; height:75px; width:100px; }
|
|
.customTrigger { position:absolute; top:330px; left:420px; height:67px; width:100px; }
|
|
|
|
.yui-imgload { background:none !important; }
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class='everything' id='everything'>
|
|
<div class='topmain' id='topmain'></div>
|
|
<div class='duo1 yui-imgload' id='duo1'></div>
|
|
<div class='duo2'>
|
|
<img class='yui-imgload' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");' width='100' height='53' />
|
|
</div>
|
|
<div class='src' id='srcImgCont'>
|
|
<img id='srcImg' />
|
|
</div>
|
|
<div class='trigger' id='addlTrigger'></div>
|
|
<div class='sizer'>
|
|
<img id='sizerImg' style='visibility:hidden;' />
|
|
</div>
|
|
<div class='sharedTrigger1' id='sharedTrigger1'></div>
|
|
<div class='sharedTrigger2' id='sharedTrigger2'></div>
|
|
<div class='fold-top'>
|
|
<img id='foldImgTop' />
|
|
</div>
|
|
<div class='fold-bottom'>
|
|
<img id='foldImgBottom' />
|
|
</div>
|
|
<div class='customTrigger' id='customTrigger'></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../build/yahoo/yahoo.js"></script>
|
|
<script type="text/javascript" src="../build/dom/dom.js"></script>
|
|
<script type="text/javascript" src="../build/event/event.js"></script>
|
|
<script type="text/javascript" src="../build/logger/logger.js"></script>
|
|
<script type="text/javascript" src="../build/yuitest/yuitest.js"></script>
|
|
<script type="text/javascript" src="../build/imageloader/imageloader.js"></script>
|
|
|
|
<script>
|
|
|
|
var imgUrlsTestCase = new YAHOO.tool.TestCase({
|
|
/*
|
|
* Test case to check the URL setting in the different types of image objects
|
|
*/
|
|
|
|
name: 'Setting Urls',
|
|
|
|
setUp: function() {
|
|
// background-image group
|
|
this.bgImgUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg';
|
|
this.mainGroup = new YAHOO.util.ImageLoader.group('topmain', 'mouseover');
|
|
this.mainGroup.registerBgImage('topmain', this.bgImgUrl);
|
|
this.mainGroup.name = 'imgUrlsTestBgImg';
|
|
this.mainGroupImage = document.getElementById('topmain');
|
|
|
|
// src-image group
|
|
this.srcImgUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg';
|
|
this.srcGroup = new YAHOO.util.ImageLoader.group('srcImgCont', 'click');
|
|
this.srcGroup.registerSrcImage('srcImg', this.srcImgUrl);
|
|
this.srcGroup.name = 'imgUrlsTestSrcImg';
|
|
this.srcGroupImage = document.getElementById('srcImg');
|
|
},
|
|
|
|
testBgImg: function() {
|
|
YAHOO.util.UserAction.mouseover('topmain');
|
|
// style.bgImg is "url('...')", but we can't rely on those quotes across browsers. indexOf is sufficient
|
|
YAHOO.util.Assert.areNotEqual(this.mainGroupImage.style.backgroundImage.indexOf(this.bgImgUrl), -1);
|
|
},
|
|
|
|
testSrcImg: function() {
|
|
YAHOO.util.UserAction.click('srcImgCont');
|
|
YAHOO.util.Assert.areEqual(this.srcGroupImage.src, this.srcImgUrl);
|
|
}
|
|
|
|
});
|
|
|
|
var classNameTestCase = new YAHOO.tool.TestCase({
|
|
/*
|
|
* Test case to check fetching by CSS class name
|
|
*/
|
|
|
|
name: 'Class Name Fetching',
|
|
|
|
setUp: function() {
|
|
this.duo1Url = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg';
|
|
this.duo2Url = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg';
|
|
this.duo1Image = document.getElementById('duo1');
|
|
this.duo2Image = document.getElementById('duo2');
|
|
// classname group
|
|
this.classGroup = new YAHOO.util.ImageLoader.group('duo1', 'mouseover');
|
|
this.classGroup.className = 'yui-imgload';
|
|
this.classGroup.name = 'classNameTest';
|
|
},
|
|
|
|
testClassNames: function() {
|
|
// We have to just check for the classname. Nothing else in the element will indicate the difference between before and after url application
|
|
YAHOO.util.Assert.areEqual(this.duo1Image.className, 'duo1 yui-imgload');
|
|
YAHOO.util.Assert.areEqual(this.duo2Image.className, 'yui-imgload');
|
|
YAHOO.util.UserAction.mouseover('duo1');
|
|
YAHOO.util.Assert.areEqual(this.duo1Image.className, 'duo1');
|
|
YAHOO.util.Assert.areEqual(this.duo2Image.className, '');
|
|
}
|
|
|
|
});
|
|
|
|
var addTriggerTestCase = new YAHOO.tool.TestCase({
|
|
/*
|
|
* Test case for checking the addTrigger method
|
|
*/
|
|
|
|
name: 'addTrigger test',
|
|
|
|
setUp: function() {
|
|
this.imageUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg';
|
|
this.triggerGroup = new YAHOO.util.ImageLoader.group('topmain', 'dblclick');
|
|
this.triggerGroup.registerBgImage('addlTrigger', this.imageUrl);
|
|
this.triggerGroup.addTrigger('addlTrigger', 'click');
|
|
this.triggerGroup.name = 'addTriggerGroup';
|
|
this.triggerImage = document.getElementById('addlTrigger');
|
|
},
|
|
|
|
testAddTrigger: function() {
|
|
YAHOO.util.Assert.areEqual(this.triggerImage.style.backgroundImage, '');
|
|
YAHOO.util.UserAction.click('addlTrigger');
|
|
YAHOO.util.Assert.areNotEqual(this.triggerImage.style.backgroundImage.indexOf(this.imageUrl), -1);
|
|
}
|
|
|
|
});
|
|
|
|
var customTriggerTestCase = new YAHOO.tool.TestCase({
|
|
/*
|
|
* Test case for checking adding custom event triggers to a group
|
|
*/
|
|
|
|
name: 'custom trigger test',
|
|
|
|
setUp: function() {
|
|
this.imageUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg';
|
|
this.customEvent = new YAHOO.util.CustomEvent('imageloader_unit_test_for_custom_trigger');
|
|
this.triggerGroup = new YAHOO.util.ImageLoader.group();
|
|
this.triggerGroup.addCustomTrigger(this.customEvent);
|
|
this.triggerGroup.registerBgImage('customTrigger', this.imageUrl);
|
|
this.triggerGroup.name = 'customTriggerGroup';
|
|
this.triggerImage = document.getElementById('customTrigger');
|
|
},
|
|
|
|
testCustomTrigger: function() {
|
|
YAHOO.util.Assert.areEqual(this.triggerImage.style.backgroundImage, '');
|
|
this.customEvent.fire();
|
|
YAHOO.util.Assert.areNotEqual(this.triggerImage.style.backgroundImage.indexOf(this.imageUrl), -1);
|
|
}
|
|
|
|
});
|
|
|
|
var imgSizingTestCase = new YAHOO.tool.TestCase({
|
|
/*
|
|
* Test case to check post-fetch resizing of image, as well as 'visibility' setting
|
|
*/
|
|
|
|
name: 'Image Sizing',
|
|
|
|
setUp: function() {
|
|
this.imageUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg';
|
|
this.sizerGroup = new YAHOO.util.ImageLoader.group('sizerImg', 'mouseover');
|
|
this.sizerGroup.name = 'imgSizingGroup';
|
|
var sizerILImg = this.sizerGroup.registerSrcImage('sizerImg', this.imageUrl, 200, 150);
|
|
sizerILImg.setVisible = true;
|
|
this.sizerImage = document.getElementById('sizerImg');
|
|
},
|
|
|
|
testImageVisibility: function() {
|
|
YAHOO.util.UserAction.mouseover('sizerImg');
|
|
YAHOO.util.Assert.areEqual(this.sizerImage.style.visibility, 'visible');
|
|
},
|
|
|
|
testImageSizing: function() {
|
|
// not sure if we can trust order, so make sure trigger was fired
|
|
YAHOO.util.UserAction.mouseover('sizerImg');
|
|
YAHOO.util.Assert.areEqual(this.sizerImage.height, 150);
|
|
YAHOO.util.Assert.areEqual(this.sizerImage.width, 200);
|
|
}
|
|
|
|
});
|
|
|
|
var triggerRemovalTestCase = new YAHOO.tool.TestCase({
|
|
/*
|
|
* Test case to check removing the trigger from groups that share the same trigger.
|
|
* During development, there was an initial problem of when one group fired, the other group's trigger was removed.
|
|
* This was due to the way the fetch() methods were passed to Event's addListener(); fixed by wrapping the fetch calls.
|
|
* More details available in js code comments, in addTrigger() method
|
|
*/
|
|
|
|
name: "Trigger Removal for Competing Groups' Triggers",
|
|
|
|
setUp: function() {
|
|
this.imageAUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg';
|
|
this.imageZUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg';
|
|
this.groupA = new YAHOO.util.ImageLoader.group('sharedTrigger1', 'click');
|
|
this.groupA.registerBgImage('sharedTrigger1', this.imageAUrl);
|
|
this.groupA.name = 'triggerRemovalGroup(A)';
|
|
this.groupZ = new YAHOO.util.ImageLoader.group('sharedTrigger1', 'click');
|
|
this.groupZ.registerBgImage('sharedTrigger2', this.imageZUrl);
|
|
this.groupZ.addTrigger('sharedTrigger2', 'click');
|
|
this.groupZ.name = 'triggerRemovalGroup(Z)';
|
|
this.groupAImage = document.getElementById('sharedTrigger1');
|
|
this.groupZImage = document.getElementById('sharedTrigger2');
|
|
},
|
|
|
|
testCompetingTriggers: function() {
|
|
YAHOO.util.UserAction.click('sharedTrigger2');
|
|
YAHOO.util.Assert.areNotEqual(this.groupZImage.style.backgroundImage.indexOf(this.imageZUrl), -1);
|
|
YAHOO.util.Assert.areEqual(this.groupAImage.style.backgroundImage, '');
|
|
YAHOO.util.UserAction.click('sharedTrigger1');
|
|
YAHOO.util.Assert.areNotEqual(this.groupAImage.style.backgroundImage.indexOf(this.imageAUrl), -1);
|
|
}
|
|
|
|
});
|
|
|
|
var foldConditionalTestCase = new YAHOO.tool.TestCase({
|
|
/*
|
|
* Test case to check fold-conditional loading of a group
|
|
* We're faking the viewport size and fold determination so that everything will be dependable in any situation (including automated runs)
|
|
*/
|
|
|
|
name: "Fold Conditional Loading",
|
|
|
|
setUp: function() {
|
|
this.imageTopUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg';
|
|
this.imageBotUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg';
|
|
this.foldGroup = new YAHOO.util.ImageLoader.group();
|
|
this.foldGroup.registerSrcImage('foldImgTop', this.imageTopUrl);
|
|
this.foldGroup.registerSrcImage('foldImgBottom', this.imageBotUrl);
|
|
this.foldGroup.foldConditional = true;
|
|
this.foldGroup.name = 'foldConditionalGroup';
|
|
this.groupTopImage = document.getElementById('foldImgTop');
|
|
this.groupBotImage = document.getElementById('foldImgBottom');
|
|
|
|
// override the foldCheck function of this group, because we'll need to fake things to make them dependable
|
|
this.foldGroup._foldCheck = function() {
|
|
var hLimit = 300;
|
|
var wLimit = 1000;
|
|
for (var id in this._imgObjs) {
|
|
if (YAHOO.lang.hasOwnProperty(this._imgObjs, id)) {
|
|
var elPos = YAHOO.util.Dom.getXY(this._imgObjs[id].domId);
|
|
if (elPos[1] < hLimit && elPos[0] < wLimit) {
|
|
this._imgObjs[id].fetch();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
},
|
|
|
|
testFoldCheck: function() {
|
|
this.foldGroup._foldCheck();
|
|
YAHOO.util.Assert.areEqual(this.groupTopImage.src, this.imageTopUrl);
|
|
YAHOO.util.Assert.areEqual(this.groupBotImage.src, '');
|
|
}
|
|
|
|
});
|
|
|
|
var imageLoaderTestSuite = new YAHOO.tool.TestSuite('YUI ImageLoader Utility');
|
|
imageLoaderTestSuite.add(imgUrlsTestCase);
|
|
imageLoaderTestSuite.add(classNameTestCase);
|
|
imageLoaderTestSuite.add(addTriggerTestCase);
|
|
imageLoaderTestSuite.add(customTriggerTestCase);
|
|
imageLoaderTestSuite.add(imgSizingTestCase);
|
|
imageLoaderTestSuite.add(triggerRemovalTestCase);
|
|
imageLoaderTestSuite.add(foldConditionalTestCase);
|
|
|
|
YAHOO.tool.TestRunner.add(imageLoaderTestSuite);
|
|
|
|
YAHOO.util.Event.onDOMReady(function() {
|
|
var logger = new YAHOO.tool.TestLogger();
|
|
if (parent && parent != window) {
|
|
YAHOO.tool.TestManager.load();
|
|
} else {
|
|
YAHOO.tool.TestRunner.run();
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|