| <!DOCTYPE html> |
| <html> |
| <body> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <div id="log"></div> |
| |
| <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=32013">https://bugs.webkit.org/show_bug.cgi?id=32013</a>. |
| |
| <p>For manual testing, focus a radio button in the first group and use the arrow keys. Changing the checked |
| radio button should fire change events. |
| |
| <p> |
| <input type=radio name=aaa value=a checked onchange="handleChange(event)">a |
| <input type=radio name=aaa value=b onchange="handleChange(event)">b |
| <input type=radio name=aaa value=c onchange="handleChange(event)">c |
| |
| <p>For manual testing, focus a radio button in the second group and use the arrow keys. Change events |
| should still be dispatched but the checked radio should not change. |
| |
| <p> |
| <input type=radio name=bbb value=d checked onchange="handleChange(event)" onclick="preventClick(event)">d |
| <input type=radio name=bbb value=e onchange="handleChange(event)" onclick="preventClick(event)">e |
| <input type=radio name=bbb value=f onchange="handleChange(event)" onclick="preventClick(event)">f |
| |
| <p>Test for <a href="https://code.google.com/p/chromium/issues/detail?id=556677">https://code.google.com/p/chromium/issues/detail?id=556677</a>. |
| |
| <p>For manual testing, focus a radio button in the first group and use the arrow keys. Changing the |
| radio button should fire change events in the direction of left to right. |
| |
| <div dir="rtl"> |
| <p> |
| <input type=radio name=ccc value=x onchange="handleChange(event)"><span dir="rtl">x</span> |
| <input type=radio name=ccc value=y onchange="handleChange(event)"><span dir="rtl">y</span> |
| <input type=radio name=ccc value=z onchange="handleChange(event)"><span dir="rtl">z</span> |
| </div> |
| |
| <script> |
| var lastChangeEventValue = null; |
| |
| function handleChange(e) |
| { |
| lastChangeEventValue = e.target.value; |
| } |
| |
| function preventClick(e) |
| { |
| e.preventDefault(); |
| } |
| |
| function getRadio(value) |
| { |
| return document.querySelector('input[value="' + value + '"]'); |
| } |
| |
| if (window.eventSender) { |
| test(function() { |
| getRadio('a').focus(); |
| eventSender.keyDown('ArrowDown'); |
| assert_equals(lastChangeEventValue, 'b'); |
| eventSender.keyDown('ArrowDown'); |
| assert_equals(lastChangeEventValue, 'c'); |
| assert_false(getRadio('a').checked); |
| assert_false(getRadio('b').checked); |
| assert_true(getRadio('c').checked); |
| }, 'Pressing an arrow key moves checked state in a radio button group.'); |
| |
| test(function() { |
| getRadio('d').focus(); |
| eventSender.keyDown('ArrowDown'); |
| eventSender.keyDown('ArrowDown'); |
| assert_true(getRadio('d').checked); |
| assert_false(getRadio('e').checked); |
| assert_false(getRadio('f').checked); |
| }, 'Pressing an arrow key doesn\'t move checked state in a radio button group if click events are prevented.'); |
| |
| test(function() { |
| getRadio('x').focus(); |
| eventSender.keyDown('ArrowRight'); |
| assert_equals(lastChangeEventValue, 'z'); |
| assert_false(getRadio('x').checked); |
| assert_false(getRadio('y').checked); |
| assert_true(getRadio('z').checked); |
| |
| eventSender.keyDown('ArrowRight'); |
| assert_equals(lastChangeEventValue, 'y'); |
| assert_false(getRadio('x').checked); |
| assert_true(getRadio('y').checked); |
| assert_false(getRadio('z').checked); |
| }, 'Right arrow key should move checked state backward in RTL.'); |
| |
| test(function() { |
| getRadio('x').focus(); |
| getRadio('x').checked = true; |
| eventSender.keyDown('ArrowDown'); |
| assert_equals(lastChangeEventValue, 'y'); |
| assert_false(getRadio('x').checked); |
| assert_true(getRadio('y').checked); |
| assert_false(getRadio('z').checked); |
| }, 'Down arrow key should move checked state forward regardless of RTL.'); |
| } |
| </script> |
| </body> |
| </html> |
