third_party/WebKit/LayoutTests/fast/forms/radio/radio-group-keyboard-change-event.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4
   5 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=32013">https://bugs.webkit.org/show_bug.cgi?id=32013</a>.
   6
   7 <p>For manual testing, focus a radio button in the first group and use the arrow keys. Changing the checked
   8 radio button should fire change events.
   9
  10 <p>
  11 <input type=radio name=aaa value=a checked onchange="handleChange(event)" onclick="handleClick(event)">a
  12 <input type=radio name=aaa value=b onchange="handleChange(event)" onclick="handleClick(event)">b
  13 <input type=radio name=aaa value=c onchange="handleChange(event)" onclick="handleClick(event)">c
  14
  15 <p>For manual testing, focus a radio button in the second group and use the arrow keys. Change events
  16 should still be dispatched but the checked radio should not change.
  17
  18 <p>
  19 <input type=radio name=bbb value=d checked onchange="handleChange(event)" onclick="handleClick(event)">d
  20 <input type=radio name=bbb value=e onchange="handleChange(event)" onclick="handleClick(event)">e
  21 <input type=radio name=bbb value=f onchange="handleChange(event)" onclick="handleClick(event)">f
  22
  23 <pre id=out></pre>
  24
  25 <script>
  26
  27 var preventClickValues = 'def';
  28
  29 function handleChange(e)
  30 {
  31     var value = e.target.value;
  32     print(value + ' dispatched change event');
  33 }
  34
  35 function handleClick(e)
  36 {
  37     var value = e.target.value;
  38     if (preventClickValues.indexOf(value) !== -1)
  39         e.preventDefault();
  40 }
  41
  42 function print(s)
  43 {
  44     document.getElementById('out').textContent += s + '\n';
  45 }
  46
  47 function pass(s) {
  48     print('PASS: ' + s);
  49 }
  50
  51 function fail(s) {
  52     print('FAIL: ' + s);
  53 }
  54
  55 function getRadio(value)
  56 {
  57     return document.querySelector('input[value="' + value + '"]');
  58 }
  59
  60 function assertChecked(value)
  61 {
  62     if (getRadio(value).checked)
  63         pass(value + ' is checked');
  64     else
  65         fail(value + ' should be checked');
  66 }
  67
  68 function assertNotChecked(value)
  69 {
  70     if (!getRadio(value).checked)
  71         pass(value + ' is not checked');
  72     else
  73         fail(value + ' should not be checked');
  74 }
  75
  76 if (window.testRunner)
  77     testRunner.dumpAsText();
  78
  79 if (window.eventSender) {
  80     getRadio('a').focus();
  81     eventSender.keyDown('downArrow');
  82     eventSender.keyDown('downArrow');
  83
  84     getRadio('d').focus();
  85     eventSender.keyDown('downArrow');
  86     eventSender.keyDown('downArrow');
  87
  88     assertNotChecked('a');
  89     assertNotChecked('b');
  90     assertChecked('c');
  91
  92     assertChecked('d');
  93     assertNotChecked('e');
  94     assertNotChecked('f');
  95 }
  96
  97 </script>
  98 </body>
  99 </html>