test_bug610687.html

Enable keyboard shortcuts

<!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>