The Tor Browser: accessible/tests/mochitest/name/test

     1 <html>

     3 <head>

     4   <title>nsIAccessible::name calculation</title>

     5   <link rel="stylesheet" type="text/css"

     6         href="chrome://mochikit/content/tests/SimpleTest/test.css" />

     8   <script type="application/javascript"

     9           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

    11   <script type="application/javascript"

    12           src="../common.js"></script>

    13   <script type="application/javascript"

    14           src="../name.js"></script>

    16   <script type="application/javascript">

    18     function doTest()

    19     {

    20       // aria-label

    22       // Simple label provided via ARIA

    23       testName("btn_simple_aria_label", "I am a button");

    25       // aria-label and aria-labelledby, expect aria-labelledby

    26       testName("btn_both_aria_labels", "text I am a button, two");

    28       //////////////////////////////////////////////////////////////////////////

    29       // aria-labelledby

    31       // Single relation. The value of 'aria-labelledby' contains the ID of

    32       // an element. Gets the name from text node of that element.

    33       testName("btn_labelledby_text", "text");

    35       // Multiple relations. The value of 'aria-labelledby' contains the IDs

    36       // of elements. Gets the name from text nodes of those elements.

    37       testName("btn_labelledby_texts", "text1 text2");

    39       //////////////////////////////////////////////////////////////////////////

    40       // Name from named accessible

    42       testName("input_labelledby_namedacc", "Data");

    44       //////////////////////////////////////////////////////////////////////////

    45       // Name from subtree (single relation labelled_by).

    47       // Gets the name from text nodes contained by nested elements

    48       testName("btn_labelledby_mixed", "nomore text");

    50       // Gets the name from text nodes contained by nested elements, ignores

    51       // hidden elements (bug 443081).

    52       testName("btn_labelledby_mixed_hidden_child", "nomore text2");

    54       // Gets the name from hidden text nodes contained by nested elements,

    55       // (label element is hidden entirely), (bug 443081).

    56       testName("btn_labelledby_mixed_hidden", "lala more hidden text");

    58       // Gets the name from text nodes contained by nested elements having block

    59       // representation (every text node value in the name should be devided by

    60       // spaces)

    61       testName("btn_labelledby_mixed_block", "text more text");

    63       // Gets the name from text nodes contained by html:td (every text node

    64       // value in the name should be devided by spaces).

    65       // XXX: this case is rather a feature than strong wanted behaviour.

    66       testName("btn_labelledby_mixed_table", "text space text");

    68       // Gets the name from image accessible.

    69       testName("btn_labelledby_mixed_img", "text image");

    71       // Gets the name from input accessibles

    72       // Note: if input have label elements then the name isn't calculated

    73       // from them.

    74       testName("btn_labelledby_mixed_input",

    75                "input button Submit Query Reset Submit Query");

    77       // Gets the name from the title of object element.

    78       testName("btn_labelledby_mixed_object", "object");

    80       // Gets the name from text nodes. Element br adds space between them.

    81       testName("btn_labelledby_mixed_br", "text text");

    83       // Gets the name from label content which allows name from subtree,

    84       // ignore @title attribute on label

    85       testName("from_label_ignoretitle", "Country:");

    87       // Gets the name from html:p content, which doesn't allow name from

    88       // subtree, ignore @title attribute on label

    89       testName("from_p_ignoretitle", "Choose country from.");

    91       // Gets the name from html:input value, ignore @title attribute on input

    92       testName("from_input_ignoretitle", "Custom country");

    94       // Insert spaces around the control's value to not jamm sibling text nodes

    95       testName("insert_spaces_around_control", "start value end");

    97       // Gets the name from @title, ignore whitespace content

    98       testName("from_label_ignore_ws_subtree", "about");

   100       //////////////////////////////////////////////////////////////////////////

   101       // label element

   103       // The label element contains the button. The name is calculated from

   104       // this button.

   105       // Note: the name contains the content of the button.

   106       testName("btn_label_inside", "text10text");

   108       // The label element and the button are placed in the same form. Gets

   109       // the name from the label subtree.

   110       testName("btn_label_inform", "in form");

   112       // The label element is placed outside of form where the button is.

   113       // Take into account the label.

   114       testName("btn_label_outform", "out form");

   116       // The label element and the button are in the same document. Gets the

   117       // name from the label subtree.

   118       testName("btn_label_indocument", "in document");

   120       // Multiple label elements for single button

   121       testName("btn_label_multi", "label1label2");

   124       //////////////////////////////////////////////////////////////////////////

   125       // name from children

   127       // ARIA role button is presented allowing the name calculation from

   128       // children.

   129       testName("btn_children", "14");

   131       // html:button, no name from content

   132       testName("btn_nonamefromcontent", null);

   134       // ARIA role option is presented allowing the name calculation from

   135       // visible children (bug 443081).

   136       testName("lb_opt1_children_hidden", "i am visible");

   138       // Get the name from subtree of menuitem crossing role nothing to get

   139       // the name from its children.

   140       testName("tablemenuitem", "menuitem 1");

   142       // Get the name from child acronym title attribute rather than from

   143       // acronym content.

   144       testName("label_with_acronym", "O A T F World Wide Web");

   146       testName("testArticle", "Test article");

   148       //////////////////////////////////////////////////////////////////////////

   149       // title attribute

   151       // If nothing is left. Let's try title attribute.

   152       testName("btn_title", "title");

   154       //////////////////////////////////////////////////////////////////////////

   155       // textarea name

   157       // textarea's name should have the value, which initially is specified by

   158       // a text child.

   159       testName("textareawithchild", "Story Foo is ended.");

   161       // new textarea name should reflect the value change.

   162       var elem = document.getElementById("textareawithchild");

   163       elem.value = "Bar";

   165       testName("textareawithchild", "Story Bar is ended.");

   167       //////////////////////////////////////////////////////////////////////////

   168       // controls having a value used as a part of computed name

   170       testName("ctrlvalue_progressbar:input", "foo 5 baz");

   171       testName("ctrlvalue_scrollbar:input", "foo 5 baz");

   172       testName("ctrlvalue_slider:input", "foo 5 baz");

   173       testName("ctrlvalue_spinbutton:input", "foo 5 baz");

   174       testName("ctrlvalue_combobox:input", "foo 5 baz");

   177       /////////////////////////////////////////////////////////////////////////

   178       // label with nested combobox (test for 'f' item of name computation guide)

   180       testName("comboinstart", "One day(s).");

   181       testName("combo3", "day(s).");

   183       testName("textboxinstart", "Two days.");

   184       testName("textbox1", "days.");

   186       testName("comboinmiddle", "Subscribe to ATOM feed.");

   187       testName("combo4", "Subscribe to ATOM feed.");

   189       testName("comboinmiddle2", "Play the Haliluya sound when new mail arrives");

   190       testName("combo5", null); // label isn't used as a name for control

   191       testName("checkbox", "Play the Haliluya sound when new mail arrives");

   192       testName("comboinmiddle3", "Play the Haliluya sound when new mail arrives");

   193       testName("combo6", "Play the Haliluya sound when new mail arrives");

   195       testName("comboinend", "This day was sunny");

   196       testName("combo7", "This day was");

   198       testName("textboxinend", "This day was sunny");

   199       testName("textbox2", "This day was");

   201       // placeholder

   202       testName("ph_password", "a placeholder");

   203       testName("ph_text", "a placeholder");

   204       testName("ph_textarea", "a placeholder");

   205       testName("ph_text2", "a label");

   206       testName("ph_textarea2", "a label");

   207       testName("ph_text3", "a label");

   209       // Test equation image

   210       testName("img_eq", "x^2 + y^2 + z^2")

   211       testName("input_img_eq", "x^2 + y^2 + z^2")

   212       testName("txt_eq", "x^2 + y^2 + z^2")

   214       ////////////////////////////////////////////////////////////////////////

   215       // tests for duplicate announcement of content

   217       testName("test_note", null);

   219       SimpleTest.finish();

   220     }

   222     SimpleTest.waitForExplicitFinish();

   223     addA11yLoadEvent(doTest);

   224   </script>

   226 </head>

   228 <body>

   230   <a target="_blank"

   231      href="https://bugzilla.mozilla.org/show_bug.cgi?id=428479"

   232      title="Bug 428479 - Support ARIA role=math">

   233     Bug 428479

   234   </a>

   235   <a target="_blank"

   236      href="https://bugzilla.mozilla.org/show_bug.cgi?id=429666"

   237      title="Expose ROLE_DOCUMENT for ARIA landmarks that inherit from document">

   238     Bug 429666

   239   </a>

   240   <a target="_blank"

   241      href="https://bugzilla.mozilla.org/show_bug.cgi?id=444279"

   242      title="mochitest for accessible name calculating">

   243     Bug 444279

   244   </a>

   245   <a target="_blank"

   246      href="https://bugzilla.mozilla.org/show_bug.cgi?id=459635"

   247      title="nsIAccessible::name calculation for HTML buttons">

   248     Bug 459635

   249   </a>

   250   <a target="_blank"

   251      href="https://bugzilla.mozilla.org/show_bug.cgi?id=530081"

   252      title="Clean up our tree walker">

   253     Bug 530081

   254   </a><br>

   255   <a target="_blank"

   256      href="https://bugzilla.mozilla.org/show_bug.cgi?id=604391"

   257      title="Use placeholder as name if name is otherwise empty">

   258     Bug 604391

   259   </a>

   260   <a target="_blank"

   261      href="https://bugzilla.mozilla.org/show_bug.cgi?id=669312"

   262      title="Accessible name is duplicated when input has a label associated uisng for/id and is wrapped around the input">

   263     Bug 669312

   264   </a>

   265   <a target="_blank"

   266      href="https://bugzilla.mozilla.org/show_bug.cgi?id=704416"

   267      title="HTML acronym and abbr names should be provided by @title">

   268     Bug 704416

   269   </a>

   270   <a target="_blank"

   271      href="https://bugzilla.mozilla.org/show_bug.cgi?id=812041"

   272      title="ARIA slider and spinbutton don't provide a value for name computation">

   273     Bug 812041

   274   </a>

   275   <a target="_blank"

   276      href="https://bugzilla.mozilla.org/show_bug.cgi?id=823927"

   277      title="Text is jammed with control's text in name computation">

   278     Bug 823927

   279   </a>

   280   <a target="_blank"

   281      href="https://bugzilla.mozilla.org/show_bug.cgi?id=835666"

   282      title="ARIA combobox selected value is not a part of name computation">

   283     Bug 835666

   284   </a>

   285   <a target="_blank"

   286      href="https://bugzilla.mozilla.org/show_bug.cgi?id=833256"

   287      title="role note shouldn't pick up the name from subtree">

   288     Mozilla Bug 833256

   289    </a>

   290   <p id="display"></p>

   291   <div id="content" style="display: none"></div>

   292   <pre id="test">

   293   </pre>

   295   <!-- aria-label, simple label -->

   296   <span id="btn_simple_aria_label" role="button" aria-label="I am a button"/>

   297   <br/>

   298   <!-- aria-label plus aria-labelledby -->

   299   <span id="btn_both_aria_labels" role="button" aria-label="I am a button, two"

   300         aria-labelledby="labelledby_text btn_both_aria_labels"/>

   301   <br/>

   303   <!-- aria-labelledby, single relation -->

   304   <span id="labelledby_text">text</span>

   305   <button id="btn_labelledby_text"

   306           aria-labelledby="labelledby_text">1</button>

   307   <br/>

   309   <!-- aria-labelledby, multiple relations -->

   310   <span id="labelledby_text1">text1</span>

   311   <span id="labelledby_text2">text2</span>

   312   <button id="btn_labelledby_texts"

   313           aria-labelledby="labelledby_text1 labelledby_text2">2</button>

   314   <br/>

   316   <!-- name from named accessible -->

   317   <input id="labelledby_namedacc" type="checkbox"

   318          aria-label="Data" />

   319   <input id="input_labelledby_namedacc"

   320           aria-labelledby="labelledby_namedacc" />

   322   <!-- the name from subtree, mixed content -->

   323   <span id="labelledby_mixed">no<span>more text</span></span>

   324   <button id="btn_labelledby_mixed"

   325           aria-labelledby="labelledby_mixed">3</button>

   326   <br/>

   328   <!-- the name from subtree, mixed/hidden content -->

   329   <span id="labelledby_mixed_hidden_child">

   330     no<span>more

   331       <span style="display: none;">hidden</span>

   332       text2

   333       <span style="visibility: hidden">hidden2</span>

   334     </span>

   335   </span>

   336   <button id="btn_labelledby_mixed_hidden_child"

   337           aria-labelledby="labelledby_mixed_hidden_child">3.1</button>

   338   <br/>

   340   <!-- the name from subtree, mixed/completely hidden content -->

   341   <span id="labelledby_mixed_hidden"

   342         style="display: none;">lala <span>more hidden </span>text</span></span>

   343   <button id="btn_labelledby_mixed_hidden"

   344           aria-labelledby="labelledby_mixed_hidden">3.2</button>

   345   <br/>

   347   <!-- the name from subtree, mixed content, block structure -->

   348   <div id="labelledby_mixed_block"><div>text</div>more text</div></div>

   349   <button id="btn_labelledby_mixed_block"

   350           aria-labelledby="labelledby_mixed_block">4</button>

   351   <br/>

   353   <!-- the name from subtree, mixed content, table structure -->

   354   <table><tr>

   355     <td id="labelledby_mixed_table">text<span>space</span>text</td>

   356   </tr></table>

   357   <button id="btn_labelledby_mixed_table"

   358           aria-labelledby="labelledby_mixed_table">5</button>

   359   <br/>

   361   <!-- the name from subtree, child img -->

   362   <span id="labelledby_mixed_img">text<img alt="image"/></span>

   363   <button id="btn_labelledby_mixed_img"

   364           aria-labelledby="labelledby_mixed_img">6</button>

   365   <br/>

   367   <!-- the name from subtree, child inputs -->

   368   <span id="labelledby_mixed_input">

   369     <input type="button" id="input_button" title="input button"/>

   370     <input type="submit" id="input_submit"/>

   371     <input type="reset" id="input_reset"/>

   372     <input type="image" id="input_image" title="input image"/>

   373   </span>

   374   <button id="btn_labelledby_mixed_input"

   375           aria-labelledby="labelledby_mixed_input">7</button>

   376   <br/>

   378   <!-- the name from subtree, child object -->

   379   <span id="labelledby_mixed_object">

   380     <object data="about:blank" title="object"></object>

   381   </span>

   382   <button id="btn_labelledby_mixed_object"

   383           aria-labelledby="labelledby_mixed_object">8</button>

   384   <br/>

   386   <!-- the name from subtree, child br -->

   387   <span id="labelledby_mixed_br">text<br/>text</span>

   388   <button id="btn_labelledby_mixed_br"

   389           aria-labelledby="labelledby_mixed_br">9</button>

   390   <br/>

   392   <!-- the name from subtree, name from label content rather than from its title

   393     attribute -->

   394   <label  for="from_label_ignoretitle"

   395           title="Select your country of origin">Country:</label>

   396   <select id="from_label_ignoretitle">

   397     <option>Germany</option>

   398     <option>Russia</option>

   399   </select>

   401   <!-- the name from subtree, name from html:p content rather than from its

   402     title attribute -->

   403   <p id="p_ignoretitle"

   404      title="Select your country of origin">Choose country from.</p>

   405   <select id="from_p_ignoretitle" aria-labelledby="p_ignoretitle">

   406     <option>Germany</option>

   407     <option>Russia</option>

   408   </select>

   410   <!-- the name from subtree, name from html:input value rather than from its

   411     title attribute -->

   412   <p id="from_input_ignoretitle" aria-labelledby="input_ignoretitle">Country</p>

   413   <input id="input_ignoretitle"

   414          value="Custom country"

   415          title="Input your country of origin"/ >

   417   <!-- name from subtree, surround control by spaces to not jamm the text -->

   418   <label id="insert_spaces_around_control">

   419     start<input value="value">end

   420   </label>

   422   <!-- no name from subtree because it holds whitespaces only -->

   423   <a id="from_label_ignore_ws_subtree" href="about:" title="about">&nbsp;&nbsp;  </a>

   425   <!-- label element, label contains control -->

   426   <label>text<button id="btn_label_inside">10</button>text</label>

   427   <br/>

   429   <!-- label element, label and the button are in the same form -->

   430   <form>

   431     <label for="btn_label_inform">in form</label>

   432     <button id="btn_label_inform">11</button>

   433   </form>

   435   <!-- label element, label is outside of the form of the button -->

   436   <label for="btn_label_outform">out form</label>

   437   <form>

   438     <button id="btn_label_outform">12</button>

   439   </form>

   441   <!-- label element, label and the button are in the same document -->

   442   <label for="btn_label_indocument">in document</label>

   443   <button id="btn_label_indocument">13</button>

   445   <!-- multiple label elements for single button -->

   446   <label for="btn_label_multi">label1</label>

   447   <label for="btn_label_multi">label2</label>

   448   <button id="btn_label_multi">button</button>

   450   <!-- name from children -->

   451   <span id="btn_children" role="button">14</span>

   453   <!-- no name from content, ARIA role overrides this rule -->

   454   <button id="btn_nonamefromcontent" role="img">1</button>

   456   <!-- name from children, hidden children -->

   457   <div role="listbox" tabindex="0">

   458     <div id="lb_opt1_children_hidden" role="option" tabindex="0">

   459       <span>i am visible</span>

   460       <span style="display:none">i am hidden</span>

   461     </div>

   462   </div>

   464   <table role="menu">

   465     <tr role="menuitem" id="tablemenuitem">

   466       <td>menuitem 1</td>

   467     </tr>

   468     <tr role="menuitem">

   469       <td>menuitem 2</td>

   470     </tr>

   471   </table>

   473   <label id="label_with_acronym">

   474     <acronym title="O A T F">OATF</acronym>

   475     <abbr title="World Wide Web">WWW</abbr>

   476   </label>

   478   <div id="testArticle" role="article" title="Test article">

   479     <p>This is a paragraph inside the article.</p>

   480   </div>

   482   <!-- name from title attribute -->

   483   <span id="btn_title" role="group" title="title">15</span>

   485   <!-- A textarea nested in a label with a text child (bug #453371). -->

   486   <form>

   487     <label>Story

   488       <textarea id="textareawithchild" name="name">Foo</textarea>

   489       is ended.

   490     </label>

   491   </form>

   493   <!-- controls having a value used as part of computed name -->

   494   <input type="checkbox" id="ctrlvalue_progressbar:input">

   495   <label for="ctrlvalue_progressbar:input">

   496     foo <span role="progressbar"

   497                aria-valuenow="5" aria-valuemin="1"

   498                aria-valuemax="10">5</span> baz

   499   </label>

   501   <input type="checkbox" id="ctrlvalue_scrollbar:input" />

   502   <label for="ctrlvalue_scrollbar:input">

   503     foo <span role="scrollbar"

   504               aria-valuenow="5" aria-valuemin="1"

   505               aria-valuemax="10">5</span> baz

   506   </label>

   508   <input type="checkbox" id="ctrlvalue_slider:input">

   509   <label for="ctrlvalue_slider:input">

   510     foo <input role="slider" type="range"

   511                value="5" min="1" max="10"

   512                aria-valuenow="5" aria-valuemin="1"

   513                aria-valuemax="10"> baz

   514   </label>

   516   <input type="checkbox" id="ctrlvalue_spinbutton:input">

   517   <label for="ctrlvalue_spinbutton:input">

   518     foo <input role="spinbutton" type="number"

   519                value="5" min="1" max="10"

   520                aria-valuenow="5" aria-valuemin="1"

   521                aria-valuemax="10">

   522     baz

   523   </label>

   525   <input type="checkbox" id="ctrlvalue_combobox:input">

   526   <label for="ctrlvalue_combobox:input">

   527     foo

   528     <div role="combobox">

   529       <div role="textbox"></div>

   530       <ul role="listbox" style="list-style-type: none;">

   531         <li role="option">1</li>

   532         <li role="option" aria-selected="true">5</li>

   533         <li role="option">3</li>

   534       </ul>

   535     </div>

   536     baz

   537   </label>

   539   <!-- a label with a nested control in the start, middle and end -->

   540   <form>

   541     <!-- at the start (without and with whitespaces) -->

   542     <label id="comboinstart"><select id="combo3">

   543         <option>One</option>

   544         <option>Two</option>

   545       </select>

   546       day(s).

   547     </label>

   549     <label id="textboxinstart">

   550       <input id="textbox1" value="Two">

   551       days.

   552     </label>

   554     <!-- in the middle -->

   555     <label id="comboinmiddle">

   556       Subscribe to

   557       <select id="combo4" name="occupation">

   558         <option>ATOM</option>

   559         <option>RSS</option>

   560       </select>

   561       feed.

   562     </label>

   564     <label id="comboinmiddle2" for="checkbox">Play the

   565       <select id="combo5">

   566         <option>Haliluya</option>

   567         <option>Hurra</option>

   568       </select>

   569       sound when new mail arrives

   570     </label>

   571     <input id="checkbox" type="checkbox" />

   573     <label id="comboinmiddle3" for="combo6">Play the

   574       <select id="combo6">

   575         <option>Haliluya</option>

   576         <option>Hurra</option>

   577       </select>

   578       sound when new mail arrives

   579     </label>

   581     <!-- at the end (without and with whitespaces) -->

   582     <label id="comboinend">

   583       This day was

   584       <select id="combo7" name="occupation">

   585         <option>sunny</option>

   586         <option>rainy</option>

   587       </select></label>

   589     <label id="textboxinend">

   590       This day was

   591       <input id="textbox2" value="sunny">

   592     </label>

   593   </form>

   595   <!-- placeholder  -->

   596   <input id="ph_password" type="password" value="" placeholder="a placeholder" />

   597   <input id="ph_text" type="text" placeholder="a placeholder" />

   598   <textarea id="ph_textarea" cols="5" placeholder="a placeholder"></textarea>

   600   <!-- placeholder does not win -->

   601   <input id="ph_text2" type="text" aria-label="a label" placeholder="meh" />

   602   <textarea id="ph_textarea2" cols="5" aria-labelledby="ph_text2"

   603             placeholder="meh"></textarea>

   605   <label for="ph_text3">a label</label>

   606   <input id="ph_text3" placeholder="meh" />

   608   <p>Image:

   609     <img id="img_eq" role="math" src="foo" alt="x^2 + y^2 + z^2">

   610     <input type="image"  id="input_img_eq" src="foo" alt="x^2 + y^2 + z^2">

   611   </p>

   613   <p>Text:

   614     <span id="txt_eq" role="math" title="x^2 + y^2 + z^2">x<sup>2</sup> +

   615       y<sup>2</sup> + z<sup>2</sup></span>

   617   <!-- duplicate announcement -->

   618   <div id="test_note" role="note">subtree</div>

   620 </body>

   621 </html>

The Tor Browser / file revision

accessible/tests/mochitest/name/test_general.html@7e26c7da4463

accessible/tests/mochitest/name/test_general.html