node.html revision 41d238de86f200df893df9c8cd481341a75e6b9e
<html>
<head>
<title>Node Test Suite</title>
body {
}
#doc {
min-height:200px;
width:1000px;
border:10px solid red;
padding:1em;
}
#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 {
border: medium solid #000;
position:relative;
width:50%;
margin:auto;
padding:10px;
z-index: 2;
zoom:1;
}
#test-scroll {
height: 100px;
width: 100px;
overflow:auto;
}
#test-scroll p {
height:1000px;
width:1000px;
}
button {
display:block;
}
.yui3-skin-sam .yui-console-entry-pass .yui-console-entry-cat {
background: #070;
color: #fff;
}
.yui3-skin-sam .yui-console-entry-fail .yui-console-entry-cat {
background: #700;
color: #fff;
}
</style>
</head>
<body class="yui3-skin-sam">
<div id="test-append"></div>
<div id="test-xy"></div>
<div id="test-remove"></div>
<div id="test-replace"><p>replace me</p></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="test-frag">
<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>
<p>Lorem ipsum dolor <em>sit</em>.</p>
</div>
<div id="doc" class="doc-wrap">
<form id="test-form" class="test-class" action="#">
<label for="test-text-value"><em>label</em></label>
<input name="test-text-value" id="test-text-value" value="text value">
<input name="test-text-novalue">
<textarea name="test-textarea-value" value="textarea value"></textarea>
<textarea name="test-textarea-novalue"></textarea>
<textarea name="test-textarea-textvalue">textarea text</textarea>
<button name="test-button-value" value="button value">button</button>
<button name="test-button-novalue"></button>
<button name="test-button-textvalue">button text</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 id="test-empty-children"></div>
</div>
<div id="inline-style" style="color: green">inline style</div>
<div id="foo" aria-checked="true"></div>
<div id="test-computed">test computed style</div>
<form id="form.foo@bar:baz">
<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 class="bar">item 1</li>
<li>item 2</li>
<li>item 3</li>
<li class="bar">item 4</li>
</ol>
</div>
<table id="test-table">
<tr><td id="test-td"><div><div>grandchild of td</div></div></td></tr>
</table>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<div id="test-insert-html">foo</div>
<div id="test:colon">
<h2>test</h2>
</div>
<ol id="test-swap">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
<div id="_funky:id{$400}">
<h2>test</h2>
</div>
<div id="yui-log"></div>
<script type="text/javascript">
YUI({base: '/build/', filter: 'raw'}).use('selector-css3', 'anim', 'console', 'test', 'node-event-simulate', function(Y) {
var Assert = Y.Assert,
ArrayAssert = Y.ArrayAssert,
suite = new Y.Test.Suite("yuisuite");
new Y.Console({node: '#yui-log', height: '1000px' }).render('#yui-log');
var byId = function(id) {
return document.getElementById(id);
};
var $ = Y.Selector.query;
suite.add( new Y.Test.Case({
name: 'Y.Node Instance',
test_get: function() {
var node = Y.one('#test-nodes'),
nodes = Y.all('#test-nodes *');
// return null
Y.one("a[href$='?t=5']");
// return zero length collection
// return 1
Assert.areEqual(byId('test-nodes'), Y.Node.getDOMNode(Y.one('#test-nodes')), 'Y.one("#test-nodes")');
Assert.areEqual(byId('test-nodes'), Y.Node.getDOMNode(Y.one('#test-nodes')), 'Y.one("#test-nodes")');
Assert.areEqual(byId('test-nodes').getElementsByTagName('li')[0],
Assert.areEqual(byId('test-nodes').getElementsByTagName('li')[1],
Assert.areEqual(byId('test-nodes').getElementsByTagName('li')[1],
Assert.areEqual(byId('form.foo@bar:baz'), Y.Node.getDOMNode(Y.one('[id="form.foo@bar:baz"]')), "[id=form.foo@bar:baz]");
var firstChild = Y.one('body :first-child');
Assert.isFalse(firstChild._node === Y.one('body :first-child')._node, "wrong node: Y.one('body :first-child')");
Assert.areEqual(Y.Selector.query('body :first-child', null, true), Y.one('body :first-child')._node, "body :first-child === #test-append");
// return more than 1
ArrayAssert.itemsAreEqual($('#test-select option'), Y.NodeList.getDOMNodes(Y.all('#test-select option')), 'Y.one("#test-select option")');
Assert.areEqual(nodes.size(), Y.all('#test-nodes *').size(), 'nodes.size() === Y.all("#test-nodes").size()');
ArrayAssert.itemsAreEqual(Y.Selector.query('div'), Y.all(Y.Selector.query('div'))._nodes, "Y.all(Y.Selector.query('div'))");
// Firefox fails due to Firebug pollutes document.queryAll but not document.getElementsByTagName
//ArrayAssert.itemsAreEqual(document.getElementsByTagName('div'), Y.all(Y.Selector.query('div'))._nodes, "Y.all(Y.Selector.query('div'))");
ArrayAssert.itemsAreEqual(Y.Selector.query('input[name]'), Y.all(Y.Selector.query('input[name]'))._nodes, "Y.all(Y.Selector.query('input[name]'))");
ArrayAssert.itemsAreEqual(Y.Selector.query('.foo'), Y.all(Y.Selector.query('.foo'))._nodes, "Y.all(Y.Selector.query('.foo'))");
var frameDoc = Y.one('iframe').get('contentWindow.document');
"frameDoc.one('#demo li').get('innerHTML')");
Assert.areEqual(byId('test-text-value'),
Y.one('doc').one('.test-class #test-text-value')._node,
"Y.one('doc').one('.test-class #test-text-value')");
},
test_each: function() {
var count = 0,
nodes = Y.all('#test-nodes *'),
index;
nodes.each(function(node, i, list) {
count++;
index = i;
Assert.areEqual(nodes, list, 'nodes === instance');
Assert.areEqual(node, this, 'this === node');
});
},
test_some: function() {
var nodes = Y.all('#test-nodes *'),
index, instance, isNode;
Assert.isTrue(nodes.some(function(node, i, list) {
return true;
}), 'nodes.some(function() { return true; })');
Assert.isFalse(nodes.some(function(node, i, list) {
}), 'nodes.some(function() {})');
},
test_indexOf: function() {
},
test_getters: function() {
var id = 'test-nodes',
element = byId(id),
node = Y.one('#' + 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').get('id')[0], '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]');
Assert.areEqual('item 1', Y.Lang.trim(nodes.get('children')[0].get('text')[0]), 'nodes.get("children")[0].get("text")[0]');
textContainer.set('text', 'bar');
ArrayAssert.itemsAreEqual($('#test-select option'),
Y.NodeList.getDOMNodes(Y.one('#test-select').get('options')),
'Y.one("#test-select.get("options")');
Assert.areEqual(2, node.get('children').size(), 'get("children")');
Assert.areEqual(0, Y.one('#test-empty-children').get('children').size(), "Y.one('#test-empty-children').get('children')");
// size() is deprecated on Node
Assert.areEqual(byId('test-nodes').childNodes.length, node.get('childNodes').size(), 'node.get("childNodes").size()');
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');
Assert.areEqual(byId('test-prop').tabIndex, Y.one('#test-prop').get('tabIndex'), 'Y.one("#test-prop").get("tabIndex")');
Assert.areEqual(byId('doc').tabIndex, Y.one('#doc').get('tabIndex'), 'Y.one("#doc".get("tabIndex"))');
Assert.areEqual(byId('link-1').tabIndex, Y.one('#link-1').get('tabIndex'), 'Y.one("#link1".get("tabIndex"))');
Assert.areEqual(byId('link-2').tabIndex, Y.one('#link-2').get('tabIndex'), 'Y.one("#link1".get("tabIndex"))');
Assert.areEqual(undefined, Y.one('form').get('childNodes')._nodes.item, 'convert live list to static');
Assert.isTrue(Y.all('input').get('parentNode') instanceof Y.NodeList, "Y.all('input').get('parentNode')");
},
test_create: function() {
var id = 'test-nodes',
element = byId(id),
node = Y.one('#' + id);
Assert.areEqual('fresh', node.create('<div id="fresh">fresh</div>').get('id'), 'node.create from string)');
node.appendChild(option);
Assert.isTrue(Y.Node.getDOMNode(option).selected, "Y.Node.create('<option>test</option>').set('selected', 'selected'))");
var html = '<li><a href=""></a></li>';
node = Y.Node.create(html);
html = 'baz';
node = Y.Node.create(html);
html = '<div>bar</div>';
node = Y.Node.create(html);
Assert.areEqual('3', node.get('firstChild').get('nodeType'), "node.get('firstChild').get('nodeType')");
Assert.areEqual('3', Y.Node.getDOMNode(node.get('firstChild')).nodeType, "Y.Node.getDOMNode(node.get('firstChild')).nodeType");
// test setContent with NodeList
html = '<div>foo</div>';
Assert.areEqual(html, node.get('innerHTML').toLowerCase(), "node.setContent(Y.all(Y.Node.create(html)))");
},
test_setter: function() {
var id = 'test-prop',
element = byId(id),
node = Y.one('#' + id),
nodes = Y.all('#test-nodes *');
var childNodes = Y.one('body').get('childNodes');
childNodes.set('title', 'foo bar');
Assert.isTrue(byId('test-nodes').title == 'foo bar', 'Y.one("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")');
var attrMap = {
className: 'fooclass',
title: 'new title'
};
node.setAttrs(attrMap);
var getAttrs = node.getAttrs(['className', 'title']);
Y.one('#test-select').set('selectedIndex', 2);
"Y.one('#test-select').set('selectedIndex', 2)");
Y.one('body > form').set('test-select.selectedIndex', 2);
Assert.areEqual(2, byId('test-select').selectedIndex,
'Y.one("body > form").set("test-select.selectedIndex", 2)');
var index = Y.one('#test-select').one('option[value=1]').set('selected', true);
"Y.one('#test-select').set('selectedIndex', 1)");
Y.one('#test-select').set('value', 1);
Y.one('#test-select').set('value', 'baz');
Assert.areEqual('baz', Y.one('#test-select').get('value'), "Y.one('#test-select').set('value', 1)");
},
test_dom_methods: function() {
var id = 'test-prop';
var element = byId(id);
var parent = Y.one(element.parentNode);
var node = Y.one('#test-prop');
var xmlNode = Y.one(document.createElement('xml'));
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.one('body').get('lastChild').compareTo(Y.one('#test-append')), 'get("body").appendChild(Y.one("#test-append"))');
Assert.areEqual(byId('test-append'), Y.Node.getDOMNode(Y.one('body').get('lastChild')), 'get("body").appendChild(Y.one([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.one(insertNode)).get('innerHTML'), 'appendChild(Node input)');
Assert.areEqual('inserted node', node.removeChild(Y.one(insertNode)).get('innerHTML'), 'removeChild(Node input)');
var clone = node.cloneNode();
Assert.isFalse(node === clone, 'node === node.cloneNode()');
Assert.areEqual(1, clone.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()');
clone = Y.one('.bar').cloneNode(true);
Y.one('body').appendChild(clone);
clone.set('id', 'new-bar');
Assert.isTrue(node.hasChildNodes(), 'hasChildNodes()');
Assert.isTrue(node.compareTo(node), 'compareTo(node)');
Assert.isFalse(node.compareTo(null), 'compareTo(null)');
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.getAttribute('foo') !== '';
}), 'ancestor');
Assert.areEqual(node, node.ancestor('div', true));
Assert.areEqual(byId('test-contains'), Y.Node.getDOMNode(node.getById('test-contains')), 'node.getById("test-contains")');
node.removeAttribute('tabIndex');
/*
"node.getAttribute('tabIndex') === node.get('tabIndex')");
*/
Assert.areEqual('0', Y.one('select[name=test-select] option:nth-child(1)').getAttribute('value'), 'option1.getAttribute("value") (from innerText)');
Assert.areEqual('1', Y.one('select[name=test-select] option:nth-child(2)').getAttribute('value'), 'option2.getAttribute("value") (from innerText)');
Assert.areEqual('', Y.one('select[name=test-select] option:nth-child(3)').getAttribute('value'), 'option3.getAttribute("value") (from innerText)');
Assert.areEqual('http://www.yahoo.com/foo', Y.one('#link-1').getAttribute('href'), "Y.one('#link1').getAttribute('href')");
Assert.areEqual('foo.html', Y.one('#link-2').getAttribute('href'), "Y.one('#link1').getAttribute('href')");
},
test_fragment: function() {
var frag = Y.one('document').invoke('createDocumentFragment'),
element = byId('test-append');
frag.appendChild(element);
Y.one('body').appendChild(frag);
},
test_screen: function() {
var id = 'test-prop';
var element = byId(id);
var parent = Y.one(element.parentNode);
var node = Y.one(element);
node = Y.one('#test-xy');
node.setXY([100, 100]);
var xy = node.getXY();
var x = Math.round(xy[0]);
var y = Math.round(xy[1]);
ArrayAssert.itemsAreEqual([100, 100], [x, y], 'Node.getXY("foo", "bar")');
},
test_region: function() {
ArrayAssert.itemsAreEqual(Y.DOM.region(Y.DOM.byId('doc')), Y.one('#doc').get('region'), 'node.get("region")');
},
test_classes: function() {
var id = 'test-class';
var element = byId(id);
var parent = Y.one(element.parentNode);
var node = Y.one(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.one('body').get('childNodes').addClass('foo');
Assert.isTrue(byId('test-class').className == 'foo', 'NodeList.addClass');
node.replaceClass('foo', 'bar');
var nodes = Y.all('#test-nodes li');
nodes.addClass('foo').addClass('bar');
nodes.each(function(n) {
Assert.isTrue(n.hasClass('foo'));
Assert.isTrue(n.hasClass('bar'));
});
nodes.removeClass('bar');
nodes.each(function(n) {
Assert.isFalse(n.hasClass('bar'));
});
Y.DOM.addClass(node, 'foo');
Y.DOM.replaceClass('foo', 'foo');
Assert.isTrue(Y.DOM.hasClass(node, 'foo'));
node.addClass('foo bar baz');
Assert.areEqual('foo bar baz', node._node.className);
},
test_toggle: function() {
var node = Y.one('#test-class');
node.toggleClass('foo');
node.toggleClass('foo');
node.toggleClass('foo', false);
node.toggleClass('foo');
node.toggleClass('foo', true);
},
test_setStyle: function() {
var element = byId('set-style'),
node = Y.one(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.one('#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.one('#test-computed'),
domNode = byId('test-computed'),
w = node.get('offsetWidth'),
h = node.get('offsetHeight');
w = w - 20 - 2 * bw;
h = h - 20 - 2 * bw;
}
Assert.areEqual(h, Math.ceil(parseFloat(node.getComputedStyle('height'))), "height: auto (offset minus padding and border)");
domNode.style.padding = '1em';
domNode.parentNode.style.visibility = 'hidden';
domNode.parentNode.style.visibility = 'visible';
domNode.style.margin = 'auto';
Assert.areEqual(w, Math.round(parseFloat(node.getComputedStyle('width'))), "percent width (from CSS)");
},
test_setStyles: function() {
var node = byId('set-style');
'top': '5px',
'right': '10em'
});
},
test_selector: function() {
var id = 'test-prop',
element = byId(id),
parent = Y.one(element.parentNode),
nodes = Y.all('#test-nodes *');
// Selector methods
},
test_window: function() {
//Assert.areEqual(window, Y.Node.getDOMNode(Y.one('document').get('defaultView')), 'win.get(document)');
},
test_windowSize: function() {
},
test_scroll: function() {
document.body.style.height = '5000px';
document.body.style.width = '5000px';
/*
*/
},
test_setContent: function() {
var content = '<strong>foo</strong>';
Assert.areEqual(content,
Assert.areEqual(content,
content = '<strong>foo</strong><em>bar</em>';
Assert.areEqual(content,
element.innerHTML = 'bar';
content = '<strong>bar</strong>';
Assert.areEqual(content,
"Y.one('#test-insert-html').setContent(element)");
content = '';
Assert.areEqual(content,
content = null;
Assert.areEqual('',
content = 0;
Assert.areEqual('0',
},
test_insert: function() {
html = '<strong>foo</strong>',
content;
node.setContent('foo');
node.insert(html);
content + html,
html = '<em>bar</em>';
html + content,
html = '<span>baz</span>';
'SPAN',
html = '';
node.insert(html);
content,
html = null;
node.insert(html);
content,
// test fragment insertion
html = '<q>bar</q><h2>foo</h2>';
node.insert(html);
Assert.areEqual('Q',
Assert.areEqual('H2',
html = '<label>foo</label><input>';
node.insert(html);
node.setContent('<em>foo</em><span>bar</span>');
"node.insert('<strong>bar</strong>', node.one('span')");
"node.insert('<code>var lorem</code>', node.one('em')._node)");
// insert Node instance
html = Y.Node.create('<div>foo</div>');
"node.insert(Y.Node.create('<div>foo</div>'))");
// insert DOM node
html = document.createElement('div');
Assert.areEqual(Y.one('#test-insert-html')._node.childNodes[2], html, 'node.insert(someDOMNode, 2)');
},
test_inject: function() {
html = '<strong>foo</strong>',
node.prepend(html);
html + content,
html = '<em>bar</em>';
node.append(html);
content + html,
},
test_getValue: function() {
// text
'input[name=test-text-value].hasAttribute("value")');
'input[name=test-text-novalue].hasAttribute("value")');
Assert.areEqual('text value',
"Y.one('input[name=test-text-value]').get('value')");
"Y.one('input[name=test-text-novalue]').get('value')");
// textarea
// textarea doesn't use value attribute
// 'textarea[name=test-textarea-value].hasAttribute("value")');
'textarea[name=test-textarea-value].hasAttribute("value")');
'textarea[name=test-textarea-textvalue].get("value")');
Assert.areEqual('',
'textarea[name=test-textarea-novalue].get("value")');
Assert.areEqual('',
'textarea[name=test-textarea-value].get("value")');
// button
'textarea[name=test-button-value].hasAttribute("value")');
'textarea[name=test-button-value].hasAttribute("value")');
'button[name=test-button-value].get("value")');
Assert.areEqual('',
'button[name=test-button-novalue].get("value")');
Assert.areEqual('',
'button[name=test-button-textvalue].get("value")');
},
test_remove: function() {
parent = domNode.parentNode;
node.remove();
// ensure remove doesnt fail when no parent
node = Y.Node.create('<div/>');
node.remove();
},
test_replace: function() {
var node = Y.one('#test-replace').get('firstChild'),
newNode = document.createElement('div');
node.replace(newNode);
node = Y.one('#test-replace').get('firstChild');
newNode = Y.Node.create('<div/>');
node.replace(newNode);
},
test_elements: function() {
var elements = Y.one('#test-form').get('elements');
ArrayAssert.itemsAreEqual(Y.DOM.byId('test-form').elements, elements._nodes, "Y.one('#test-form').get('elements')");
},
test_toFrag: function() {
var frag = Y.all('#test-frag p').toFrag();
},
test_aria: function() {
Y.one('body').set('role', 'menu');
Y.one('body').set('aria-checked', true);
Assert.areEqual('true', document.body.getAttribute('aria-checked', 2), "Y.one('body').set('aria-checked', true)")
Assert.areEqual('true', Y.one('body').getAttribute('aria-checked'), "Y.one('body').set('aria-checked', true)")
Y.one('body').set('aria-checked', false);
Assert.areEqual('false', Y.one('body').get('aria-checked'), "Y.one('body').set('aria-checked', false)");
},
test_plugin: function() {
Y.all('input').plug(Y.Plugin.NodeFX);
Y.all('input').each(function(n) {
});
Y.all('input').unplug(Y.Plugin.NodeFX);
Y.all('input').each(function(n) {
});
},
test_props: function() {
var mask = document.createElement('div');
mask.className = 'mask';
document.body.appendChild(mask);
var doc = Y.one('document');
window.scrollTo(0,0);
mask.style.height = doc.get('docHeight') + 'px';
mask.style.width = doc.get('docWidth') + 'px';
Y.DOM.setStyle(mask, 'opacity', 0.4);
Assert.areEqual('DIV', Y.one('#test-prop').get('nodeName'), 'one("test-prop")');
mask.className = '';
},
test_refresh: function() {
var node = Y.one('#test-nodes'),
nodelist = node.all('li');
nodelist.item(1).remove();
nodelist = Y.all('#test-nodes li');
nodelist.item(1).remove();
},
test_one: function() {
var node = Y.DOM.byId('test:colon');
"Y.one(Y.DOM.byId('test:colon')).one(h2)");
node = Y.DOM.byId('_funky:id{$400}');
"Y.one(Y.DOM.byId('_funky:id{$400}')).one(h2)");
node = Y.one(1);
Assert.isNull(node, "Y.one(1)");
node = Y.one(true);
Assert.isNull(node, "Y.one(true)");
node = Y.one(false);
Assert.isNull(node, "Y.one(false)");
node = Y.one(0);
Assert.isNull(node, "Y.one(0)");
},
test_all: function() {
var node = Y.DOM.byId('test:colon');
Y.one(node).all('h2')._nodes,
"Y.one(Y.DOM.byId('test:colon')).all(h2)");
node = Y.DOM.byId('_funky:id{$400}');
Y.one(node).all('h2')._nodes,
"Y.one(Y.DOM.byId('_funky:id{$400}')).all(h2)");
node = Y.one('body');
ArrayAssert.itemsAreEqual([node._node], Y.all(node)._nodes,
node = Y.one('win');
ArrayAssert.itemsAreEqual([node._node], Y.all(node)._nodes,
/* comparision fails in webkit, so using alert test below
Assert.areEqual(window, Y.all(window)._nodes[0],
"Y.all(window)");
*/
Assert.isNotUndefined(Y.all(window)._nodes[0].alert,
"Y.all(window)");
},
test_isEmpty: function() {
Assert.isFalse(Y.all('input').isEmpty());
Assert.isTrue(Y.all('.nomatch').isEmpty());
},
test_siblings: function() {
var parent = Y.one('#test-nodes > ol'),
children = parent.get('children');
children.item(2).siblings()._nodes,
"children.item(2).siblings()"
);
children.item(2).siblings('li')._nodes,
"children.item(2).siblings('li')"
);
children.addClass('bar');
children.item(1).removeClass('bar');
[children.item(0)._node, children.item(3)._node],
children.item(2).siblings('li.bar')._nodes,
"children.item(2).siblings('li.bar')"
);
},
test_swap: function() {
var elements = Y.DOM.byId('test-swap').getElementsByTagName('li'),
nodes = Y.all('#test-swap li');
Assert.areEqual(elements[0], nodes.item(0)._node);
nodes.item(0).swap(nodes.item(3));
nodes.item(0).swap(nodes.item(3));
Assert.areEqual(elements[0], nodes.item(0)._node);
Assert.areEqual(elements[3], nodes.item(3)._node);
nodes.item(1).swap(nodes.item(2));
Assert.areEqual(elements[1], nodes.item(2)._node);
nodes.item(1).swap(nodes.item(2));
Assert.areEqual(elements[1], nodes.item(1)._node);
Assert.areEqual(elements[2], nodes.item(2)._node);
},
test_data: function() {
var node = Y.one('body');
// deprecated usage
node.set('data', 'foo');
Assert.areEqual('foo', node.get('data'),
"node.set('data', 'foo')");
node.setData('foo', 'foo');
Assert.areEqual('foo', node.getData('foo'),
"node.setData('foo', 'foo')");
Assert.areEqual(undefined, node.getData('baz'),
"node.clearData()");
node.setData({'bar': 'bar', 'baz': 'baz'});
Assert.areEqual('bar', node.getData('bar'),
"node.setData({'bar': 'bar', 'baz': 'baz'})");
Assert.areEqual('baz', node.getData('baz'),
"node.setData({'bar': 'bar', 'baz': 'baz'})");
node.clearData('bar');
Assert.areEqual(undefined, node.getData('bar'),
"node.clearData('bar')");
Assert.areEqual('baz', node.getData('baz'),
"node.clearData('bar')");
Assert.areEqual(undefined, node.getData('baz'),
"node.clearData()");
Assert.areEqual(undefined, node.getData('baz'),
"node.clearData() after cleared");
},
test_appendStyle: function() {
var html = '<style>body {height:100px}</style>';
Y.one('head').append(html);
Assert.areEqual('100px', Y.one('body').getStyle('height'),
"Y.one('head').append(" + html + ")");
},
test_ancestor: function() {
var node = Y.one('#test-table div div').ancestor('td');
Y.Assert.areEqual(byId('test-td'), node._node,
"Y.one('#test-table div').ancestor('td'))");
node = Y.Node.create('<div><div><table><tbody><tr></tr><tr></tr><tr><td><div><div class="inner"></div></div></td></tr></tbody></table></div></div>');
var inner = node.one('.inner');
inner.ancestor('td');
},
test_ancestors: function() {
var node = document.createElement('node');
node.className = 'foo';
document.body.appendChild(node);
nodelist = Y.one(node).ancestors();
nodelist = Y.one(node).ancestors('.foo', true);
ArrayAssert.itemsAreEqual([node], nodelist._nodes);
nodelist = Y.one(node).ancestors('body', true);
ArrayAssert.itemsAreEqual([document.body], nodelist._nodes);
document.body.removeChild(node);
},
test_nodelistEvent: function() {
var nodelist = Y.all('div'),
item = nodelist.item(0),
evtObj = {
mousedown: function(e, foo, bar) {
Assert.areEqual('foo', foo, "foo === 'foo'");
Assert.areEqual('bar', bar, "bar === 'bar'");
}
};
nodelist.on('click', function(e) {
Assert.areEqual(this, nodelist);
});
Y.on(evtObj, null, nodelist, null, 'foo', 'bar');
nodelist.on(evtObj, null, null, 'foo', 'bar');
nodelist.on({mouseup: true}, function(e) {
Assert.areEqual(this, nodelist);
});
nodelist.on({mouseup: function(e) {
Assert.areEqual(this, nodelist);
}});
nodelist.on({keydown: true}, function(e) {
Assert.areEqual(this, nodelist.item(0));
}, item);
nodelist.on({keydown: true}, function(e) {
Assert.areEqual(this, nodelist.item(0));
}, item);
nodelist.after('click', function(e) {
Assert.areEqual(this, nodelist);
});
Y.after(evtObj, null, nodelist, null, 'foo', 'bar');
nodelist.after(evtObj, null, null, 'foo', 'bar');
nodelist.after({mouseup: true}, function(e) {
Assert.areEqual(this, nodelist);
});
nodelist.after({keydown: true}, function(e) {
Assert.areEqual(this, nodelist.item(0));
}, item);
item.simulate('mousedown');
item.simulate('click');
item.simulate('mouseup');
item.simulate('keydown');
},
test_size: function() {
var node = Y.one('#doc'),
height = node._node.offsetHeight,
width = node._node.offsetWidth;
node.set('offsetHeight', 1000);
node.set('offsetWidth', 800);
Assert.areEqual(1000, node.get('offsetHeight'),
"node.set('offsetHeight')");
Assert.areEqual(800, node.get('offsetWidth'),
"node.set('offsetWidth')");
node.set('offsetWidth', -100);
node.set('offsetHeight', -100);
Assert.areEqual('0px', node.getStyle('height'),
"node.get('offsetHeight')");
Assert.areEqual('0px', node.getStyle('width'),
"node.get('offsetWidth')");
node.setStyle('height', '');
node.setStyle('width', '');
Assert.areEqual(height, node.get('offsetHeight'),
"node.get('offsetHeight')");
Assert.areEqual(width, node.get('offsetWidth'),
"node.get('offsetWidth')");
},
test_select: function() {
var select = Y.Node.create('<select>');
Assert.areEqual('', select.get('value'));
},
test_destroy: function() {
nodes = node.all('em, strong');
node.destroy();
Assert.isNull(node._node);
},
test_prependFrag: function() {
var html = '<link id="dyn-link-1" href="#" rel="stylesheet"><link id="dyn-link-2" href="#" rel="stylesheet">';
Y.one('head').prepend(html);
//Y.one('head').prepend(Y.Node.create(html));
Assert.isNotNull(document.getElementById('dyn-link-1'));
Assert.isNotNull(document.getElementById('dyn-link-2'));
html = '<link id="dyn-link-3" href="#" rel="stylesheet">'
Y.one('head').prepend(html);
Assert.isNotNull(document.getElementById('dyn-link-3'));
},
test_focus: function () {
var button = document.createElement('button');
button.style.visibility = 'hidden';
document.body.appendChild(button);
// This will throw in IE, but the focus() wrapper should catch the
// exception.
Y.one(button).focus();
},
'should hide the node': function() {
var node = Y.one('body');
node.hide();
Assert.areEqual('none', node.getStyle('display'));
node.setStyle('display', 'block');
},
'should show the node': function() {
var node = Y.one('body');
node.setStyle('display', 'none');
node.show(1);
Assert.areEqual('block', node.getStyle('display'));
node.setStyle('display', 'block');
},
'should set text for textNode': function() {
var node = Y.one(document.createElement('text'));
node.set('text', 'foo');
Assert.areEqual('foo', node.get('text'));
},
'should append to the given node': function() {
var node = Y.Node.create('<div/>');
node.appendTo(Y.one('body'));
},
'should append to the given DOM node': function() {
var node = Y.Node.create('<div/>');
},
'should wrap the node with the given html': function() {
var node = Y.Node.create('<span/>');
node.wrap('<div/>');
},
'should remove the node from its parent': function() {
node.unwrap();
},
'should return true for fragment': function() {
}
}));
Y.Test.Runner.add(suite);
Y.on('load', function() {
}, window);
});
</script>
</body>
</html>