gecko/accessible/tests/mochitest/test_nsIAccessible_name.html

286 lines
9.9 KiB
HTML
Raw Normal View History

<html>
<head>
<title>nsIAccessible::name calculation</title>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script type="application/javascript"
src="chrome://mochikit/content/MochiKit/packed.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/a11y/accessible/common.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/a11y/accessible/nsIAccessible_name.js"></script>
<script type="application/javascript">
function doTest()
{
// aria-label
// Simple label provided via ARIA
testName("btn_simple_aria_label", "I am a button");
// aria-label and aria-labelledby, expect aria-label
testName("btn_both_aria_labels", "I am a button, two");
//////////////////////////////////////////////////////////////////////////
// aria-labelledby
// Single relation. The value of 'aria-labelledby' contains the ID of
// an element. Gets the name from text node of that element.
testName("btn_labelledby_text", "text");
// Multiple relations. The value of 'aria-labelledby' contains the IDs
// of elements. Gets the name from text nodes of those elements.
testName("btn_labelledby_texts", "text1 text2");
//////////////////////////////////////////////////////////////////////////
// Name from subtree (single relation labelled_by).
// Gets the name from text nodes contained by nested elements
testName("btn_labelledby_mixed", "nomore text");
// Gets the name from text nodes contained by nested elements, ignores
// hidden elements (bug 443081).
testName("btn_labelledby_mixed_hidden_child", "nomore text2");
// Gets the name from hidden text nodes contained by nested elements,
// (label element is hidden entirely), (bug 443081).
testName("btn_labelledby_mixed_hidden", "lala more hidden text");
// Gets the name from text nodes contained by nested elements having block
// representation (every text node value in the name should be devided by
// spaces)
testName("btn_labelledby_mixed_block", "text more text");
// Gets the name from text nodes contained by html:td (every text node
// value in the name should be devided by spaces).
// XXX: this case is rather a feature than strong wanted behaviour.
testName("btn_labelledby_mixed_table", "text space text");
// Gets the name from image accessible.
testName("btn_labelledby_mixed_img", "text image");
// Gets the name from input accessibles
// Note: if input have label elements then the name isn't calculated
// from them.
testName("btn_labelledby_mixed_input",
"input button Submit Query Reset input image");
// Gets the name from the title of object element.
testName("btn_labelledby_mixed_object", "object");
// Gets the name from text nodes. Element br adds space between them.
testName("btn_labelledby_mixed_br", "text text");
//////////////////////////////////////////////////////////////////////////
// label element
// The label element contains the button. The name is calculated from
// this button.
// Note: the name contains the content of the button.
testName("btn_label_inside", "text10text");
// The label element and the button are placed in the same form. Gets
// the name from the label subtree.
testName("btn_label_inform", "in form");
// The label element is placed outside of form where the button is.
// Do not take into account the label.
testName("btn_label_outform", "12");
// The label element and the button are in the same document. Gets the
// name from the label subtree.
testName("btn_label_indocument", "in document");
//////////////////////////////////////////////////////////////////////////
// name from children
// ARIA role button is presented allowing the name calculation from
// children.
testName("btn_children", "14");
// ARIA role option is presented allowing the name calculation from
// visible children (bug 443081).
testName("lb_opt1_children_hidden", "i am visible");
//////////////////////////////////////////////////////////////////////////
// title attribute
// If nothing is left. Let's try title attribute.
testName("btn_title", "title");
//////////////////////////////////////////////////////////////////////////
// textarea name
// textarea's name should have the value, which initially is specified by
// a text child.
testName("textareawithchild", "Story: Foo");
// new textarea name should reflect the value change.
var elem = document.getElementById("textareawithchild");
elem.value = "Bar";
testName("textareawithchild", "Story: Bar");
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addLoadEvent(doTest);
</script>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=444279"
title="mochitest for accessible name calculating">
Mozilla Bug 444279
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<!-- aria-label, simple label -->
<span id="btn_simple_aria_label" role="button" aria-label="I am a button"/>
<br/>
<!-- aria-label plus aria-labelledby -->
<span id="btn_both_aria_labels" role="button" aria-label="I am a button, two"
aria-labelledby="labelledby_text"/>
<br/>
<!-- aria-labelledby, single relation -->
<span id="labelledby_text">text</span>
<button id="btn_labelledby_text"
aria-labelledby="labelledby_text">1</button>
<br/>
<!-- aria-labelledby, multiple relations -->
<span id="labelledby_text1">text1</span>
<span id="labelledby_text2">text2</span>
<button id="btn_labelledby_texts"
aria-labelledby="labelledby_text1 labelledby_text2">2</button>
<br/>
<!-- the name from subtree, mixed content -->
<span id="labelledby_mixed">no<span>more text</span></span>
<button id="btn_labelledby_mixed"
aria-labelledby="labelledby_mixed">3</button>
<br/>
<!-- the name from subtree, mixed/hidden content -->
<span id="labelledby_mixed_hidden_child">
no<span>more
<span style="display: none;">hidden</span>
text2
<span style="visibility: hidden">hidden2</span>
</span>
</span>
<button id="btn_labelledby_mixed_hidden_child"
aria-labelledby="labelledby_mixed_hidden_child">3.1</button>
<br/>
<!-- the name from subtree, mixed/completely hidden content -->
<span id="labelledby_mixed_hidden"
style="display: none;">lala <span>more hidden </span>text</span></span>
<button id="btn_labelledby_mixed_hidden"
aria-labelledby="labelledby_mixed_hidden">3.2</button>
<br/>
<!-- the name from subtree, mixed content, block structure -->
<div id="labelledby_mixed_block"><div>text</div>more text</div></div>
<button id="btn_labelledby_mixed_block"
aria-labelledby="labelledby_mixed_block">4</button>
<br/>
<!-- the name from subtree, mixed content, table structure -->
<table><tr>
<td id="labelledby_mixed_table">text<span>space</span>text</td>
</tr></table>
<button id="btn_labelledby_mixed_table"
aria-labelledby="labelledby_mixed_table">5</button>
<br/>
<!-- the name from subtree, child img -->
<span id="labelledby_mixed_img">text<img alt="image"/></span>
<button id="btn_labelledby_mixed_img"
aria-labelledby="labelledby_mixed_img">6</button>
<br/>
<!-- the name from subtree, child inputs -->
<span id="labelledby_mixed_input">
<input type="button" id="input_button" title="input button"/>
<input type="submit" id="input_submit"/>
<input type="reset" id="input_reset"/>
<input type="image" id="input_image" title="input image"/>
</span>
<button id="btn_labelledby_mixed_input"
aria-labelledby="labelledby_mixed_input">7</button>
<br/>
<!-- the name from subtree, child object -->
<span id="labelledby_mixed_object">
<object data="about:blank" title="object"></object>
</span>
<button id="btn_labelledby_mixed_object"
aria-labelledby="labelledby_mixed_object">8</button>
<br/>
<!-- the name from subtree, child br -->
<span id="labelledby_mixed_br">text<br/>text</span>
<button id="btn_labelledby_mixed_br"
aria-labelledby="labelledby_mixed_br">9</button>
<br/>
<!-- label element, label contains the button -->
<label>text<button id="btn_label_inside">10</button>text</label>
<br/>
<!-- label element, label and the button are in the same form -->
<form>
<label for="btn_label_inform">in form</label>
<button id="btn_label_inform">11</button>
</form>
<!-- label element, label is outside of the form of the button -->
<label for="btn_label_outform">out form</label>
<form>
<button id="btn_label_outform">12</button>
</form>
<!-- label element, label and the button are in the same document -->
<label for="btn_label_indocument">in document</label>
<button id="btn_label_indocument">13</button>
<!-- name from children -->
<span id="btn_children" role="button">14</span>
<!-- name from children, hidden children -->
<div role="listbox" tabindex="0">
<div id="lb_opt1_children_hidden" role="option" tabindex="0">
<span>i am visible</span>
<span style="display:none">i am hidden</span>
</div>
</div>
<!-- name from title attribute -->
<span id="btn_title" role="group" title="title">15</span>
<!-- A textarea nested in a label with a text child (bug #453371). -->
<form>
<label>Story:
<textarea id="textareawithchild" name="name">Foo</textarea>
</label>
</form>
</body>
</html>