tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

id-attribute.html (4371B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <title>The id attribute</title>
      5 <meta charset=utf8>
      6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-id-attribute">
      7 <style>
      8 
      9 #abcd {
     10   position: absolute;
     11   z-index: 1;
     12 }
     13 
     14 #ABCD {
     15   position: absolute;
     16   z-index: 2;
     17 }
     18 
     19 #a\ b {
     20   position: absolute;
     21   z-index: 3;
     22 }
     23 
     24 #xyz {
     25   position: absolute;
     26   z-index: 4;
     27 }
     28 
     29 #foobar {
     30   position: absolute;
     31   z-index: 5;
     32 }
     33 
     34 #åèiöú {
     35   position: absolute;
     36   z-index: 6;
     37 }
     38 
     39 </style>
     40 </head>
     41 <body>
     42 <h1>The id attribute</h1>
     43 <div id="log"></div>
     44 <i id="abcd"></i>
     45 <i id="ABCD"></i>
     46 <i id="a b"></i>
     47 <i id="åèiöú"></i>
     48 <script src="/resources/testharness.js"></script>
     49 <script src="/resources/testharnessreport.js"></script>
     50 <script>
     51    // id is associated for purposes of getElementById
     52    test(function() {
     53        assert_equals(document.getElementById("abcd"), document.getElementsByTagName("i")[0]);
     54    }, "User agents must associate the element with an id value for purposes of getElementById.");
     55 
     56    test(function() {
     57        assert_equals(document.getElementById("ABCD"), document.getElementsByTagName("i")[1]);
     58    }, "Association is exact and therefore case-sensitive for getElementById.");
     59 
     60    test(function() {
     61        assert_equals(document.getElementById("a b"), document.getElementsByTagName("i")[2]);
     62    }, "Spaces are allowed in an id and still make an association for getElementByID.");
     63 
     64    test(function() {
     65        assert_equals(document.getElementById("åèiöú"), document.getElementsByTagName("i")[3]);
     66    }, "Non-ASCII is allowed in an id and still make an association for getElementById.");
     67 
     68 
     69    // id is associated for purposes of CSS
     70    test(function() {
     71        assert_equals(document.defaultView.getComputedStyle(document.getElementById("abcd")).zIndex, "1");
     72    }, "User agents must associate the element with an id value for purposes of CSS.");
     73 
     74    test(function() {
     75        assert_equals(document.defaultView.getComputedStyle(document.getElementById("ABCD")).zIndex, "2");
     76    }, "Association for CSS is exact and therefore case-sensitive.");
     77 
     78    test(function() {
     79        assert_equals(document.defaultView.getComputedStyle(document.getElementById("a b")).zIndex, "3");
     80    }, "Spaces are allowed in an id and still make an association.");
     81 
     82    test(function() {
     83        assert_equals(document.defaultView.getComputedStyle(document.getElementById("åèiöú")).zIndex, "6");
     84    }, "Non-ASCII is allowed in an id and still make an association for CSS.");
     85 
     86 
     87    // id IDL attribute reflects the content attribute
     88    var firstSpan = document.getElementById("abcd");
     89 
     90    test(function() {
     91        assert_equals(firstSpan.id, "abcd");
     92    }, "The id IDL attribute must reflect the id content attribute, for getting.");
     93 
     94    test(function() {
     95        firstSpan.id = "xyz";
     96        assert_equals(firstSpan.getAttribute("id"), "xyz");
     97    }, "The id IDL attribute must reflect the id content attribute, for setting via IDL attribute.");
     98 
     99    test(function() {
    100        assert_equals(document.getElementById("xyz"), firstSpan);
    101    }, "After setting id via id attribute, getElementById find the element by the new id.");
    102 
    103    test(function() {
    104        assert_equals(document.getElementById("abcd"), null);
    105    }, "After setting id via id attribute, getElementById doesn't find the element by the old id.");
    106 
    107    test(function() {
    108        assert_equals(document.defaultView.getComputedStyle(firstSpan).zIndex, "4");
    109    }, "After setting id via id attribute, CSS association is via the new ID.");
    110 
    111    test(function() {
    112        firstSpan.setAttribute("id", "foobar");
    113        assert_equals(firstSpan.id, "foobar");
    114    }, "The id IDL attribute must reflect the id content attribute, for setting via setAttribute.");
    115 
    116    test(function() {
    117        assert_equals(document.getElementById("foobar"), firstSpan);
    118    }, "After setting id via setAttribute attribute, getElementById find the element by the new id.");
    119 
    120    test(function() {
    121        assert_equals(document.getElementById("xyz"), null);
    122    }, "After setting id via setAttribute attribute, getElementById doesn't find the element by the old id.");
    123 
    124    test(function() {
    125        assert_equals(document.defaultView.getComputedStyle(firstSpan).zIndex, "5");
    126    }, "After setting id via setAttribute attribute, CSS association is via the new ID.");
    127 
    128 </script>
    129 </body>
    130 </html>