2008-07-12 20:57:28 -07:00
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>nsIAccessible::name calculation</title>
|
2009-05-12 22:13:12 -07:00
|
|
|
<link rel="stylesheet" type="text/css"
|
|
|
|
|
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
2008-07-12 20:57:28 -07:00
|
|
|
|
2008-09-04 07:11:40 -07:00
|
|
|
<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>
|
2009-05-12 22:13:12 -07:00
|
|
|
|
2008-09-04 07:11:40 -07:00
|
|
|
<script type="application/javascript"
|
2010-11-20 17:02:16 -08:00
|
|
|
src="../common.js"></script>
|
2008-09-04 07:11:40 -07:00
|
|
|
<script type="application/javascript"
|
2010-11-20 17:02:16 -08:00
|
|
|
src="../name.js"></script>
|
2008-07-12 20:57:28 -07:00
|
|
|
|
|
|
|
|
<script type="application/javascript">
|
|
|
|
|
function doTest()
|
|
|
|
|
{
|
2008-09-04 07:11:40 -07:00
|
|
|
// aria-label
|
2008-07-12 20:57:28 -07:00
|
|
|
|
2008-09-04 07:11:40 -07:00
|
|
|
// Simple label provided via ARIA
|
|
|
|
|
testName("btn_simple_aria_label", "I am a button");
|
|
|
|
|
|
2010-08-06 06:58:15 -07:00
|
|
|
// aria-label and aria-labelledby, expect aria-labelledby
|
|
|
|
|
testName("btn_both_aria_labels", "text I am a button, two");
|
2008-07-12 20:57:28 -07:00
|
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// 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");
|
|
|
|
|
|
2009-02-18 23:06:14 -08:00
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// Name from named accessible
|
|
|
|
|
|
|
|
|
|
testName("input_labelledby_namedacc", "Data");
|
2008-07-12 20:57:28 -07:00
|
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// Name from subtree (single relation labelled_by).
|
|
|
|
|
|
|
|
|
|
// Gets the name from text nodes contained by nested elements
|
|
|
|
|
testName("btn_labelledby_mixed", "nomore text");
|
2008-07-16 08:24:36 -07:00
|
|
|
|
|
|
|
|
// 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");
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
// 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",
|
2011-01-31 07:53:09 -08:00
|
|
|
"input button Submit Query Reset Submit Query");
|
2008-07-12 20:57:28 -07:00
|
|
|
|
|
|
|
|
// 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");
|
|
|
|
|
|
2009-02-27 02:54:39 -08:00
|
|
|
// Gets the name from label content which allows name from subtree,
|
|
|
|
|
// ignore @title attribute on label
|
|
|
|
|
testName("from_label_ignoretitle", "Country:");
|
|
|
|
|
|
|
|
|
|
// Gets the name from html:p content, which doesn't allow name from
|
|
|
|
|
// subtree, ignore @title attribute on label
|
|
|
|
|
testName("from_p_ignoretitle", "Choose country from.");
|
|
|
|
|
|
|
|
|
|
// Gets the name from html:input value, ignore @title attribute on input
|
|
|
|
|
testName("from_input_ignoretitle", "Custom country");
|
2008-07-12 20:57:28 -07:00
|
|
|
|
2009-06-12 18:06:02 -07:00
|
|
|
// Gets the name from @title, ignore whitespace content
|
|
|
|
|
testName("from_label_ignore_ws_subtree", "about");
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// 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.
|
2010-11-19 18:37:18 -08:00
|
|
|
// Take into account the label.
|
|
|
|
|
testName("btn_label_outform", "out form");
|
2008-07-12 20:57:28 -07:00
|
|
|
|
|
|
|
|
// The label element and the button are in the same document. Gets the
|
|
|
|
|
// name from the label subtree.
|
|
|
|
|
testName("btn_label_indocument", "in document");
|
|
|
|
|
|
2010-11-19 18:37:18 -08:00
|
|
|
// Multiple label elements for single button
|
|
|
|
|
testName("btn_label_multi", "label1label2");
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// name from children
|
|
|
|
|
|
|
|
|
|
// ARIA role button is presented allowing the name calculation from
|
|
|
|
|
// children.
|
|
|
|
|
testName("btn_children", "14");
|
|
|
|
|
|
2008-07-16 08:24:36 -07:00
|
|
|
// ARIA role option is presented allowing the name calculation from
|
|
|
|
|
// visible children (bug 443081).
|
|
|
|
|
testName("lb_opt1_children_hidden", "i am visible");
|
|
|
|
|
|
2010-11-20 17:02:16 -08:00
|
|
|
// Get the name from subtree of menuitem crossing role nothing to get
|
|
|
|
|
// the name from its children.
|
|
|
|
|
testName("tablemenuitem", "menuitem 1");
|
2008-07-12 20:57:28 -07:00
|
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// title attribute
|
|
|
|
|
|
|
|
|
|
// If nothing is left. Let's try title attribute.
|
|
|
|
|
testName("btn_title", "title");
|
|
|
|
|
|
2008-09-04 21:48:42 -07:00
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// textarea name
|
|
|
|
|
|
|
|
|
|
// textarea's name should have the value, which initially is specified by
|
|
|
|
|
// a text child.
|
2009-07-29 02:03:20 -07:00
|
|
|
testName("textareawithchild", "Story Foo is ended.");
|
2008-09-04 21:48:42 -07:00
|
|
|
|
|
|
|
|
// new textarea name should reflect the value change.
|
|
|
|
|
var elem = document.getElementById("textareawithchild");
|
|
|
|
|
elem.value = "Bar";
|
|
|
|
|
|
2009-07-29 02:03:20 -07:00
|
|
|
testName("textareawithchild", "Story Bar is ended.");
|
2008-09-04 21:48:42 -07:00
|
|
|
|
2010-02-20 16:55:04 -08:00
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
|
|
|
// button name (specific cases not covered by test_name_markup.html)
|
|
|
|
|
|
|
|
|
|
testName("submit", "Submit Query");
|
|
|
|
|
testName("image_submit", "Submit Query");
|
|
|
|
|
|
2008-10-29 01:53:43 -07:00
|
|
|
/////////////////////////////////////////////////////////////////////////
|
2009-02-18 23:06:14 -08:00
|
|
|
// label with nested combobox (test for 'f' item of name computation guide)
|
|
|
|
|
|
|
|
|
|
testName("comboinstart", "One day(s).");
|
|
|
|
|
testName("combo3", "day(s).");
|
2008-10-29 01:53:43 -07:00
|
|
|
|
2009-07-29 02:03:20 -07:00
|
|
|
testName("textboxinstart", "Two days.");
|
|
|
|
|
testName("textbox1", "days.");
|
|
|
|
|
|
2008-10-29 01:53:43 -07:00
|
|
|
testName("comboinmiddle", "Subscribe to ATOM feed.");
|
2009-02-18 23:06:14 -08:00
|
|
|
testName("combo4", "Subscribe to ATOM feed.");
|
|
|
|
|
|
|
|
|
|
testName("comboinmiddle2", "Play the Haliluya sound when new mail arrives");
|
|
|
|
|
testName("combo5", "Play the Haliluya sound when new mail arrives");
|
|
|
|
|
testName("checkbox", "Play the Haliluya sound when new mail arrives");
|
|
|
|
|
|
|
|
|
|
testName("comboinend", "This day was sunny");
|
|
|
|
|
testName("combo6", "This day was");
|
|
|
|
|
|
2009-07-29 02:03:20 -07:00
|
|
|
testName("textboxinend", "This day was sunny");
|
|
|
|
|
testName("textbox2", "This day was");
|
|
|
|
|
|
2010-11-08 05:33:25 -08:00
|
|
|
// placeholder
|
|
|
|
|
testName("ph_password", "a placeholder");
|
|
|
|
|
testName("ph_text", "a placeholder");
|
|
|
|
|
testName("ph_textarea", "a placeholder");
|
|
|
|
|
testName("ph_text2", "a label");
|
|
|
|
|
testName("ph_textarea2", "a label");
|
|
|
|
|
testName("ph_text3", "a label");
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
SimpleTest.finish();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
2009-09-23 07:21:47 -07:00
|
|
|
addA11yLoadEvent(doTest);
|
2008-07-12 20:57:28 -07:00
|
|
|
</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
|
2010-02-20 16:55:04 -08:00
|
|
|
</a><br>
|
|
|
|
|
<a target="_blank"
|
|
|
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=530081"
|
|
|
|
|
title="Clean up our tree walker ">
|
|
|
|
|
Mozilla Bug 530081
|
2010-11-08 05:33:25 -08:00
|
|
|
</a><br>
|
|
|
|
|
<a target="_blank"
|
|
|
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=604391"
|
|
|
|
|
title="Use placeholder as name if name is otherwise empty">
|
|
|
|
|
Mozilla Bug 604391
|
2008-07-12 20:57:28 -07:00
|
|
|
</a>
|
|
|
|
|
<p id="display"></p>
|
|
|
|
|
<div id="content" style="display: none"></div>
|
|
|
|
|
<pre id="test">
|
|
|
|
|
</pre>
|
|
|
|
|
|
2008-09-04 07:11:40 -07:00
|
|
|
<!-- 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"
|
2010-08-06 06:58:15 -07:00
|
|
|
aria-labelledby="labelledby_text btn_both_aria_labels"/>
|
2008-09-04 07:11:40 -07:00
|
|
|
<br/>
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
<!-- 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/>
|
|
|
|
|
|
2009-02-18 23:06:14 -08:00
|
|
|
<!-- name from named accessible -->
|
|
|
|
|
<input id="labelledby_namedacc" type="checkbox"
|
|
|
|
|
aria-label="Data" />
|
|
|
|
|
<input id="input_labelledby_namedacc"
|
|
|
|
|
aria-labelledby="labelledby_namedacc" />
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
<!-- 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/>
|
|
|
|
|
|
2008-07-16 08:24:36 -07:00
|
|
|
<!-- 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/>
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
<!-- 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/>
|
|
|
|
|
|
2009-02-27 02:54:39 -08:00
|
|
|
<!-- the name from subtree, name from label content rather than from its title
|
|
|
|
|
attribute -->
|
|
|
|
|
<label for="from_label_ignoretitle"
|
|
|
|
|
title="Select your country of origin">Country:</label>
|
|
|
|
|
<select id="from_label_ignoretitle">
|
|
|
|
|
<option>Germany</option>
|
|
|
|
|
<option>Russia</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<!-- the name from subtree, name from html:p content rather than from its
|
|
|
|
|
title attribute -->
|
|
|
|
|
<p id="p_ignoretitle"
|
|
|
|
|
title="Select your country of origin">Choose country from.</p>
|
|
|
|
|
<select id="from_p_ignoretitle" aria-labelledby="p_ignoretitle">
|
|
|
|
|
<option>Germany</option>
|
|
|
|
|
<option>Russia</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<!-- the name from subtree, name from html:input value rather than from its
|
|
|
|
|
title attribute -->
|
|
|
|
|
<p id="from_input_ignoretitle" aria-labelledby="input_ignoretitle">Country</p>
|
|
|
|
|
<input id="input_ignoretitle"
|
|
|
|
|
value="Custom country"
|
|
|
|
|
title="Input your country of origin"/ >
|
|
|
|
|
|
2009-06-12 18:06:02 -07:00
|
|
|
<!-- no name from subtree because it holds whitespaces only -->
|
|
|
|
|
<a id="from_label_ignore_ws_subtree" href="about:" title="about"> </a>
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
<!-- 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>
|
|
|
|
|
|
2010-11-19 18:37:18 -08:00
|
|
|
<!-- multiple label elements for single button -->
|
|
|
|
|
<label for="btn_label_multi">label1</label>
|
|
|
|
|
<label for="btn_label_multi">label2</label>
|
|
|
|
|
<button id="btn_label_multi">button</button>
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
<!-- name from children -->
|
|
|
|
|
<span id="btn_children" role="button">14</span>
|
|
|
|
|
|
2008-07-16 08:24:36 -07:00
|
|
|
<!-- 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>
|
|
|
|
|
|
2010-11-20 17:02:16 -08:00
|
|
|
<table role="menu">
|
|
|
|
|
<tr role="menuitem" id="tablemenuitem">
|
|
|
|
|
<td>menuitem 1</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr role="menuitem">
|
|
|
|
|
<td>menuitem 2</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
<!-- name from title attribute -->
|
|
|
|
|
<span id="btn_title" role="group" title="title">15</span>
|
2008-09-04 21:48:42 -07:00
|
|
|
|
|
|
|
|
<!-- A textarea nested in a label with a text child (bug #453371). -->
|
|
|
|
|
<form>
|
2009-07-29 02:03:20 -07:00
|
|
|
<label>Story
|
2008-09-04 21:48:42 -07:00
|
|
|
<textarea id="textareawithchild" name="name">Foo</textarea>
|
2009-07-29 02:03:20 -07:00
|
|
|
is ended.
|
2008-09-04 21:48:42 -07:00
|
|
|
</label>
|
|
|
|
|
</form>
|
|
|
|
|
|
2010-02-20 16:55:04 -08:00
|
|
|
<!-- submit buttons -->
|
|
|
|
|
<input type="submit" id="submit">
|
|
|
|
|
<input type="image" id="image_submit">
|
|
|
|
|
|
2009-02-18 23:06:14 -08:00
|
|
|
<!-- a label with a nested control in the start, middle and end -->
|
2008-10-29 01:53:43 -07:00
|
|
|
<form>
|
2009-07-29 02:03:20 -07:00
|
|
|
<!-- at the start (without and with whitespaces) -->
|
2009-02-18 23:06:14 -08:00
|
|
|
<label id="comboinstart"><select id="combo3">
|
|
|
|
|
<option>One</option>
|
|
|
|
|
<option>Two</option>
|
|
|
|
|
</select>
|
|
|
|
|
day(s).
|
|
|
|
|
</label>
|
|
|
|
|
|
2009-07-29 02:03:20 -07:00
|
|
|
<label id="textboxinstart">
|
|
|
|
|
<input id="textbox1" value="Two">
|
|
|
|
|
days.
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<!-- in the middle -->
|
2008-10-29 01:53:43 -07:00
|
|
|
<label id="comboinmiddle">
|
|
|
|
|
Subscribe to
|
2009-02-18 23:06:14 -08:00
|
|
|
<select id="combo4" name="occupation">
|
2008-10-29 01:53:43 -07:00
|
|
|
<option>ATOM</option>
|
|
|
|
|
<option>RSS</option>
|
|
|
|
|
</select>
|
|
|
|
|
feed.
|
|
|
|
|
</label>
|
2009-02-18 23:06:14 -08:00
|
|
|
|
|
|
|
|
<label id="comboinmiddle2" for="checkbox">Play the
|
|
|
|
|
<select id="combo5">
|
|
|
|
|
<option>Haliluya</option>
|
|
|
|
|
<option>Hurra</option>
|
|
|
|
|
</select>
|
|
|
|
|
sound when new mail arrives
|
|
|
|
|
</label>
|
|
|
|
|
<input id="checkbox" type="checkbox" />
|
|
|
|
|
|
2009-07-29 02:03:20 -07:00
|
|
|
<!-- at the end (without and with whitespaces) -->
|
2009-02-18 23:06:14 -08:00
|
|
|
<label id="comboinend">
|
|
|
|
|
This day was
|
|
|
|
|
<select id="combo6" name="occupation">
|
|
|
|
|
<option>sunny</option>
|
|
|
|
|
<option>rainy</option>
|
|
|
|
|
</select></label>
|
2009-07-29 02:03:20 -07:00
|
|
|
|
|
|
|
|
<label id="textboxinend">
|
|
|
|
|
This day was
|
|
|
|
|
<input id="textbox2" value="sunny">
|
|
|
|
|
</label>
|
2008-10-29 01:53:43 -07:00
|
|
|
</form>
|
|
|
|
|
|
2010-11-08 05:33:25 -08:00
|
|
|
<!-- placeholder -->
|
|
|
|
|
<input id="ph_password" type="password" value="" placeholder="a placeholder" />
|
|
|
|
|
<input id="ph_text" type="text" placeholder="a placeholder" />
|
|
|
|
|
<textarea id="ph_textarea" cols="5" placeholder="a placeholder"></textarea>
|
|
|
|
|
|
|
|
|
|
<!-- placeholder does not win -->
|
|
|
|
|
<input id="ph_text2" type="text" aria-label="a label" placeholder="meh" />
|
|
|
|
|
<textarea id="ph_textarea2" cols="5" aria-labelledby="ph_text2"
|
|
|
|
|
placeholder="meh"></textarea>
|
|
|
|
|
|
|
|
|
|
<label for="ph_text3">a label</label>
|
|
|
|
|
<input id="ph_text3" placeholder="meh" />
|
|
|
|
|
|
2008-07-12 20:57:28 -07:00
|
|
|
</body>
|
|
|
|
|
</html>
|
