node.html revision b545bcc9a0edfb14a1d493aa08c90ddf46ba2d64
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<link type="text/css" rel="stylesheet" href="/yui2/build/logger/assets/logger.css">
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<link type="text/css" rel="stylesheet" href="/yui2/build/yuitest/assets/testlogger.css">
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/yui/yui.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/event-custom/event-custom.js"></script>
009217abb57a24a4076092e8e4e165545747839eStephan Bosch<script type="text/javascript" src="/build/event-simulate/event-simulate.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/event/event.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/oop/oop.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/dom/dom.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/dom/selector-css3.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/base/base.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/attribute/attribute.js"></script>
f9511e684858bf5f6ac77ab12254b85b737beae8Stephan Bosch<script type="text/javascript" src="/build/node/node-debug.js"></script>
<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 id="test-prop" tabindex="4">text<em id="test-contains">test<span></span></em><strong>node</strong></div>
YUI({ base: '/build/', filter: 'debug' }).use('*', function(Y) {
var tool = YAHOO.tool,
var Assert = YAHOO.util.Assert;
var ArrayAssert = YAHOO.util.ArrayAssert;
var handle = Y.get('html').on('click', function(e) {
Y.get('html').detach('click');
//handle.detach();
return document.getElementById(id);
var $ = Y.Selector.query;
name: 'Y.Node Instance',
var node = Y.get('#test-nodes'),
nodes = Y.all('#test-nodes *');
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],
Assert.areEqual(byId('test-nodes').getElementsByTagName('li')[1],
Assert.areEqual(document.body, Y.Node.getDOMNode(Y.get('div, .foo, body')), "Y.get('div, .foo, body')");
"frameDoc.query('#demo li').get('innerHTML')");
Assert.areEqual(document.getElementById('form.foo@bar:baz'), Y.Node.getDOMNode(Y.get('[id="form.foo@bar:baz"]')), "[id=form.foo@bar:baz]");
var firstChild = Y.get('body :first-child');
Assert.isFalse(Y.Node.getDOMNode(firstChild) === Y.Node.getDOMNode(Y.get('body :first-child')), "wrong node: Y.get('body :first-child')");
Assert.areEqual(Y.Selector.query('body :firstChild', null, true), Y.Node.getDOMNode(Y.get('body : first-child')), "body :first-child === #test-append");
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()');
nodes = Y.all('#test-nodes *'),
nodes.each(function(node, i, list) {
isNode = (node instanceof Y.Node);
Assert.areEqual(nodes, instance, 'nodes === instance');
var nodes = Y.all('#test-nodes *'),
}), 'nodes.some(function() { return true; })');
}), 'nodes.some(function() {})');
node = Y.get('#' + id),
nodes = Y.all('#' + id + ' *');
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'),
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.get('#test-prop').get('tabIndex'), 'Y.get("#test-prop").get("tabIndex")');
Assert.areEqual(byId('doc').tabIndex, Y.get('#doc').get('tabIndex'), 'Y.get("#doc".get("tabIndex"))');
Assert.areEqual(byId('link-1').tabIndex, Y.get('#link-1').get('tabIndex'), 'Y.get("#link1".get("tabIndex"))');
Assert.areEqual(byId('link-2').tabIndex, Y.get('#link-2').get('tabIndex'), 'Y.get("#link1".get("tabIndex"))');
node = Y.get('#' + 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'))");
node = Y.Node.create(html);
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');
Assert.areEqual(2, byId('test-select').selectedIndex,
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.isTrue(node.get('childNodes').size() === node.cloneNode(true).get('childNodes').size(), 'node.get("childNodes").size() === node.cloneNode(true).get("childNodes").size()');
Assert.isFalse(node.contains(document.getElementsByTagName('div')), 'contains() false positive for collection');
return el.get('id') === 'doc';
return el.hasAttribute('foo');
Assert.areEqual(byId('test-contains'), Y.Node.getDOMNode(node.getById('test-contains')), 'node.getById("test-contains")');
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)');
var frag = Y.get('document').invoke('createDocumentFragment'),
frag.appendChild(element);
Y.get('body').appendChild(frag);
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]);
ArrayAssert.itemsAreEqual(Y.DOM.region(Y.DOM.byId('doc')), Y.Node.get('#doc').get('region'), 'node.get("region")');
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');
node.replaceClass('foo', 'bar');
var nodes = Y.all('#test-nodes li');
nodes.addClass('foo').addClass('bar');
nodes.each(function(n) {
nodes.removeClass('bar');
nodes.each(function(n) {
node = Y.Node.get(element),
nodes = node.get('childNodes');
node.setStyle('width', '20em');
node.setStyle('marginTop', '1em');
node.setStyle('opacity', 0.5);
node.setStyle('float', 'left');
node.setStyle('float', 'left');
nodes.setStyle('marginTop', '1em');
var node = Y.Node.get('#get-style');
node.setStyle('opacity', 0.5);
node.setStyle('visibility', 'hidden');
node.setStyle('visibility', 'visible');
var node = Y.get('#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(h, Math.round(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';
var element = Y.Node.get(node);
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)");
node = Y.get('#' + id),
nodes = Y.all('#test-nodes *');
var win = Y.get(window);
//Assert.areEqual(window, Y.Node.getDOMNode(Y.get('document').get('defaultView')), 'win.get(document)');
Y.get('#test-scroll').set('scrollTop', 100);
Y.get('#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);
Y.get('#test-insert-html').insertHTML(html);
Y.DOM.byId('test-insert-html').innerHTML,
Y.get('#test-insert-html').insertHTML('<sc' + 'ript>var test_inject = "script injected";</sc' + 'ript>', 'afterBegin');
Assert.areEqual('script injected', test_inject, "Y.get('#test-insert-html').insertHTML('<sc' + 'ript>var test_inject = 'script injected';</sc' + 'ript>', 'afterBegin')");
Assert.areEqual('text value',
Y.get('input[name=test-text-value]').get('value'),
"Y.get('input[name=test-text-value]').get('value')");
Assert.areEqual('', // TODO: normalize to null?
Y.get('input[name=test-text-novalue]').get('value'),
"Y.get('input[name=test-text-novalue]').get('value')");
Assert.areEqual('textarea text',
Y.get('textarea[name=test-textarea-textvalue]').get('value'),
Assert.areEqual('',
Y.get('textarea[name=test-textarea-novalue]').get('value'),
Assert.areEqual('',
Y.get('textarea[name=test-textarea-value]').get('value'),
Assert.areEqual('button value',
Y.get('button[name=test-button-value]').get('value'),
Assert.areEqual('',
Y.get('button[name=test-button-novalue]').get('value'),
Assert.areEqual('',
Y.get('button[name=test-button-textvalue]').get('value'),
var node = Y.get('#test-remove'),
domNode = Y.DOM.byId('test-remove'),
parent = domNode.parentNode;
node.remove();
var node = Y.get('body');
node.destroy();
var node2 = Y.get('div');
var nodelist = Y.all('*');
Y.get('body').set('role', 'menu');
Y.get('body').set('aria-checked', true);
Assert.areEqual('true', document.body.getAttribute('aria-checked', 2), "Y.get('body').set('aria-checked', true)")
Assert.areEqual('true', Y.get('body').getAttribute('aria-checked'), "Y.get('body').set('aria-checked', true)")
Y.get('body').set('aria-checked', false);
Assert.areEqual('false', Y.get('body').get('aria-checked'), "Y.get('body').set('aria-checked', false)");
var mask = document.createElement('div');
mask.className = 'mask';
document.body.appendChild(mask);
var doc = Y.Node.get('document');
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")');
mask.className = '';
name: 'Instance Y.NodeExtras',
var element = Y.Node.get('#test-extras');
tool.TestRunner.add(suite);
Y.on('load', function() {