2008-03-05 16:06:15 -08:00
<!DOCTYPE HTML>
< html >
< head >
< title > Test for CSS Selectors< / title >
< script type = "text/javascript" src = "/MochiKit/MochiKit.js" > < / script >
< script type = "text/javascript" src = "/tests/SimpleTest/SimpleTest.js" > < / script >
< link rel = "stylesheet" type = "text/css" href = "/tests/SimpleTest/test.css" / >
< / head >
< body onload = "run()" >
< p id = "display" > < iframe id = "iframe" src = "about:blank" > < / iframe > < / p >
< pre id = "test" >
< script class = "testbody" type = "text/javascript" >
SimpleTest.waitForExplicitFinish();
function run() {
var iframe = document.getElementById("iframe");
var ifwin = iframe.contentWindow;
var ifdoc = iframe.contentDocument;
function setup_style() {
var style_elem = ifdoc.createElement("style");
style_elem.setAttribute("type", "text/css");
ifdoc.getElementsByTagName("head")[0].appendChild(style_elem);
var style_text = ifdoc.createTextNode("");
style_elem.appendChild(style_text);
return style_text;
}
var style_text = setup_style();
var gCounter = 0;
/*
* selector: the selector to test
* body_contents: what to set the body's innerHTML to
* match_fn: a function that, given the document object into which
* body_contents has been inserted, produces an array of nodes that
* should match selector
* notmatch_fn: likewise, but for nodes that should not match
*/
2009-02-19 09:06:18 -08:00
function test_selector_in_html(selector, body_contents, match_fn, notmatch_fn)
2008-03-05 16:06:15 -08:00
{
var zi = ++gCounter;
2008-06-02 20:17:35 -07:00
if (typeof(body_contents) == "string") {
ifdoc.body.innerHTML = body_contents;
} else {
// It's a function.
ifdoc.body.innerHTML = "";
body_contents(ifdoc.body);
}
2009-02-19 09:06:18 -08:00
style_text.data = selector + "{ z-index: " + zi + " }";
2008-03-05 16:06:15 -08:00
var should_match = match_fn(ifdoc);
var should_not_match = notmatch_fn(ifdoc);
if (should_match.length + should_not_match.length == 0) {
ok(false, "nothing to check");
}
2008-03-09 18:10:03 -07:00
2008-03-05 16:06:15 -08:00
for (var i = 0; i < should_match.length ; + + i ) {
var e = should_match[i];
is(ifwin.getComputedStyle(e, "").zIndex, zi,
"element in " + body_contents + " matched " + selector);
}
for (var i = 0; i < should_not_match.length ; + + i ) {
var e = should_not_match[i];
is(ifwin.getComputedStyle(e, "").zIndex, "auto",
"element in " + body_contents + " did not match " + selector);
}
2008-03-09 18:10:03 -07:00
// Now, since we're here, may as well make sure serialization
// works correctly. It need not produce the exact same text,
// but it should produce a selector that matches the same
// elements.
zi = ++gCounter;
2009-02-19 09:06:18 -08:00
var ser1 = style_text.parentNode.sheet.cssRules[0].selectorText;
style_text.data = ser1 + "{ z-index: " + zi + " }";
2008-03-09 18:10:03 -07:00
for (var i = 0; i < should_match.length ; + + i ) {
var e = should_match[i];
is(ifwin.getComputedStyle(e, "").zIndex, zi,
"element in " + body_contents + " matched " + ser1 +
" which is the reserialization of " + selector);
}
for (var i = 0; i < should_not_match.length ; + + i ) {
var e = should_not_match[i];
is(ifwin.getComputedStyle(e, "").zIndex, "auto",
"element in " + body_contents + " did not match " + ser1 +
" which is the reserialization of " + selector);
}
// But when we serialize the serialized result, we should get
// the same text.
2009-02-19 09:06:18 -08:00
var ser2 = style_text.parentNode.sheet.cssRules[0].selectorText;
2008-03-09 18:10:03 -07:00
is(ser2, ser1, "parse+serialize of selector \"" + selector +
"\" is idempotent");
2008-03-05 16:06:15 -08:00
ifdoc.body.innerHTML = "";
style_text.data = "";
}
2008-06-02 20:17:35 -07:00
function test_parseable(selector)
{
var zi = ++gCounter;
ifdoc.body.innerHTML = "< p > < / p > ";
style_text.data = "p, " + selector + "{ z-index: " + zi + " }";
var should_match = ifdoc.getElementsByTagName("p")[0];
is(ifwin.getComputedStyle(should_match, "").zIndex, zi,
"selector " + selector + " was parsed");
ifdoc.body.innerHTML = "";
style_text.data = "";
}
function test_balanced_unparseable(selector)
{
var zi1 = ++gCounter;
var zi2 = ++gCounter;
ifdoc.body.innerHTML = "< p > < / p > < div > < / div > ";
style_text.data = "p, " + selector + "{ z-index: " + zi1 + " }" +
"div { z-index: " + zi2 + " }";
var should_not_match = ifdoc.getElementsByTagName("p")[0];
var should_match = ifdoc.getElementsByTagName("div")[0];
is(ifwin.getComputedStyle(should_not_match, "").zIndex, "auto",
"selector " + selector + " was a parser error");
is(ifwin.getComputedStyle(should_match, "").zIndex, zi2,
"selector " + selector + " error was recovered from");
ifdoc.body.innerHTML = "";
style_text.data = "";
}
2008-06-10 17:27:00 -07:00
// [attr= ] selector
test_parseable("[attr=\"x\"]");
test_parseable("[attr='x']");
test_parseable("[attr=x]");
test_parseable("[attr=\"\"]");
test_parseable("[attr='']");
test_parseable("[attr=\"foo bar\"]");
test_balanced_unparseable("[attr=]");
test_balanced_unparseable("[attr=foo bar]");
test_selector_in_html(
'[title=""]',
'< p title = "" > < / p > '
+ '< div lang = " " > < / div > < div lang = "\t" > < / div > < div lang = "\n" > < / div > ',
function(doc) { return doc.getElementsByTagName("p"); },
function(doc) { return doc.getElementsByTagName("div"); }
);
// [attr~= ] selector
test_parseable("[attr~=\"x\"]");
test_parseable("[attr~='x']");
test_parseable("[attr~=x]");
test_parseable("[attr~=\"\"]");
test_parseable("[attr~='']");
test_parseable("[attr~=\"foo bar\"]");
test_balanced_unparseable("[attr~=]");
test_balanced_unparseable("[attr~=foo bar]");
test_selector_in_html(
'[class~="x x"]',
'< div class = "x x" > < / div > < div class = "x" > < / div > < div class = "x\tx" > < / div > div class="x\nx">< / div > ',
function(doc) { return []; },
function(doc) { return doc.getElementsByTagName("div"); }
);
// [attr|="x"]
test_parseable('[attr|="x"]');
test_parseable("[attr|='x']");
test_parseable('[attr|=x]');
test_parseable('[attr|=""]');
test_parseable("[attr|='']");
test_balanced_unparseable('[attr|=]');
test_selector_in_html(
'[lang|=""]',
'< p lang = "" > < / p > < p lang = "-" > < / p > < p lang = "-GB" > < / p > '
+ '< div lang = "en-GB" > < / div > < div lang = "en-" > < / div > ',
function(doc) { return doc.getElementsByTagName("p"); },
function(doc) { return doc.getElementsByTagName("div"); }
);
// [attr$= ] selector
test_parseable("[attr$=\"x\"]");
test_parseable("[attr$='x']");
test_parseable("[attr$=x]");
test_parseable("[attr$=\"\"]");
test_parseable("[attr$='']");
test_parseable("[attr$=\"foo bar\"]");
test_balanced_unparseable("[attr$=]");
test_balanced_unparseable("[attr$=foo bar]");
// [attr^= ] selector
test_parseable("[attr^=\"x\"]");
test_parseable("[attr^='x']");
test_parseable("[attr^=x]");
test_parseable("[attr^=\"\"]");
test_parseable("[attr^='']");
test_parseable("[attr^=\"foo bar\"]");
test_balanced_unparseable("[attr^=]");
test_balanced_unparseable("[attr^=foo bar]");
// attr[*= ] selector
test_parseable("[attr*=\"x\"]");
test_parseable("[attr*='x']");
test_parseable("[attr*=x]");
test_parseable("[attr*=\"\"]");
test_parseable("[attr*='']");
test_parseable("[attr*=\"foo bar\"]");
test_balanced_unparseable("[attr*=]");
test_balanced_unparseable("[attr*=foo bar]");
2008-03-05 16:06:15 -08:00
// Bug 420814
test_selector_in_html(
"div ~ div p",
"< div > < / div > < div > < div > < p > match< / p > < / div > < / div > ",
function(doc) { return doc.getElementsByTagName("p"); },
function(doc) { return []; }
);
2008-06-10 17:27:00 -07:00
// Bug 420245
test_selector_in_html(
"p[attr$=\"\"]",
"< p attr = \"foo\" > This should not match< / p > ",
function(doc) { return []; },
function(doc) { return doc.getElementsByTagName("p"); }
);
test_selector_in_html(
"div + p[attr~=\"\"]",
"< div > Dummy< / div > < p attr = \"foo\" > This should not match< / p > ",
function(doc) { return []; },
function(doc) { return doc.getElementsByTagName("p"); }
);
test_selector_in_html(
"div[attr^=\"\"]",
"< div attr = \"dummy1\" > Dummy< / div > < div attr = \"dummy2\" > Dummy< / div > ",
function(doc) { return []; },
function(doc) { return doc.getElementsByTagName("div"); }
);
test_selector_in_html(
"div[attr*=\"\"]",
"< div attr = \"dummy1\" > Dummy< / div > < div attr = \"dummy2\" > Dummy< / div > ",
function(doc) { return []; },
function(doc) { return doc.getElementsByTagName("div"); }
);
2008-06-02 20:17:35 -07:00
// :nth-child(), etc.
// Follow the whitespace rules as proposed in
// http://lists.w3.org/Archives/Public/www-style/2008Mar/0121.html
test_balanced_unparseable(":nth-child()");
test_balanced_unparseable(":nth-of-type( )");
test_parseable(":nth-last-child( odd)");
test_parseable(":nth-last-of-type(even )");
test_parseable(":nth-child(n )");
test_parseable(":nth-of-type( 2n)");
test_parseable(":nth-last-child( -n)");
test_parseable(":nth-last-of-type(-2n )");
test_balanced_unparseable(":nth-child(- n)");
test_balanced_unparseable(":nth-of-type(-2 n)");
test_balanced_unparseable(":nth-last-of-type(2n1)");
test_balanced_unparseable(":nth-child(2n++1)");
test_balanced_unparseable(":nth-of-type(2n-+1)");
test_balanced_unparseable(":nth-last-child(2n+-1)");
test_balanced_unparseable(":nth-last-of-type(2n--1)");
test_parseable(":nth-child( 3n + 1 )");
test_parseable(":nth-child( +3n - 2 )");
test_parseable(":nth-child( -n+ 6)");
test_parseable(":nth-child( +6 )");
test_balanced_unparseable(":nth-child(3 n)");
test_balanced_unparseable(":nth-child(+ 2n)");
test_balanced_unparseable(":nth-child(+ 2)");
test_parseable(":nth-child(3)");
test_parseable(":nth-of-type(-3)");
test_parseable(":nth-last-child(+3)");
test_parseable(":nth-last-of-type(0)");
test_parseable(":nth-child(-0)");
test_parseable(":nth-of-type(3n)");
test_parseable(":nth-last-child(-3n)");
test_parseable(":nth-last-of-type(+3n)");
test_parseable(":nth-last-of-type(0n)");
test_parseable(":nth-child(-0n)");
test_parseable(":nth-of-type(n)");
test_parseable(":nth-last-child(-n)");
test_parseable(":nth-last-of-type(2n+1)");
test_parseable(":nth-child(2n-1)");
test_parseable(":nth-of-type(2n+0)");
test_parseable(":nth-last-child(2n-0)");
test_parseable(":nth-child(-0n+0)");
test_parseable(":nth-of-type(n+1)");
test_parseable(":nth-last-child(n-1)");
test_parseable(":nth-last-of-type(-n+1)");
test_parseable(":nth-child(-n-1)");
test_balanced_unparseable(":nth-child(2-n)");
test_balanced_unparseable(":nth-child(2-n-1)");
test_balanced_unparseable(":nth-child(n-2-1)");
// exercise the an+b matching logic particularly hard for
// :nth-child() (since we know we use the same code for all 4)
var seven_ps = "< p > < / p > < p > < / p > < p > < / p > < p > < / p > < p > < / p > < p > < / p > < p > < / p > ";
function pset(indices) { // takes an array of 1-based indices
return function pset_filter(doc) {
var a = doc.getElementsByTagName("p");
var result = [];
for (var i in indices)
result.push(a[indices[i] - 1]);
return result;
}
}
test_selector_in_html(":nth-child(0)", seven_ps,
pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
test_selector_in_html(":nth-child(-3)", seven_ps,
pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
test_selector_in_html(":nth-child(3)", seven_ps,
pset([3]), pset([1, 2, 4, 5, 6, 7]));
test_selector_in_html(":nth-child(0n+3)", seven_ps,
pset([3]), pset([1, 2, 4, 5, 6, 7]));
test_selector_in_html(":nth-child(-0n+3)", seven_ps,
pset([3]), pset([1, 2, 4, 5, 6, 7]));
test_selector_in_html(":nth-child(8)", seven_ps,
pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
test_selector_in_html(":nth-child(odd)", seven_ps,
pset([1, 3, 5, 7]), pset([2, 4, 6]));
test_selector_in_html(":nth-child(even)", seven_ps,
pset([2, 4, 6]), pset([1, 3, 5, 7]));
test_selector_in_html(":nth-child(2n-1)", seven_ps,
pset([1, 3, 5, 7]), pset([2, 4, 6]));
test_selector_in_html(":nth-child( 2n - 1 )", seven_ps,
pset([1, 3, 5, 7]), pset([2, 4, 6]));
test_selector_in_html(":nth-child(2n+1)", seven_ps,
pset([1, 3, 5, 7]), pset([2, 4, 6]));
test_selector_in_html(":nth-child( 2n + 1 )", seven_ps,
pset([1, 3, 5, 7]), pset([2, 4, 6]));
test_selector_in_html(":nth-child(2n+0)", seven_ps,
pset([2, 4, 6]), pset([1, 3, 5, 7]));
test_selector_in_html(":nth-child(2n-0)", seven_ps,
pset([2, 4, 6]), pset([1, 3, 5, 7]));
test_selector_in_html(":nth-child(-n+3)", seven_ps,
pset([1, 2, 3]), pset([4, 5, 6, 7]));
test_selector_in_html(":nth-child(-n-3)", seven_ps,
pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
test_selector_in_html(":nth-child(n)", seven_ps,
pset([1, 2, 3, 4, 5, 6, 7]), pset([]));
test_selector_in_html(":nth-child(n-3)", seven_ps,
pset([1, 2, 3, 4, 5, 6, 7]), pset([]));
test_selector_in_html(":nth-child(n+3)", seven_ps,
pset([3, 4, 5, 6, 7]), pset([1, 2]));
test_selector_in_html(":nth-child(2n+3)", seven_ps,
pset([3, 5, 7]), pset([1, 2, 4, 6]));
test_selector_in_html(":nth-child(2n)", seven_ps,
pset([2, 4, 6]), pset([1, 3, 5, 7]));
test_selector_in_html(":nth-child(2n-3)", seven_ps,
pset([1, 3, 5, 7]), pset([2, 4, 6]));
test_selector_in_html(":nth-child(-1n+3)", seven_ps,
pset([1, 2, 3]), pset([4, 5, 6, 7]));
test_selector_in_html(":nth-child(-2n+3)", seven_ps,
pset([1, 3]), pset([2, 4, 5, 6, 7]));
// And a few spot-checks for the other :nth-* selectors
test_selector_in_html(":nth-child(4n+1)", seven_ps,
pset([1, 5]), pset([2, 3, 4, 6, 7]));
test_selector_in_html(":nth-last-child(4n+1)", seven_ps,
pset([3, 7]), pset([1, 2, 4, 5, 6]));
test_selector_in_html(":nth-of-type(4n+1)", seven_ps,
pset([1, 5]), pset([2, 3, 4, 6, 7]));
test_selector_in_html(":nth-last-of-type(4n+1)", seven_ps,
pset([3, 7]), pset([1, 2, 4, 5, 6]));
test_selector_in_html(":nth-child(6)", seven_ps,
pset([6]), pset([1, 2, 3, 4, 5, 7]));
test_selector_in_html(":nth-last-child(6)", seven_ps,
pset([2]), pset([1, 3, 4, 5, 6, 7]));
test_selector_in_html(":nth-of-type(6)", seven_ps,
pset([6]), pset([1, 2, 3, 4, 5, 7]));
test_selector_in_html(":nth-last-of-type(6)", seven_ps,
pset([2]), pset([1, 3, 4, 5, 6, 7]));
2008-08-18 09:47:12 -07:00
// Test [first|last|only]-[child|node|of-type]
var interesting_doc = "<!-- --> < div id = 'p1' > <!-- --> x< p id = 's1' > < / p > <!-- --> < p id = 's2' > < / p > <!-- --> < / div > <!-- --> < p id = 'p2' > <!-- --> < span id = 's3' > < / span > <!-- --> < span id = 's4' > < / span > <!-- --> x< / p > <!-- --> < div id = 'p3' > <!-- --> < p id = 's5' > < / p > <!-- --> < / div > <!-- --> ";
function idset(ids) { // takes an array of ids
return function idset_filter(doc) {
var result = [];
for each (var id in ids)
result.push(doc.getElementById(id));
return result;
}
}
test_parseable(":first-child");
test_parseable(":last-child");
test_parseable(":only-child");
test_parseable(":-moz-first-node");
test_parseable(":-moz-last-node");
test_parseable(":first-of-type");
test_parseable(":last-of-type");
test_parseable(":only-of-type");
test_selector_in_html(":first-child", seven_ps,
pset([1]), pset([2, 3, 4, 5, 6, 7]));
test_selector_in_html(":first-child", interesting_doc,
idset(["p1", "s1", "s3", "s5"]),
idset(["s2", "p2", "s4", "p3"]));
test_selector_in_html(":-moz-first-node", interesting_doc,
idset(["p1", "s3", "s5"]),
idset(["s1", "s2", "p2", "s4", "p3"]));
test_selector_in_html(":last-child", seven_ps,
pset([7]), pset([1, 2, 3, 4, 5, 6]));
test_selector_in_html(":last-child", interesting_doc,
idset(["s2", "s4", "p3", "s5"]),
idset(["p1", "s1", "p2", "s3"]));
test_selector_in_html(":-moz-last-node", interesting_doc,
idset(["s2", "p3", "s5"]),
idset(["p1", "s1", "p2", "s3", "s4"]));
test_selector_in_html(":only-child", seven_ps,
pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
test_selector_in_html(":only-child", interesting_doc,
idset(["s5"]),
idset(["p1", "s1", "s2", "p2", "s3", "s4", "p3"]));
test_selector_in_html(":first-of-type", seven_ps,
pset([1]), pset([2, 3, 4, 5, 6, 7]));
test_selector_in_html(":first-of-type", interesting_doc,
idset(["p1", "s1", "p2", "s3", "s5"]),
idset(["s2", "s4", "p3"]));
test_selector_in_html(":last-of-type", seven_ps,
pset([7]), pset([1, 2, 3, 4, 5, 6]));
test_selector_in_html(":last-of-type", interesting_doc,
idset(["s2", "p2", "s4", "p3", "s5"]),
idset(["p1", "s1", "s3"]));
test_selector_in_html(":only-of-type", seven_ps,
pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
test_selector_in_html(":only-of-type", interesting_doc,
idset(["p2", "s5"]),
idset(["p1", "s1", "s2", "s3", "s4", "p3"]));
2008-06-02 20:17:35 -07:00
// And a bunch of tests for the of-type aspect of :nth-of-type() and
// :nth-last-of-type(). Note that the last div here contains two
// children.
var mixed_elements="< p > < / p > < p > < / p > < div > < / div > < p > < / p > < div > < p > < / p > < address > < / address > < / div > < address > < / address > ";
function pdaset(ps, divs, addresses) { // takes an array of 1-based indices
var l = { p: ps, div: divs, address: addresses };
return function pdaset_filter(doc) {
var result = [];
for (var tag in l) {
var a = doc.getElementsByTagName(tag);
var indices = l[tag];
for (var i in indices)
result.push(a[indices[i] - 1]);
}
return result;
}
}
test_selector_in_html(":nth-of-type(odd)", mixed_elements,
pdaset([1, 3, 4], [1], [1, 2]),
pdaset([2], [2], []));
test_selector_in_html(":nth-of-type(2n-0)", mixed_elements,
pdaset([2], [2], []),
pdaset([1, 3, 4], [1], [1, 2]));
test_selector_in_html(":nth-last-of-type(even)", mixed_elements,
pdaset([2], [1], []),
pdaset([1, 3, 4], [2], [1, 2]));
2008-03-05 16:06:15 -08:00
SimpleTest.finish();
}
< / script >
< / pre >
< / body >
< / html >
