summaryrefslogtreecommitdiffstats
path: root/dom/html/test/test_bug610687.html
diff options
context:
space:
mode:
Diffstat (limited to 'dom/html/test/test_bug610687.html')
-rw-r--r--dom/html/test/test_bug610687.html195
1 files changed, 195 insertions, 0 deletions
diff --git a/dom/html/test/test_bug610687.html b/dom/html/test/test_bug610687.html
new file mode 100644
index 0000000000..fd6950cce4
--- /dev/null
+++ b/dom/html/test/test_bug610687.html
@@ -0,0 +1,195 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=610687
+-->
+<head>
+ <title>Test for Bug 610687</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=610687">Mozilla Bug 610687</a>
+<p id="display"></p>
+<div id="content">
+ <form>
+ <input type='radio' name='a'>
+ <input type='radio' name='a'>
+ <input type='radio' name='b'>
+ </form>
+ <input type='radio' name='a'>
+ <input type='radio' name='a'>
+ <input type='radio' name='b'>
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 610687 **/
+
+function checkPseudoClasses(aElement, aValid, aValidUI, aInvalidUI)
+{
+ if (aValid) {
+ ok(aElement.matches(":valid"), ":valid should apply");
+ } else {
+ ok(aElement.matches(":invalid"), ":invalid should apply");
+ }
+
+ is(aElement.matches(":user-valid"), aValidUI,
+ aValid ? ":user-valid should apply" : ":user-valid should not apply");
+
+ is(aElement.matches(":user-invalid"), aInvalidUI,
+ aInvalidUI ? ":user-invalid should apply" : ":user-invalid should not apply");
+
+ if (aInvalidUI && (aValid || aValidUI)) {
+ ok(false, ":invalid can't apply with :valid or :user-valid");
+ }
+}
+
+/**
+ * r1 and r2 should be in the same group.
+ * r3 should be in another group.
+ * form can be null.
+ */
+function checkRadios(r1, r2, r3, form)
+{
+ // Default state.
+ checkPseudoClasses(r1, true, false, false);
+ checkPseudoClasses(r2, true, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ // Suffering from being missing (without ui-invalid).
+ r1.required = true;
+ checkPseudoClasses(r1, false, false, false);
+ checkPseudoClasses(r2, false, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ // Do not suffer from being missing (with ui-valid).
+ r1.click();
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, true, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ // Do not suffer from being missing (with ui-valid).
+ r1.checked = false;
+ r1.required = false;
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, true, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ // Suffering from being missing (with ui-invalid) with required set on one radio
+ // and the checked state changed on another.
+ r1.required = true;
+ r2.checked = false;
+ checkPseudoClasses(r1, false, false, true);
+ checkPseudoClasses(r2, false, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ // Do not suffer from being missing (with ui-valid) by checking the radio which
+ // hasn't the required attribute.
+ r2.checked = true;
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, true, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ // .setCustomValidity() should not affect the entire group.
+ r1.checked = false; r2.checked = false; r3.checked = false;
+ r1.required = false;
+ r1.setCustomValidity('foo');
+ checkPseudoClasses(r1, false, false, true);
+ checkPseudoClasses(r2, true, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ r1.setCustomValidity('');
+ r2.setCustomValidity('foo');
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, false, false, false);
+ checkPseudoClasses(r3, true, false, false);
+
+ r2.setCustomValidity('');
+ r3.setCustomValidity('foo');
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, true, false, false);
+ checkPseudoClasses(r3, false, false, false);
+
+ // Removing the radio with the required attribute should make the group valid.
+ r1.setCustomValidity('');
+ r2.setCustomValidity('');
+ r1.required = false;
+ r2.required = true;
+ r1.checked = r2.checked = false;
+ checkPseudoClasses(r1, false, false, true);
+ checkPseudoClasses(r2, false, false, false);
+
+ var p = r2.parentNode;
+ p.removeChild(r2);
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, false, false, false);
+
+ p.appendChild(r2);
+ checkPseudoClasses(r1, false, false, true);
+ checkPseudoClasses(r2, false, false, false);
+
+ // Adding a radio element to an invalid group should make it invalid.
+ p.removeChild(r1);
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, false, false, false);
+
+ p.appendChild(r1);
+ checkPseudoClasses(r1, false, false, true);
+ checkPseudoClasses(r2, false, false, false);
+
+ // Adding a checked radio element to an invalid group should make it valid.
+ p.removeChild(r1);
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, false, false, false);
+
+ r1.checked = true;
+ p.appendChild(r1);
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, true, false, false);
+ r1.checked = false;
+
+ // Adding an invalid radio element by changing the name attribute.
+ r2.name = 'c';
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, false, false, false);
+
+ r2.name = 'a';
+ checkPseudoClasses(r1, false, false, true);
+ checkPseudoClasses(r2, false, false, false);
+
+ // Adding an element to an invalid radio group by changing the name attribute.
+ r1.name = 'c';
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, false, false, false);
+
+ r1.name = 'a';
+ checkPseudoClasses(r1, false, false, true);
+ checkPseudoClasses(r2, false, false, false);
+
+ // Adding a checked element to an invalid radio group with the name attribute.
+ r1.name = 'c';
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, false, false, false);
+
+ r1.checked = true;
+ r1.name = 'a';
+ checkPseudoClasses(r1, true, true, false);
+ checkPseudoClasses(r2, true, false, false);
+ r1.checked = false;
+}
+
+var r1 = document.getElementsByTagName('input')[0];
+var r2 = document.getElementsByTagName('input')[1];
+var r3 = document.getElementsByTagName('input')[2];
+checkRadios(r1, r2, r3);
+
+r1 = document.getElementsByTagName('input')[3];
+r2 = document.getElementsByTagName('input')[4];
+r3 = document.getElementsByTagName('input')[5];
+checkRadios(r1, r2, r3);
+
+</script>
+</pre>
+</body>
+</html>