<!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>