radio-group-keyboard-change-event.html

<!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>
chromium/third_party/blink/web_tests/fast/forms/radio/radio-group-keyboard-change-event.html
