diff options
Diffstat (limited to 'testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html')
-rw-r--r-- | testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html b/testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html new file mode 100644 index 000000000..0171148fb --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html @@ -0,0 +1,130 @@ +<!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> |