selector.html revision dc1963b44b8b62bde12a795d20f953eaff5ef573
b6c1232fd4529b7cb25d801404f6c440d549f311slive<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
b6c1232fd4529b7cb25d801404f6c440d549f311slive<link type="text/css" rel="stylesheet" href="/yui2/build/logger/assets/logger.css">
b6c1232fd4529b7cb25d801404f6c440d549f311slive<link type="text/css" rel="stylesheet" href="/yui2/build/yuitest/assets/testlogger.css">
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/yui/yui.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/event-custom/event-custom.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/event/event.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/oop/oop.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/dom/dom-debug.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/dom/selector-css3.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/base/base-debug.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/attribute/attribute-debug.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/build/node/node-debug.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/yui2/build/yahoo/yahoo-min.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/yui2/build/dom/dom-min.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/yui2/build/event/event.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/yui2/build/logger/logger-min.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311slive<script type="text/javascript" src="/yui2/build/yuitest/yuitest.js"></script>
b6c1232fd4529b7cb25d801404f6c440d549f311sliveonload = function() {
b6c1232fd4529b7cb25d801404f6c440d549f311slive YUI().use('*', function(Y) {
b6c1232fd4529b7cb25d801404f6c440d549f311slive var logger = new YAHOO.tool.TestLogger(null, {height:'2000px'});
b6c1232fd4529b7cb25d801404f6c440d549f311slive var suite = new YAHOO.tool.TestSuite("Selector Suite");
b6c1232fd4529b7cb25d801404f6c440d549f311slive var Selector = Y.Selector;
b6c1232fd4529b7cb25d801404f6c440d549f311slive var ArrayAssert = YAHOO.util.ArrayAssert;
b6c1232fd4529b7cb25d801404f6c440d549f311slive var demo = Y.Dom.get('demo');
b6c1232fd4529b7cb25d801404f6c440d549f311slive children = Y.Dom.getChildren(demo);
b6c1232fd4529b7cb25d801404f6c440d549f311slive var demoFirstChild = children[0];
b6c1232fd4529b7cb25d801404f6c440d549f311slive var demoLastChild = children[children.length - 1];
b6c1232fd4529b7cb25d801404f6c440d549f311slive var selectorQueryAll = new YAHOO.tool.TestCase({
b6c1232fd4529b7cb25d801404f6c440d549f311slive name: 'Query All',
b6c1232fd4529b7cb25d801404f6c440d549f311slive testFilter: function() {
b6c1232fd4529b7cb25d801404f6c440d549f311slive var all = Y.Dom.get('test-inputs').getElementsByTagName('input');
b6c1232fd4529b7cb25d801404f6c440d549f311slive ArrayAssert.itemsAreEqual([all[0], all[1], all[2]], Selector.filter(all, '[type=checkbox]'), '[type=checkbox]');
b6c1232fd4529b7cb25d801404f6c440d549f311slive ArrayAssert.itemsAreEqual([], Selector.filter(null, '[type=checkbox]'), 'null input');
b6c1232fd4529b7cb25d801404f6c440d549f311slive //ArrayAssert.itemsAreEqual([document.getElementById('test-inputs')], Selector.filter(['root-test', 'test-inputs'], 'form'), 'form (string inputs)');
//ArrayAssert.itemsAreEqual([document.getElementById('test-inputs')], Selector.filter(['root-test', document.getElementById('test-inputs'), document.createTextNode('foo')], 'form'), 'form (mixed inputs)');
Assert.isTrue(Selector.test(Y.Dom.get('checkbox-unchecked'), '[type=checkbox], button'), '[type=checkbox], button');
Assert.isTrue(Selector.test(Y.Dom.get('checkbox-unchecked'), 'button, [type=checkbox]'), 'button, [type=checkbox]');
Assert.isTrue(Selector.test(Y.Dom.get('test-lang-en-us'), '[lang|=en]'), '[lang|=en] (lang="en-us")');
Assert.isFalse(Selector.test(Y.Dom.get('checkbox-unchecked'), 'for [type=checkbox]'), 'for [type=checkbox] false pos');
Assert.isTrue(Selector.test(Y.Dom.get('checkbox-unchecked'), 'form [type=checkbox]'), 'form [type=checkbox]');
Assert.isFalse(Selector.test(Y.Dom.get('checkbox-unchecked'), 'for [type=checkbox]'), 'for [type=checkbox] false pos');
Assert.isTrue(Selector.test(Y.Dom.get('checkbox-checked'), '[type=checkbox]:checked'), 'type=checkbox:checked');
Assert.isFalse(Selector.test(Y.Dom.get('radio-unchecked'), ':checked'), ':checked (radio) false pos');
Assert.isFalse(Selector.test(Y.Dom.get('checkbox-unchecked'), '[type=checkbox]:checked'), 'type=checkbox:checked false pos');
Assert.isTrue(Selector.test(Y.Dom.get('checkbox-unchecked'), '[type=checkbox]:not(:checked)'), 'type=checkbox:not(:checked)');
var all = Y.Dom.get('nth-test').getElementsByTagName('li');
ArrayAssert.itemsAreEqual(all, $('li', document), 'document');
ArrayAssert.itemsAreEqual(all, $('#root-test li'), 'document');
//ArrayAssert.itemsAreEqual(document.body.getElementsByTagName('p'), $('body p', document.body), "$('body p', document.body)");
ArrayAssert.itemsAreEqual([], $('li', 'nth-tes'), 'id as root false pos');
ArrayAssert.itemsAreEqual(all, $('#nth-test li', Y.Dom.get('root-test')), 'id selector w/root node ref');
Assert.areEqual(all[0], $('#nth-test li', 'root-test', true), 'id selector w/root string, firstOnly');
ArrayAssert.itemsAreEqual([], $('#root-test li', Y.Dom.get('nth-test')), 'id selector w/root false pos');
var all = Y.Dom.get('nth-test').getElementsByTagName('li');
var odd = Y.Dom.getElementsByClassName('even', 'li', 'nth-test');
var even = Y.Dom.getElementsByClassName('odd', 'li', 'nth-test');
var four1 = Y.Dom.getElementsByClassName('last-four-1', 'li', 'nth-test');
ArrayAssert.itemsAreEqual(odd, $('li:nth-last-child(odd)'), 'odd');
ArrayAssert.itemsAreEqual(even, $('li:nth-last-child(2n)'), '2n');
ArrayAssert.itemsAreEqual(even, $('li:nth-last-child(even)'), 'even');
ArrayAssert.itemsAreEqual(even, $('li:nth-last-child(2n+0)'), '2n+0');
ArrayAssert.itemsAreEqual(odd, $('li:nth-last-child(2n+1)'), '2n+1');
ArrayAssert.itemsAreEqual(four1, $('li:nth-last-child(4n+1)'), '4n+1');
var all = Y.Dom.get('nth-test').getElementsByTagName('li');
var odd = Y.Dom.getElementsByClassName('odd', 'li', 'nth-test');
var even = Y.Dom.getElementsByClassName('even', 'li', 'nth-test');
var three1 = Y.Dom.getElementsByClassName('three-1', 'li', 'nth-test');
var four1 = Y.Dom.getElementsByClassName('four-1', 'li', 'nth-test');
var four2 = Y.Dom.getElementsByClassName('four-2', 'li', 'nth-test');
var four3 = Y.Dom.getElementsByClassName('four-3', 'li', 'nth-test');
var four4 = Y.Dom.getElementsByClassName('four-4', 'li', 'nth-test');
ArrayAssert.itemsAreEqual(odd, $('li:nth-of-type(odd)'), 'odd');
var all = Y.Dom.get('nth-test').getElementsByTagName('li');
var odd = Y.Dom.getElementsByClassName('odd', 'li', 'nth-test');
var even = Y.Dom.getElementsByClassName('even', 'li', 'nth-test');
var three1 = Y.Dom.getElementsByClassName('three-1', 'li', 'nth-test');
var four1 = Y.Dom.getElementsByClassName('four-1', 'li', 'nth-test');
var four2 = Y.Dom.getElementsByClassName('four-2', 'li', 'nth-test');
var four3 = Y.Dom.getElementsByClassName('four-3', 'li', 'nth-test');
var four4 = Y.Dom.getElementsByClassName('four-4', 'li', 'nth-test');
ArrayAssert.itemsAreEqual(even[1], $('li:nth-child(2)'), '2');
ArrayAssert.itemsAreEqual(even[1], $('li:nth-child(0n+2)'), '0n+2');
ArrayAssert.itemsAreEqual(three1, $('li:nth-child(3n+1)'), '3n+1');
ArrayAssert.itemsAreEqual(all, $('li:nth-child(n+1)'), 'n+1');
//from http://www.w3.org/TR/css3-selectors/#nth-child-pseudo examples
ArrayAssert.itemsAreEqual(odd, $('li:nth-child(2n+1)'), '2n+1');
ArrayAssert.itemsAreEqual(odd, $('li:nth-child(odd)'), 'odd');
ArrayAssert.itemsAreEqual(even, $('li:nth-child(2n+0)'), '2n+0');
ArrayAssert.itemsAreEqual(even, $('li:nth-child(2n)'), '2n');
ArrayAssert.itemsAreEqual(even, $('li:nth-child(even)'), 'even');
ArrayAssert.itemsAreEqual(four1, $('li:nth-child(4n+1)'), '4n+1');
ArrayAssert.itemsAreEqual(four2, $('li:nth-child(4n+2)'), '4n+2');
ArrayAssert.itemsAreEqual(four3, $('li:nth-child(4n+3)'), '4n+3');
ArrayAssert.itemsAreEqual(four4, $('li:nth-child(4n+4)'), '4n+4');
ArrayAssert.itemsAreEqual(even[0], $('li:nth-child(0n+1)'), '0n+1');
ArrayAssert.itemsAreEqual(even[0], $('li:nth-child(1)'), '1');
ArrayAssert.itemsAreEqual(all, $('li:nth-child(1n+0)'), '1n+0');
ArrayAssert.itemsAreEqual(all, $('li:nth-child(n+0)'), 'n+0');
ArrayAssert.itemsAreEqual([], $('.Foo'), '.Foo');
ArrayAssert.itemsAreEqual(Y.Dom.get('demo').getElementsByTagName('p'), $('#demo.foo p'), '#demo.foo p');
ArrayAssert.itemsAreEqual(Y.Dom.getElementsByClassName('para'), $('[class~=para]'), '[class~=para]');
ArrayAssert.itemsAreEqual(Y.Dom.getElementsByClassName('para'), $('[class~="para"]'), '[class~="para"]');
ArrayAssert.itemsAreEqual([], $('#demo .madeup'), '#demo .madeup');
ArrayAssert.itemsAreEqual(Y.Dom.getElementsByClassName('first', null, Y.DOM.byId(demo)), $('#demo .first'), '#demo .first');
ArrayAssert.itemsAreEqual([demoFirstChild, Y.DOM.next(demoFirstChild)], $('#demo > p:not(.last)'), '#demo > p:not(.last)');
//ArrayAssert.itemsAreEqual([], $(null), 'null input');
ArrayAssert.itemsAreEqual([], $('#fake-id-not-in-doc'), 'id false positive');
Y.Dom.addClass($('li'), 'first-child');
Assert.areEqual(document.getElementById('label-checkbox-unchecked'), $('label[for=checkbox-unchecked]', null, true), 'for attribute');
ArrayAssert.itemsAreEqual($('.not-button', Y.DOM.byId('test-inputs')), $('input:not([type=button])', Y.DOM.byId('test-inputs')), 'input[type=radio], input[type=checkbox] = input:not([type=button])');
//ArrayAssert.itemsAreEqual(Y.Dom.get('demo2').getElementsByTagName('div'), $('div:contains(child of demo2)', Y.DOM.byId('demo2')), 'div:contains:(child of demo2) ');
//Assert.areEqual(document.getElementById('contains-special'), $(':contains(contains "\' & ])'), 'contains "\' & ]');
Assert.areEqual(Y.DOM.byId('test-select'), $('#test-select', null, true), "($('#test-select'), null, true)");
Assert.areEqual(document.getElementsByTagName('link')[0], $('[rel^=style]', null, true), "($('[rel^=style]), null, true)");
Assert.areEqual(Y.DOM.byId('test-rel-div'), $('div[rel^=foo2]', null, true), "($('[rel^=foo2]), null, true)");
Assert.areEqual(Y.DOM.byId('test-rel-div'), $("div[rel^='foo2']", null, true), "($('[rel^=\'foo2\']), null, true)");
Assert.areEqual(Y.DOM.byId('foo-bar'), $("input[name='foo.bar']", null, true), "input[name='foo.bar'], null, true)");
var simpleTest = new YAHOO.tool.TestCase({
Assert.isFalse(Selector.test(Y.Dom.getFirstChild('demo'), ':first-child.last'), 'first-child class false pos');
Assert.isTrue(Selector.test(Y.Dom.getFirstChild('demo'), ':first-child.first'), 'first-child class');
Assert.isFalse(Selector.test(Y.Dom.getFirstChild('demo'), ':only-of-type'), 'only-of-type false pos');
Assert.isFalse(Selector.test(Y.Dom.get('demo2'), ':not(:contains(demo2))'), ':not(:contains(demo2))');
Assert.isTrue(Selector.test(Y.Dom.get('demo2'), ':not(:contains(demo1))'), ':not(:contains(demo1))');
Assert.isTrue(Selector.test(Y.Dom.get('demo2'), ':contains(child of demo2)'), 'contains(child of demo2)');
Assert.isTrue(Selector.test(Y.Dom.get('demo'), 'div[id=demo][title~=demo]'), 'tag & multiple attributes');
Assert.isTrue(Selector.test(Y.Dom.get('demo'), 'div[title="this is a demo"]'), 'quoted attribute with spaces');
Assert.isTrue(Selector.test(Y.Dom.get('demo'), "div[title='this is a demo']"), 'single quoted attribute with spaces');
Assert.isFalse(Selector.test(Y.Dom.get('demo'), '[id=demo][title=demo]'), 'multiple attributes false pos');
alert(Y.Dom.get('demo').querySelector('[id!=bar]'));
Assert.isTrue(Selector.test(Y.Dom.get('demo'), 'div[title=this is a demo]'), 'attribute with spaces');
Assert.isTrue(Selector.test(Y.Dom.getFirstChild('demo'), 'p.first.para'), 'tag & multiple class match');
Assert.areEqual('iframe foo', $('#demo li', frameDoc, true).innerHTML, "Y.get('#demo li', frameDoc, true)");
return (child.tagName === 'P' &&
ArrayAssert.itemsAreEqual($('#demo > p'), $('foo, > p', Y.DOM.byId('demo')), '#demo foo, #demo > p');
//ArrayAssert.itemsAreEqual($('#demo-first-child ~ p'), $('~ p', Y.DOM.byId('demo-first-child')), '#demo-first-child ~ div');
//ArrayAssert.itemsAreEqual($('#demo-first-child ~ p'), someChildren, 'someChildren');
suite.add(selectorQueryAll);
suite.add(simpleTest);
YAHOO.tool.TestRunner.add(suite);