third_party/WebKit/LayoutTests/accessibility/name-calc-summary.html

   1 <!DOCTYPE HTML>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <style>
   6 .hideAllContainers .container {
   7     display: none;
   8 }
   9 </style>
  10
  11 <div class="container">
  12   <details id="details1">
  13     <p>details1-content</p>
  14   </details>
  15 </div>
  16
  17 <script>
  18 test(function(t) {
  19     var axDetails1 = accessibilityController.accessibleElementById("details1");
  20     var axSummary1 = axDetails1.childAtIndex(0);
  21     assert_equals(axSummary1.role, "AXRole: AXDisclosureTriangle");
  22     assert_equals(axSummary1.name, "Details");
  23     assert_equals(axSummary1.nameFrom, "contents");
  24 }, "Details element with no summary");
  25 </script>
  26
  27 <div class="container">
  28   <details id="details2">
  29     <summary id="summary2" title="summary2-title"></summary>
  30     <p>details2-content</p>
  31   </details>
  32 </div>
  33
  34 <script>
  35 test(function(t) {
  36     var axSummary2 = accessibilityController.accessibleElementById("summary2");
  37     assert_equals(axSummary2.name, "summary2-title");
  38     assert_equals(axSummary2.nameFrom, "attribute");
  39 }, "Summary with title and no contents");
  40 </script>
  41
  42 <div class="container">
  43   <details id="details3">
  44     <summary id="summary3" title="summary3-title">summary3-contents</summary>
  45     <p>details3-content</p>
  46   </details>
  47 </div>
  48
  49 <script>
  50 test(function(t) {
  51     var axSummary3 = accessibilityController.accessibleElementById("summary3");
  52     assert_equals(axSummary3.name, "summary3-contents");
  53     assert_equals(axSummary3.nameFrom, "contents");
  54 }, "Summary with title and no contents");
  55 </script>
  56
  57 <div class="container">
  58   <details id="details4">
  59     <summary id="summary4" title="summary4-title" aria-label="summary4-aria-label">summary4-contents</summary>
  60     <p>details4-content</p>
  61   </details>
  62 </div>
  63
  64 <script>
  65 test(function(t) {
  66     var axSummary4 = accessibilityController.accessibleElementById("summary4");
  67     assert_equals(axSummary4.name, "summary4-aria-label");
  68     assert_equals(axSummary4.nameFrom, "attribute");
  69 }, "Summary with title and no contents");
  70 </script>
  71
  72 <div class="container">
  73   <details id="details5">
  74     <summary id="summary5" title="summary5-title" aria-label="summary5-aria-label" aria-labelledby="labelledby5">summary5-contents</summary>
  75     <p>details5-content</p>
  76   </details>
  77   <span hidden="true" id="labelledby5">summary5-aria-labelledby</span>
  78 </div>
  79
  80 <script>
  81 test(function(t) {
  82     var axSummary5 = accessibilityController.accessibleElementById("summary5");
  83     assert_equals(axSummary5.name, "summary5-aria-labelledby");
  84     assert_equals(axSummary5.nameFrom, "relatedElement");
  85 }, "Summary with title and no contents");
  86 </script>
  87
  88 <script>
  89 if (window.testRunner)
  90     document.body.className = "hideAllContainers";
  91 </script>