mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-14 15:37:55 +00:00
257 lines
9.4 KiB
HTML
257 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>HTML input states</title>
|
|
<link rel="stylesheet" type="text/css"
|
|
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
|
|
|
<script type="application/javascript"
|
|
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
<script type="application/javascript"
|
|
src="../common.js"></script>
|
|
<script type="application/javascript"
|
|
src="../role.js"></script>
|
|
<script type="application/javascript"
|
|
src="../states.js"></script>
|
|
|
|
<script type="application/javascript">
|
|
function doTest()
|
|
{
|
|
////////////////////////////////////////////////////////////////////////////
|
|
// 'editable' and 'multiline' states.
|
|
testStates("input", 0, EXT_STATE_EDITABLE, 0, EXT_STATE_MULTI_LINE);
|
|
testStates("textarea", 0, EXT_STATE_EDITABLE | EXT_STATE_MULTI_LINE);
|
|
|
|
testStates("input_readonly", 0, EXT_STATE_EDITABLE);
|
|
testStates("input_disabled", 0, EXT_STATE_EDITABLE);
|
|
testStates("textarea_readonly", 0, EXT_STATE_EDITABLE);
|
|
testStates("textarea_disabled", 0, EXT_STATE_EDITABLE);
|
|
|
|
////////////////////////////////////////////////////////////////////////////
|
|
// 'required', 'readonly' and 'unavailable' states.
|
|
var maybe_required = ["input","search","radio","checkbox","textarea"];
|
|
var never_required = ["submit","button","reset","image"];
|
|
|
|
var i;
|
|
for (i in maybe_required) {
|
|
testStates(maybe_required[i],
|
|
STATE_FOCUSABLE, 0,
|
|
STATE_REQUIRED | STATE_READONLY | STATE_UNAVAILABLE);
|
|
|
|
testStates(maybe_required[i] + "_required",
|
|
STATE_FOCUSABLE | STATE_REQUIRED, 0,
|
|
STATE_UNAVAILABLE | STATE_READONLY);
|
|
|
|
var readonlyID = maybe_required[i] + "_readonly";
|
|
if (document.getElementById(readonlyID)) {
|
|
testStates(readonlyID,
|
|
STATE_FOCUSABLE | STATE_READONLY, 0,
|
|
STATE_UNAVAILABLE | STATE_REQUIRED);
|
|
}
|
|
|
|
testStates(maybe_required[i] + "_disabled",
|
|
STATE_UNAVAILABLE, 0,
|
|
STATE_FOCUSABLE | STATE_READONLY | STATE_REQUIRED);
|
|
}
|
|
|
|
for (i in never_required) {
|
|
testStates(never_required[i], 0, 0, STATE_REQUIRED);
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////
|
|
// inherited 'unavailable' state
|
|
testStates("f", STATE_UNAVAILABLE);
|
|
testStates("f_input", STATE_UNAVAILABLE);
|
|
testStates("f_input_disabled", STATE_UNAVAILABLE);
|
|
|
|
////////////////////////////////////////////////////////////////////////////
|
|
// inherited from file control
|
|
var fileTextField = getAccessible("file").firstChild;
|
|
testStates(fileTextField, STATE_UNAVAILABLE | STATE_REQUIRED);
|
|
var fileBrowseButton = getAccessible("file").lastChild;
|
|
testStates(fileBrowseButton, STATE_UNAVAILABLE | STATE_REQUIRED);
|
|
|
|
////////////////////////////////////////////////////////////////////////////
|
|
// 'invalid' state
|
|
|
|
// XXX: maxlength doesn't make the element invalid until bug 613016 and
|
|
// bug 613019 are fixed. Commenting out related lines and adding a todo to
|
|
// make sure it will be uncommented as soon as possible.
|
|
var todoInput = document.createElement("input");
|
|
todoInput.maxLength = '2';
|
|
todoInput.value = 'foo';
|
|
todo(!todoInput.validity.valid,
|
|
"input should be invalid because of maxlength");
|
|
|
|
// invalid/valid state
|
|
//var invalid = ["maxlength","pattern","email","url"];
|
|
//document.getElementById("maxlength").value = "i am too long";
|
|
var invalid = ["pattern","email","url"];
|
|
for (i in invalid) {
|
|
testStates(invalid[i], STATE_INVALID);
|
|
testStates(invalid[i] + "2", 0, 0, STATE_INVALID);
|
|
}
|
|
|
|
// invalid/valid state
|
|
//var invalid = ["maxlength","pattern","email","url"];
|
|
//document.getElementById("maxlength").value = "i am too long";
|
|
var invalid = ["pattern","email","url"];
|
|
for (i in invalid) {
|
|
testStates(invalid[i], STATE_INVALID);
|
|
testStates(invalid[i] + "2", 0, 0, STATE_INVALID);
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////
|
|
// autocomplete states
|
|
testStates("autocomplete-default", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
testStates("autocomplete-off", 0, 0, 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
testStates("autocomplete-formoff", 0, 0, 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
testStates("autocomplete-list", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
testStates("autocomplete-list2", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
testStates("autocomplete-tel", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
testStates("autocomplete-email", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
testStates("autocomplete-search", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
addA11yLoadEvent(doTest);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=559275"
|
|
title="map attribute required to STATE_REQUIRED">
|
|
Mozilla Bug 559275
|
|
</a>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=389238"
|
|
title="Support disabled state on fieldset">
|
|
Mozilla Bug 389238
|
|
</a>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=599163"
|
|
title="check disabled state instead of attribute">
|
|
Mozilla Bug 599163
|
|
</a>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=601205"
|
|
title="Expose intrinsic invalid state to accessibility API">
|
|
Mozilla Bug 601205
|
|
</a>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=601205"
|
|
title="Expose intrinsic invalid state to accessibility API">
|
|
Mozilla Bug 601205
|
|
</a>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=559766"
|
|
title="Add accessibility support for @list on HTML input and for HTML datalist">
|
|
Mozilla Bug 559766
|
|
</a>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=699017"
|
|
title="File input control should be propogate states to descendants">
|
|
Mozilla Bug 699017
|
|
</a>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=733382"
|
|
title="Editable state bit should be present on readonly inputs">
|
|
Mozilla Bug 733382
|
|
</a>
|
|
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test">
|
|
</pre>
|
|
|
|
|
|
<form>
|
|
<input id="input" type="input">
|
|
<input id="input_required" type="input" required>
|
|
<input id="input_readonly" type="input" readonly>
|
|
<input id="input_disabled" type="input" disabled>
|
|
<input id="search" type="search">
|
|
<input id="search_required" type="search" required>
|
|
<input id="search_readonly" type="search" readonly>
|
|
<input id="search_disabled" type="search" disabled>
|
|
<input id="radio" type="radio">
|
|
<input id="radio_required" type="radio" required>
|
|
<input id="radio_disabled" type="radio" disabled>
|
|
<input id="checkbox" type="checkbox">
|
|
<input id="checkbox_required" type="checkbox" required>
|
|
<input id="checkbox_disabled" type="checkbox" disabled>
|
|
<textarea id="textarea"></textarea>
|
|
<textarea id="textarea_required" required></textarea>
|
|
<textarea id="textarea_readonly" readonly></textarea>
|
|
<textarea id="textarea_disabled" disabled></textarea>
|
|
</form>
|
|
|
|
<!-- bogus required usage -->
|
|
<input id="submit" type="submit" required>
|
|
<input id="button" type="button" required>
|
|
<input id="reset" type="reset" required>
|
|
<input id="image" type="image" required>
|
|
|
|
<!-- inherited disabled -->
|
|
<fieldset id="f" disabled>
|
|
<input id="f_input">
|
|
<input id="f_input_disabled" disabled>
|
|
</fieldset>
|
|
|
|
<!-- inherited from input@type="file" -->
|
|
<input id="file" type="file" required disabled>
|
|
|
|
<!-- invalid/valid -->
|
|
<input id="maxlength" maxlength="1">
|
|
<input id="maxlength2" maxlength="100" value="foo">
|
|
<input id="pattern" pattern="bar" value="foo">
|
|
<input id="pattern2" pattern="bar" value="bar">
|
|
<input id="email" type="email" value="foo">
|
|
<input id="email2" type="email" value="foo@bar.com">
|
|
<input id="url" type="url" value="foo">
|
|
<input id="url2" type="url" value="http://mozilla.org/">
|
|
|
|
<!-- invalid/valid -->
|
|
<input id="maxlength" maxlength="1">
|
|
<input id="maxlength2" maxlength="100" value="foo">
|
|
<input id="pattern" pattern="bar" value="foo">
|
|
<input id="pattern2" pattern="bar" value="bar">
|
|
<input id="email" type="email" value="foo">
|
|
<input id="email2" type="email" value="foo@bar.com">
|
|
<input id="url" type="url" value="foo">
|
|
<input id="url2" type="url" value="http://mozilla.org/">
|
|
|
|
<!-- autocomplete -->
|
|
<input id="autocomplete-default">
|
|
<input id="autocomplete-off" autocomplete="off">
|
|
<form autocomplete="off">
|
|
<input id="autocomplete-formoff">
|
|
</form>
|
|
<datalist id="cities">
|
|
<option>Paris</option>
|
|
<option>San Francisco</option>
|
|
</datalist>
|
|
<input id="autocomplete-list" list="cities">
|
|
<input id="autocomplete-list2" list="cities" autocomplete="off">
|
|
<input id="autocomplete-tel" type="tel">
|
|
|
|
Email Address:
|
|
<input id="autocomplete-email" type="email" list="contacts" value="xyzzy">
|
|
<datalist id="contacts">
|
|
<option>xyzzy@plughs.com</option>
|
|
<option>nobody@mozilla.org</option>
|
|
</datalist>
|
|
|
|
</br>Search for:
|
|
<input id="autocomplete-search" type="search" list="searchhisty" value="Gamma">
|
|
<datalist id="searchhisty">
|
|
<option>Gamma Rays</option>
|
|
<option>Gamma Ray Bursts</option>
|
|
</datalist>
|
|
|
|
</body>
|
|
</html>
|