diff options
Diffstat (limited to 'dom/html/test/test_bug596511.html')
| -rw-r--r-- | dom/html/test/test_bug596511.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/dom/html/test/test_bug596511.html b/dom/html/test/test_bug596511.html new file mode 100644 index 0000000000..42b93e4632 --- /dev/null +++ b/dom/html/test/test_bug596511.html @@ -0,0 +1,237 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=596511 +--> +<head> + <title>Test for Bug 596511</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> + <style> + select:valid { background-color: green; } + select:invalid { background-color: red; } + </style> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=596511">Mozilla Bug 596511</a> +<p id="display"></p> +<div id="content" style="display: none"> +</div> +<pre id="test"> +<script> + +/** Test for Bug 596511 **/ + +function checkNotSufferingFromBeingMissing(element, aTodo) +{ + if (aTodo) { + ok = todo; + is = todo_is; + } + + ok(!element.validity.valueMissing, + "Element should not suffer from value missing"); + ok(element.validity.valid, "Element should be valid"); + ok(element.checkValidity(), "Element should be valid"); + + is(element.validationMessage, "", + "Validation message should be the empty string"); + + ok(element.matches(":valid"), ":valid pseudo-class should apply"); + is(window.getComputedStyle(element).getPropertyValue('background-color'), + "rgb(0, 128, 0)", ":valid pseudo-class should apply"); + + if (aTodo) { + ok = SimpleTest.ok; + is = SimpleTest.is; + } +} + +function checkSufferingFromBeingMissing(element, aTodo) +{ + if (aTodo) { + ok = todo; + is = todo_is; + } + + ok(element.validity.valueMissing, "Element should suffer from value missing"); + ok(!element.validity.valid, "Element should not be valid"); + ok(!element.checkValidity(), "Element should not be valid"); + + is(element.validationMessage, "Please select an item in the list.", + "Validation message is wrong"); + + is(window.getComputedStyle(element).getPropertyValue('background-color'), + "rgb(255, 0, 0)", ":invalid pseudo-class should apply"); + + if (aTodo) { + ok = SimpleTest.ok; + is = SimpleTest.is; + } +} + +function checkRequiredAttribute(element) +{ + ok('required' in element, "select should have a required attribute"); + + ok(!element.required, "select required attribute should be disabled"); + is(element.getAttribute('required'), null, + "select required attribute should be disabled"); + + element.required = true; + ok(element.required, "select required attribute should be enabled"); + isnot(element.getAttribute('required'), null, + "select required attribute should be enabled"); + + element.removeAttribute('required'); + element.setAttribute('required', ''); + ok(element.required, "select required attribute should be enabled"); + isnot(element.getAttribute('required'), null, + "select required attribute should be enabled"); + + element.removeAttribute('required'); + ok(!element.required, "select required attribute should be disabled"); + is(element.getAttribute('required'), null, + "select required attribute should be disabled"); +} + +function checkRequiredAndOptionalSelectors(element) +{ + is(document.querySelector("select:optional"), element, + "select should be optional"); + is(document.querySelector("select:required"), null, + "select shouldn't be required"); + + element.required = true; + + is(document.querySelector("select:optional"), null, + "select shouldn't be optional"); + is(document.querySelector("select:required"), element, + "select should be required"); + + element.required = false; +} + +function checkInvalidWhenValueMissing(element) +{ + checkNotSufferingFromBeingMissing(select); + + element.required = true; + checkSufferingFromBeingMissing(select); + + /** + * Non-multiple and size=1. + */ + select.appendChild(new Option()); + checkSufferingFromBeingMissing(select); + + // When removing the required attribute, element should not be invalid. + element.required = false; + checkNotSufferingFromBeingMissing(select); + + element.required = true; + select.options[0].textContent = "foo"; + // TODO: having that working would require us to add a mutation observer on + // the select element. + checkNotSufferingFromBeingMissing(select, true); + + select.remove(0); + checkSufferingFromBeingMissing(select); + + select.add(new Option("foo", "foo"), null); + checkNotSufferingFromBeingMissing(select); + + select.add(new Option(), null); + checkNotSufferingFromBeingMissing(select); + + // The placeholder label can only be the first option, so a selected empty second option is valid + select.options[1].selected = true; + checkNotSufferingFromBeingMissing(select); + + select.selectedIndex = 0; + checkNotSufferingFromBeingMissing(select); + + select.add(select.options[0]); + select.selectedIndex = 0; + checkSufferingFromBeingMissing(select); + + select.remove(0); + checkNotSufferingFromBeingMissing(select); + + select.options[0].disabled = true; + // TODO: having that working would require us to add a mutation observer on + // the select element. + checkSufferingFromBeingMissing(select, true); + + select.options[0].disabled = false + select.remove(0); + checkSufferingFromBeingMissing(select); + + var option = new Option("foo", "foo"); + option.disabled = true; + select.add(option, null); + select.add(new Option("bar"), null); + option.selected = true; + checkNotSufferingFromBeingMissing(select); + + select.remove(0); + select.remove(0); + + /** + * Non-multiple and size > 1. + * Everything should be the same except moving the selection. + */ + select.multiple = false; + select.size = 4; + checkSufferingFromBeingMissing(select); + + // Setting defaultSelected to true should not make the option selected + select.add(new Option("", "", true), null); + checkSufferingFromBeingMissing(select); + select.remove(0); + + select.add(new Option("", "", true, true), null); + checkNotSufferingFromBeingMissing(select); + + select.add(new Option("foo", "foo"), null); + select.remove(0); + checkSufferingFromBeingMissing(select); + + select.options[0].selected = true; + checkNotSufferingFromBeingMissing(select); + + select.remove(0); + + /** + * Multiple, any size. + * We can select more than one element and at least needs a value. + */ + select.multiple = true; + select.size = 4; + checkSufferingFromBeingMissing(select); + + select.add(new Option("", "", true), null); + checkSufferingFromBeingMissing(select); + + select.add(new Option("", "", true), null); + checkSufferingFromBeingMissing(select); + + select.add(new Option("foo"), null); + checkSufferingFromBeingMissing(select); + + select.options[2].selected = true; + checkNotSufferingFromBeingMissing(select); +} + +var select = document.createElement("select"); +var content = document.getElementById('content'); +content.appendChild(select); + +checkRequiredAttribute(select); +checkRequiredAndOptionalSelectors(select); +checkInvalidWhenValueMissing(select); + +</script> +</pre> +</body> +</html> |