mirror of
https://github.com/servo/servo
synced 2026-04-30 03:17:15 +02:00
131 lines
4.3 KiB
HTML
131 lines
4.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>The id attribute</title>
|
|
<meta charset=utf8>
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-id-attribute">
|
|
<style>
|
|
|
|
#abcd {
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
#ABCD {
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
#a\ b {
|
|
position: absolute;
|
|
z-index: 3;
|
|
}
|
|
|
|
#xyz {
|
|
position: absolute;
|
|
z-index: 4;
|
|
}
|
|
|
|
#foobar {
|
|
position: absolute;
|
|
z-index: 5;
|
|
}
|
|
|
|
#åèiöú {
|
|
position: absolute;
|
|
z-index: 6;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>The id attribute</h1>
|
|
<div id="log"></div>
|
|
<i id="abcd"></i>
|
|
<i id="ABCD"></i>
|
|
<i id="a b"></i>
|
|
<i id="åèiöú"></i>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
// id is associated for purposes of getElementById
|
|
test(function() {
|
|
assert_equals(document.getElementById("abcd"), document.getElementsByTagName("i")[0]);
|
|
}, "User agents must associate the element with an id value for purposes of getElementById.");
|
|
|
|
test(function() {
|
|
assert_equals(document.getElementById("ABCD"), document.getElementsByTagName("i")[1]);
|
|
}, "Association is exact and therefore case-sensitive for getElementById.");
|
|
|
|
test(function() {
|
|
assert_equals(document.getElementById("a b"), document.getElementsByTagName("i")[2]);
|
|
}, "Spaces are allowed in an id and still make an association for getElementByID.");
|
|
|
|
test(function() {
|
|
assert_equals(document.getElementById("åèiöú"), document.getElementsByTagName("i")[3]);
|
|
}, "Non-ASCII is allowed in an id and still make an association for getElementById.");
|
|
|
|
|
|
// id is associated for purposes of CSS
|
|
test(function() {
|
|
assert_equals(document.defaultView.getComputedStyle(document.getElementById("abcd"), false).zIndex, "1");
|
|
}, "User agents must associate the element with an id value for purposes of CSS.");
|
|
|
|
test(function() {
|
|
assert_equals(document.defaultView.getComputedStyle(document.getElementById("ABCD"), false).zIndex, "2");
|
|
}, "Association for CSS is exact and therefore case-sensitive.");
|
|
|
|
test(function() {
|
|
assert_equals(document.defaultView.getComputedStyle(document.getElementById("a b"), false).zIndex, "3");
|
|
}, "Spaces are allowed in an id and still make an association.");
|
|
|
|
test(function() {
|
|
assert_equals(document.defaultView.getComputedStyle(document.getElementById("åèiöú"), false).zIndex, "6");
|
|
}, "Non-ASCII is allowed in an id and still make an association for CSS.");
|
|
|
|
|
|
// id IDL attribute reflects the content attribute
|
|
var firstSpan = document.getElementById("abcd");
|
|
|
|
test(function() {
|
|
assert_equals(firstSpan.id, "abcd");
|
|
}, "The id IDL attribute must reflect the id content attribute, for getting.");
|
|
|
|
test(function() {
|
|
firstSpan.id = "xyz";
|
|
assert_equals(firstSpan.getAttribute("id"), "xyz");
|
|
}, "The id IDL attribute must reflect the id content attribute, for setting via IDL attribute.");
|
|
|
|
test(function() {
|
|
assert_equals(document.getElementById("xyz"), firstSpan);
|
|
}, "After setting id via id attribute, getElementById find the element by the new id.");
|
|
|
|
test(function() {
|
|
assert_equals(document.getElementById("abcd"), null);
|
|
}, "After setting id via id attribute, getElementById doesn't find the element by the old id.");
|
|
|
|
test(function() {
|
|
assert_equals(document.defaultView.getComputedStyle(firstSpan, false).zIndex, "4");
|
|
}, "After setting id via id attribute, CSS association is via the new ID.");
|
|
|
|
test(function() {
|
|
firstSpan.setAttribute("id", "foobar");
|
|
assert_equals(firstSpan.id, "foobar");
|
|
}, "The id IDL attribute must reflect the id content attribute, for setting via setAttribute.");
|
|
|
|
test(function() {
|
|
assert_equals(document.getElementById("foobar"), firstSpan);
|
|
}, "After setting id via setAttribute attribute, getElementById find the element by the new id.");
|
|
|
|
test(function() {
|
|
assert_equals(document.getElementById("xyz"), null);
|
|
}, "After setting id via setAttribute attribute, getElementById doesn't find the element by the old id.");
|
|
|
|
test(function() {
|
|
assert_equals(document.defaultView.getComputedStyle(firstSpan, false).zIndex, "5");
|
|
}, "After setting id via setAttribute attribute, CSS association is via the new ID.");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|