node.html revision 3d123dc1fb1ccac9d89183907dfeb27602177b28
<html>
<head>
<title>Node Test Suite</title>
body {
width:1000px;
}
#doc {
min-height:200px;
}
#get-style {
background:#ccc;
float:left;
font-size:10px;
height:10em;
padding:15px 0;
width:200px;
}
.mask {
background:#ccc;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#test-xy {
background:green;
position:absolute;
height:10px;
width:10px;
}
#test-computed {
width:50%;
margin:auto;
padding:10px;
z-index: 2;
}
#test-scroll {
height: 100px;
width: 100px;
overflow:auto;
}
#test-scroll p {
height:1000px;
width:1000px;
}
</style>
</style>
</head>
<body class="yui-skin-sam">
<div id="test-append"></div>
<div id="test-xy"></div>
<div id="test-scroll">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="doc" class="doc-wrap">
<form id="test-form" class="test-class" action="#">
<input name="test-data1" value="0">
<textarea name="test-data2" value="0"></textarea>
<button name="test-data3" value="0">button</button>
<button name="test-data4">button</button>
</form><div id="test-class">test class</div>
<div id="test-prop" tabindex="4">text<em id="test-contains">test<span></span></em><strong>node</strong></div>
<div id="set-style"><div class="bar" id="bar">setStyle</div>foo<div>blah</div></div>
<div id="get-style">getStyle</div>
<div id="baz">baz</div>
text
<div id="test-extras">extras</div>
<div id="test-children">foo <span>bar</span> <strong>baz</strong> </div>
</div>
<div id="inline-style" style="color: green">inline style</div>
<div id="foo"></div>
<div id="test-computed">test computed style</div>
<form>
<select id="test-select" name="test-select">
<option value="0">foo</option>
<option value="1">bar</option>
<option>baz</option>
</select>
</form>
<div id="test-nodes"> <ul> <li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
</div>
<script type="text/javascript">
YUI({ base: '/build/', filter: 'debug' }).use('*', function(Y) {
var tool = YAHOO.tool,
var Assert = YAHOO.util.Assert;
var ArrayAssert = YAHOO.util.ArrayAssert;
var logger = new tool.TestLogger(null, { height: '800px', fontSize: '100%' });
var handleClick = function(e) {
//alert('click');
e.currentTarget.detach('click', handleClick);
};
Y.Node.get('html').on('click', handleClick);
var byId = function(id) {
return document.getElementById(id);
};
var $ = Y.Selector.query;
name: 'Y.Node Instance',
test_get: function() {
var node = Y.get('#test-nodes'),
nodes = Y.all('#test-nodes *');
// return null
// return zero length collection
// return 1
Assert.areEqual(byId('test-nodes'), Y.Node.getDOMNode(Y.get('#test-nodes')), 'Y.get("#test-nodes")');
Assert.areEqual(byId('test-nodes'), Y.Node.getDOMNode(Y.get('#test-nodes')), 'Y.get("#test-nodes")');
Assert.areEqual(byId('test-nodes').getElementsByTagName('li')[0],
Assert.areEqual(byId('test-nodes').getElementsByTagName('li')[1],
// return more than 1
ArrayAssert.itemsAreEqual($('#test-select option'), Y.NodeList.getDOMNodes(Y.all('#test-select option')), 'Y.get("#test-select option")');
Assert.areEqual(nodes.size(), Y.all('#test-nodes *').size(), 'nodes.size() === Y.all("#test-nodes").size()');
},
test_each: function() {
var count = 0,
nodes = Y.all('#test-nodes *'),
index, instance, isNode;
nodes.each(function(node, i, list) {
count++;
index = i;
instance = list;
isNode = (node instanceof Y.Node);
});
Assert.areEqual(nodes, instance, 'nodes === instance');
Assert.isTrue(isNode, 'node instanceof Y.Node');
},
test_getters: function() {
var id = 'test-nodes',
element = byId(id),
node = Y.get('#' + id),
nodes = Y.all('#' + id + ' *');
Assert.areEqual(null, node.get('nodeValue'), 'nodeValue === null');
Assert.areEqual('DIV', node.get('nodeName'), 'nodeName === "DIV"');
Assert.areEqual('UL', nodes.get('nodeName')[0], 'nodeName === "UL"');
Assert.areEqual(element.firstChild.nextSibling.nodeName, node.get('firstChild').get('nextSibling').get('nodeName'), 'node.firstChild.nextSibling.nodeName"');
Assert.areEqual(element.lastChild.nodeName, node.get('lastChild').get('nodeName'), 'lastChild.nodeName"');
Assert.areEqual('test-nodes', nodes.get('parentNode')[0].get('id'), 'nodes.get(parentNode)[0].get("id") === test-nodes');
Assert.areEqual(element.firstChild.nodeType, node.get('firstChild').get('nodeType'), 'firstChild.get("nodeType")');
Assert.areEqual(element.offsetParent.tagName, node.get('offsetParent').get('tagName'), 'offsetParent.tagName === offsetParent.tagName');
Assert.areEqual('item 1', Y.Lang.trim(nodes.get('children')[0].get('text')[0]), 'nodes.get("children")[0].get("text")[0]');
ArrayAssert.itemsAreEqual($('#test-select option'),
Y.NodeList.getDOMNodes(Y.get('#test-select').get('options')),
'Y.get("#test-select.get("options")');
Assert.areEqual(2, node.get('children').size(), 'get("children")');
// size() is deprecated on Node
Assert.areEqual(byId('test-nodes').childNodes.length, node.get('childNodes').get('tagName').length, 'node.get("childNodes")');
ArrayAssert.itemsAreEqual(byId('test-nodes').childNodes.length, node.get('childNodes').get('length').length, "node.get('childNodes').get('length')");
Assert.areEqual(element.lastChild.nodeName, node.get('lastChild.nodeName'), 'node.get("lastChild.nodeName")');
Assert.areEqual(element.lastChild.previousSibling.nodeName, node.get('lastChild').get('previousSibling').get('nodeName'), 'node.lastChild.previousSibling.nodeName');
},
test_create: function() {
var id = 'test-nodes',
element = byId(id),
node = Y.get('#' + id);
Assert.areEqual('fresh', node.create('<div id="fresh">fresh</div>').get('id'), 'node.create from string)');
},
test_setter: function() {
var id = 'test-prop',
element = byId(id),
node = Y.get('#' + id),
nodes = Y.all('#test-nodes *');
var childNodes = Y.get('body').get('childNodes');
childNodes.set('title', 'foo bar');
Assert.isTrue(byId('test-nodes').title == 'foo bar', 'Y.get("body").get("childNodes").set("title")');
node.set('foo', 'foo');
node.set('title', 'my title');
nodes.set('className', 'foo');
'nodes.item(nodes.size - 2).get("className")');
/* // chains attrs currently broken
Y.get('body > form').set('test-select.selectedIndex', 2);
Assert.areEqual(2, byId('test-select').selectedIndex,
'Y.get("body > form").set("test-select.selectedIndex", 2)');
*/
},
test_dom_methods: function() {
var id = 'test-prop';
var element = byId(id);
var parent = Y.Node.get(element.parentNode);
var node = Y.Node.get('#test-prop');
Assert.areEqual(element.getElementsByTagName('em')[0].nodeName, node.getElementsByTagName('em').item(0).get('nodeName'), 'getElementsByTagName');
var insertNode = document.createElement('div');
Y.stamp(insertNode);
insertNode.innerHTML = 'inserted node';
Assert.isTrue(Y.get('body').get('lastChild').compareTo(Y.get('#test-append')), 'get("body").appendChild(Y.get("#test-append"))');
Assert.areEqual(byId('test-append'), Y.Node.getDOMNode(Y.get('body').get('lastChild')), 'get("body").appendChild(Y.get([0]"#test-append"))');
Assert.areEqual('inserted node', node.appendChild(insertNode).get('innerHTML'), 'appendChild(element input)');
Assert.areEqual('inserted node', node.removeChild(insertNode).get('innerHTML'), 'removeChild(element input)');
Assert.areEqual('inserted node', node.appendChild(Y.get(insertNode)).get('innerHTML'), 'appendChild(Node input)');
Assert.areEqual('inserted node', node.removeChild(Y.get(insertNode)).get('innerHTML'), 'removeChild(Node input)');
Assert.areEqual(1, node.cloneNode().get('nodeType'), 'cloneNode()');
// TODO: test deep clone with bound descendant
Assert.isTrue(node.get('childNodes').size() === node.cloneNode(true).get('childNodes').size(), 'node.get("childNodes").size() === node.cloneNode(true).get("childNodes").size()');
Assert.isTrue(node.hasChildNodes(), 'hasChildNodes()');
Assert.isTrue(node.compareTo(node), 'compareTo(node)');
Assert.isTrue(node.contains(byId('test-contains')), 'contains()');
Assert.isTrue(node.contains(node), 'contains() self');
Assert.isTrue(node.contains(element), 'contains() self');
Assert.isFalse(node.contains(document.getElementsByTagName('div')), 'contains() false positive for collection');
Assert.areEqual('doc', node.ancestor(function(el) {
return el.get('id') === 'doc';
}).get('id'), 'ancestor');
Assert.isNull(node.ancestor(function(el) {
return el.hasAttribute('foo');
}), 'ancestor');
Assert.areEqual(byId('test-contains'), Y.Node.getDOMNode(node.getById('test-contains')), 'node.getById("test-contains")');
Assert.isTrue(Y.get('input[name=test-data1]').hasAttribute('value'), 'input.hasAttribute("value")');
Assert.isTrue(Y.get('textarea[name=test-data2]').hasAttribute('value'), 'textarea.hasAttribute("value")');
Assert.areEqual('0', Y.get('textarea[name=test-data2]').getAttribute('value'), 'textarea.getAttribute("value")');
Assert.areEqual('0', Y.get('button[name=test-data3]').getAttribute('value'), 'button.getAttribute("value")');
Assert.areEqual('0', Y.get('select[name=test-select] option:nth-child(1)').getAttribute('value'), 'option1.getAttribute("value") (from innerText)');
Assert.areEqual('1', Y.get('select[name=test-select] option:nth-child(2)').getAttribute('value'), 'option2.getAttribute("value") (from innerText)');
Assert.areEqual('', Y.get('select[name=test-select] option:nth-child(3)').getAttribute('value'), 'option3.getAttribute("value") (from innerText)');
},
test_fragment: function() {
var frag = Y.get('document').invoke('createDocumentFragment'),
element = byId('test-append');
frag.appendChild(element);
Y.get('body').appendChild(frag);
},
test_screen: function() {
var id = 'test-prop';
var element = byId(id);
var parent = Y.Node.get(element.parentNode);
var node = Y.Node.get(element);
Assert.areEqual(document.documentElement.scrollLeft, newNode.get('docScrollX'), 'newNode.get("docScrollX")');
Assert.areEqual(document.documentElement.scrollTop, node.get('docScrollY'), 'node.get("docScrollY")');
node.setXY([100, 100]);
},
test_region: function() {
ArrayAssert.itemsAreEqual(Y.DOM.region(Y.DOM.byId('doc')), Y.Node.get('#doc').get('region'), 'node.get("region")');
},
test_classes: function() {
var id = 'test-class';
var element = byId(id);
var parent = Y.Node.get(element.parentNode);
var node = Y.Node.get(element);
Assert.isTrue(node.get('previousSibling').hasClass('test-class'), 'node.get("previousSibling").hasClass("test-class")');
node.addClass('foo');
node.removeClass('foo');
node.addClass('foo');
Y.Node.get('body').get('childNodes').addClass('foo');
Assert.isTrue(byId('test-class').className == 'foo', 'NodeList.addClass');
node.replaceClass('foo', 'bar');
},
test_setStyle: function() {
var element = byId('set-style'),
node = Y.Node.get(element),
nodes = node.get('childNodes');
node.setStyle('width', '20em');
Assert.areEqual('20em', element.style.width, "setStyle('width' '20em')");
node.setStyle('marginTop', '1em');
Assert.areEqual('1em', element.style.marginTop, "setStyle('marginTop','1em')");
node.setStyle('opacity', 0.5);
Assert.areEqual(0.5, node.getStyle('opacity'), "setStyle('opacity', 0.5)");
node.setStyle('float', 'left');
Assert.areEqual('left', node.getStyle('float'), "setStyle('float', 'left')");
node.setStyle('float', 'left');
Assert.areEqual('left', node.getStyle('float'), "setStyle('float', 'left')");
nodes.setStyle('marginTop', '1em');
Assert.areEqual('1em', nodes.getStyle('marginTop')[2], "setStyle('marginTop', '1em'");
},
test_getStyle: function() {
var node = Y.Node.get('#get-style');
node.setStyle('opacity', 0.5);
Assert.areEqual('100px', node.getStyle('height'), "getStyle('height')");
Assert.areEqual('200px', node.getStyle('width'), "getStyle('width)'");
Assert.areEqual('visible', node.getStyle('visibility'), "visibility");
node.setStyle('visibility', 'hidden');
Assert.areEqual('hidden', node.getStyle('visibility'), "visibility");
node.setStyle('visibility', 'visible');
},
test_getComputedStyle: function() {
var node = Y.get('#test-computed');
var domNode = byId('test-computed');
domNode.style.zoom = 1;
domNode.style.border = 'medium solid #000';
var bw = (Y.UA.ie) ? 4 : 3;
var h = node.get('offsetHeight') - 20 - 2 * bw;
Assert.areEqual(bw + 'px', node.getComputedStyle('borderTopWidth'), "borderTopWidth: medium");
Assert.areEqual(h, Math.round(parseFloat(node.getComputedStyle('height'))), "height: auto (offset minus padding and border)");
domNode.style.padding = '1em';
Assert.areEqual('13px', node.getComputedStyle('paddingTop'), "padding 10em");
domNode.style.margin = 'auto';
Assert.areEqual('0px', node.getComputedStyle('marginTop'), "margin auto");
Assert.areEqual('500px', node.getComputedStyle('width'), "percent width (from CSS)");
Assert.areEqual('visible', node.getComputedStyle('visibility'), "visibility");
domNode.parentNode.style.visibility = 'hidden';
Assert.areEqual('hidden', node.getComputedStyle('visibility'), "visibility");
domNode.parentNode.style.visibility = 'visible';
},
test_setStyles: function() {
var node = byId('set-style');
var element = Y.Node.get(node);
'top': '5px',
'right': '10em'
});
},
test_rootNode: function() {
var element = byId('test-prop');
var node = Y.Node.get(element, null, true);
Assert.isNull(Y.get('body', null, true).get('parentNode'), "Y.get('body', null, true).get('parentNode')");
Assert.isTrue(node.get('firstChild').compareTo(element.firstChild), "node.firstChild() (is textNode)");
},
test_selector: function() {
var id = 'test-prop',
element = byId(id),
node = Y.get('#' + id),
parent = Y.Node.get(element.parentNode),
nodes = Y.all('#test-nodes *');
// Selector methods
},
test_window: function() {
var win = Y.get(window);
//Assert.areEqual(window, Y.Node.getDOMNode(Y.get('document').get('defaultView')), 'win.get(document)');
},
test_windowSize: function() {
},
test_scroll: function() {
Y.get('#test-scroll').set('scrollTop', 100);
Y.get('#test-scroll').set('scrollLeft', 200);
Assert.areEqual(100, byId('test-scroll').scrollTop, 'test-scroll.set("scrollTop", 100)');
Assert.areEqual(200, byId('test-scroll').scrollLeft, 'test-scroll.set("scrollLeft", 200)');
document.body.style.height = '5000px';
document.body.style.width = '5000px';
Y.get(window).set('scrollTop', 100);
Y.get(window).set('scrollLeft', 200);
Y.get(document).set('scrollTop', 200);
Y.get(document).set('scrollLeft', 100);
window.scrollTo(0, 0);
}
}));
name: 'Document Node',
test_props: function() {
var mask = document.createElement('div');
mask.className = 'mask';
document.body.appendChild(mask);
var doc = Y.Node.get('document');
mask.style.height = doc.get('docHeight') + 'px';
mask.style.width = doc.get('docWidth') + 'px';
Y.DOM.setStyle(mask, 'opacity', 0.4);
Assert.areEqual(document.documentElement.scrollLeft, doc.get('docScrollX'), 'doc.get("docScrollX")');
Assert.areEqual(document.documentElement.scrollTop, doc.get('docScrollY'), 'doc.get("docScrollY")');
Assert.areEqual('DIV', Y.Node.get('#test-prop').get('nodeName'), 'query("test-prop")');
}
}));
name: 'Instance Y.NodeExtras',
test_methods: function() {
var node = byId('test-extras');
var element = Y.Node.get('#test-extras');
}
}));
tool.TestRunner.add(suite);
// allow window scroll event to happen post-onload
Y.on('load', function() {
setTimeout(function() {
}, 1);
}, window);
});
</script>
</body>
</html>