third_party/WebKit/LayoutTests/accessibility/heading-level.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <body>
   4 <script src="../resources/js-test.js"></script>
   5
   6 <!-- implicit level of tag -->
   7 <h1 class="ex" data-expected="1">X</h1>
   8 <h2 class="ex" data-expected="2">X</h2>
   9 <h3 class="ex" data-expected="3">X</h3>
  10 <h4 class="ex" data-expected="4">X</h4>
  11 <h5 class="ex" data-expected="5">X</h5>
  12 <h6 class="ex" data-expected="6">X</h6>
  13
  14 <!-- explicit aria-level overrides on h1-h6 (withOUT explicit heading role declaration) does not work in current WebKit. -->
  15 <!-- Waiting on thread resolution to determine if it's a bug: http://lists.w3.org/Archives/Public/wai-xtech/2013Jan/0019.html -->
  16 <!--
  17 <h6 class="ex" data-expected="1" aria-level="1">X</h6>
  18 <h5 class="ex" data-expected="2" aria-level="2">X</h5>
  19 <h4 class="ex" data-expected="3" aria-level="3">X</h4>
  20 <h3 class="ex" data-expected="4" aria-level="4">X</h3>
  21 <h2 class="ex" data-expected="5" aria-level="5">X</h2>
  22 <h1 class="ex" data-expected="6" aria-level="6">X</h1>
  23 -->
  24
  25 <!-- explicit aria-level overrides on h1-h6 (with explicit heading role declaration) -->
  26 <h6 class="ex" role="heading" data-expected="1" aria-level="1">X</h6>
  27 <h5 class="ex" role="heading" data-expected="2" aria-level="2">X</h5>
  28 <h4 class="ex" role="heading" data-expected="3" aria-level="3">X</h4>
  29 <h3 class="ex" role="heading" data-expected="4" aria-level="4">X</h3>
  30 <h2 class="ex" role="heading" data-expected="5" aria-level="5">X</h2>
  31 <h1 class="ex" role="heading" data-expected="6" aria-level="6">X</h1>
  32
  33 <!-- explicit aria-level set on div with explicit heading role declaration -->
  34 <div class="ex" role="heading" data-expected="1" aria-level="1">X</div>
  35 <div class="ex" role="heading" data-expected="2" aria-level="2">X</div>
  36 <div class="ex" role="heading" data-expected="3" aria-level="3">X</div>
  37 <div class="ex" role="heading" data-expected="4" aria-level="4">X</div>
  38 <div class="ex" role="heading" data-expected="5" aria-level="5">X</div>
  39 <div class="ex" role="heading" data-expected="6" aria-level="6">X</div>
  40
  41 <!-- todo: h1 elements nested in section elements should inherit nested level. -->
  42
  43 <div id="console"></div>
  44 <script>
  45 if (window.testRunner && window.accessibilityController) {
  46     description("This tests that headings have a level matching the implicit default value or explicitly defined aria-level value.")
  47     var examples = document.querySelectorAll('.ex');
  48     for (var i = 0, c = examples.length; i < c; i++) {
  49         var el = examples[i];
  50         el.id = 'ex' + i;
  51         var axElement = accessibilityController.accessibleElementById(el.id);
  52         var result = document.getElementById('console');
  53
  54         // Test AXLevel.
  55         if (axElement.intValue == parseInt(el.getAttribute('data-expected'))) {
  56             result.innerText += "PASS: level is " + axElement.intValue + ".\n";
  57         } else {
  58             result.innerText += "FAIL: level is " + axElement.intValue + " for " + el.outerHTML + ", expected " + parseInt(el.getAttribute('data-expected')) + ".\n";
  59         }
  60         el.style.display = 'none'; // Hide each example after verification.
  61     }
  62 }
  63 </script>
  64 </body>
  65 </html>