layout/style/test/test_of_type_selectors.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <!--
   3 https://bugzilla.mozilla.org/show_bug.cgi?id=75375
   4 -->
   5 <head>
   6   <title>Test for *-of-type selectors in Bug 75375</title>
   7   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   8   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   9 </head>
  10 <body>
  11 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=75375">Mozilla Bug 75375</a>
  12 <div id="content" style="display: none"
  13      xmlns:html="http://www.w3.org/1999/xhtml">
  14
  15 <p>This is a <code>p</code> element in the HTML namespace.</p>
  16 <p>This is a second <code>p</code> element in the HTML namespace.</p>
  17 <html:p>This is an <code>html:p</code> element in the HTML namespace.</html:p>
  18 <p xmlns="http://www.example.com/ns">This is a <code>p</code> element in the <code>http://www.example.com/ns</code> namespace.</p>
  19 <html:address>This is an <code>html:address</code> element in the HTML namespace.</html:address>
  20 <address xmlns="">This is a <code>address</code> element in no namespace.</address>
  21 <address xmlns="">This is a <code>address</code> element in no namespace.</address>
  22 <p xmlns="">This is a <code>p</code> element in no namespace.</p>
  23
  24 </div>
  25 <pre id="test">
  26 <script class="testbody" type="text/javascript">
  27 <![CDATA[
  28
  29 /** Test for *-of-type selectors in Bug 75375 **/
  30
  31 var HTML_NS = "http://www.w3.org/1999/xhtml";
  32
  33 function setup_style_text() {
  34     var result = document.createCDATASection("");
  35     var style = document.createElementNS(HTML_NS, "style");
  36     style.appendChild(result);
  37     document.getElementsByTagName("head")[0].appendChild(style);
  38     return result;
  39 }
  40
  41 function run() {
  42     var styleText = setup_style_text();
  43
  44     var elements = [];
  45
  46     var div = document.getElementById("content");
  47     for (let i = 0; i < div.childNodes.length; ++i) {
  48         var child = div.childNodes[i];
  49         if (child.nodeType == Node.ELEMENT_NODE)
  50             elements.push(child);
  51     }
  52
  53     var counter = 0;
  54
  55     function test_selector(selector, match_indices, notmatch_indices)
  56     {
  57         var zi = ++counter;
  58         styleText.data = selector + " { z-index: " + zi + " }";
  59         let i;
  60         for (i in match_indices) {
  61             var e = elements[match_indices[i]];
  62             is(getComputedStyle(e, "").zIndex, String(zi),
  63                "element " + match_indices[i] + " matched " + selector);
  64         }
  65         for (i in notmatch_indices) {
  66             var e = elements[notmatch_indices[i]];
  67             is(getComputedStyle(e, "").zIndex, "auto",
  68                "element " + notmatch_indices[i] + " did not match " + selector);
  69         }
  70     }
  71
  72     // 0 - html:p
  73     // 1 - html:p
  74     // 2 - html:p
  75     // 3 - example:p
  76     // 4 - html:address
  77     // 5 - :address
  78     // 6 - :address
  79     // 7 - :p
  80     test_selector(":nth-of-type(1)", [0, 3, 4, 5, 7], [1, 2, 6]);
  81     test_selector(":nth-last-of-type(1)", [2, 3, 4, 6, 7], [0, 1, 5]);
  82     test_selector(":nth-last-of-type(-n+1)", [2, 3, 4, 6, 7], [0, 1, 5]);
  83     test_selector(":nth-of-type(even)", [1, 6], [0, 2, 3, 4, 5, 7]);
  84     test_selector(":nth-last-of-type(odd)", [0, 2, 3, 4, 6, 7], [1, 5]);
  85     test_selector(":nth-last-of-type(n+2)", [0, 1, 5], [2, 3, 4, 6, 7]);
  86     test_selector(":first-of-type", [0, 3, 4, 5, 7], [1, 2, 6]);
  87     test_selector(":last-of-type", [2, 3, 4, 6, 7], [0, 1, 5]);
  88     test_selector(":only-of-type", [3, 4, 7], [0, 1, 2, 5, 6]);
  89 }
  90
  91 run();
  92
  93 ]]>
  94 </script>
  95 </pre>
  96 </body>
  97 </html>