servo/tests/content/test_htmlcollection.html

117 lines
4.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script src="harness.js"></script>
</head>
<body>
<div id="foo-1" class="foo"></div>
<div id="foo-2" class="foo"></div>
<div id="bar" class="bar"></div>
<div id="live" class="live"></div>
<div id="class-example">
<p id="p1" class="aaa bbb"/>
<p id="p2" class="aaa ccc"/>
<p id="p3" class="bbb ccc"/>
</div>
<script>
let foo1 = document.getElementById("foo-1");
let foo2 = document.getElementById("foo-2");
let bar = document.getElementById("bar");
let live = document.getElementById("live");
let child = document.createElement("p");
let p1 = document.getElementById("p1");
let p2 = document.getElementById("p2");
let p3 = document.getElementById("p3");
let htmlcollection = null;
// test1: HTMLCollection interface
{
htmlcollection = document.getElementsByClassName("foo");
is(htmlcollection.length, 2);
is(htmlcollection.item(0), foo1);
is(htmlcollection.item(1), foo2);
is(htmlcollection.item(2), null);
is(htmlcollection.namedItem("foo-1"), foo1);
is(htmlcollection.namedItem("bar"), null);
htmlcollection = document.getElementsByClassName("FOO");
is(htmlcollection.length, 0);
htmlcollection = document.getElementsByClassName("bar");
is(htmlcollection.length, 1);
is(htmlcollection.item(0), bar);
is(htmlcollection.item(1), null);
is(htmlcollection.namedItem("bar"), bar);
}
// test2: live HTMLCollection
{
htmlcollection = document.getElementsByClassName("live");
is(htmlcollection.length, 1);
is(htmlcollection.item(0), live);
let new_live = document.createElement("div");
new_live.className = "live";
document.body.appendChild(new_live);
is(htmlcollection.length, 2);
is(htmlcollection.item(1), new_live);
document.body.removeChild(new_live);
is(htmlcollection.length, 1);
}
// test3: getElementsByTagName
{
is(document.getElementsByTagName("DIV").length, 5);
is(document.getElementsByTagName("div").length,
document.documentElement.getElementsByTagName("div").length);
is(document.getElementsByTagName("p").length,
document.getElementById("class-example").getElementsByTagName("p").length);
}
// test4: getElementsByTagNameNS
{
htmlcollection = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "div");
is(htmlcollection.length, 5);
let from_element = document.documentElement.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "div");
is(htmlcollection.length, from_element.length);
htmlcollection = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "DIV");
is(htmlcollection.length, 0);
htmlcollection = document.getElementsByTagNameNS("", "div");
is(htmlcollection.length, 0);
htmlcollection = document.getElementsByTagNameNS("invalid", "div");
is(htmlcollection.length, 0);
from_element = document.getElementById("class-example").getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
is(from_element.length, 3);
}
// test5: document.getElementsByClassName
{
htmlcollection = document.getElementsByClassName("aaa");
is(htmlcollection.length, 2);
is(htmlcollection.item(0), p1);
is(htmlcollection.item(1), p2);
htmlcollection = document.getElementsByClassName("ccc bbb");
is(htmlcollection.length, 1);
is(htmlcollection.item(0), p3);
htmlcollection = document.getElementsByClassName("aaa,bbb");
is(htmlcollection.length, 0);
let from_element = document.getElementById("class-example").getElementsByClassName("bbb");
is(from_element.length, 2);
is(from_element.item(0), p1);
is(from_element.item(1), p3);
}
</script>
</body>
</html>