<!DOCTYPE HTML>

<script src="../../resources/js-test.js"></script>

<body>
<input type="checkbox" id="checkbox-btn1" onclick="doClickAction(event)" onchange="doChangeAction(event)"/>
<input type="checkbox" id="checkbox-btn2" onclick="doClickAction(event); event.preventDefault()" onchange="doChangeAction(event)"/>
<input type="checkbox" id="checkbox-btn3" onclick="this.value = this.checked;" onchange="message = 'changed';"/>
<input type="radio" id="radio-btn1" onclick="doClickAction(event)" onchange="doChangeAction(event)"/>
<input type="radio" id="radio-btn2" onclick="doClickAction(event); event.preventDefault()" onchange="doChangeAction(event)"/>
<input type="radio" id="radio-btn3" onclick="this.value = this.checked;" onchange="message = 'changed';"/>
<script>
description('Tests the order of onclick and onchange');
var message = '';

function doClickAction(e)
{
    shouldBeEqualToString('message', '');
    message = 'clicked';
}

function doChangeAction(e)
{
    shouldBeEqualToString('message', 'clicked');
    message = 'changed';
}

var checkbox1 = document.getElementById('checkbox-btn1');
var checkbox2 = document.getElementById('checkbox-btn2');
var checkbox3 = document.getElementById('checkbox-btn3');
var radio1 = document.getElementById('radio-btn1');
var radio2 = document.getElementById('radio-btn2');
var radio3 = document.getElementById('radio-btn3');

debug('Tests for checkboxes:');
message = '';
checkbox1.click();
shouldBeEqualToString('message', 'changed');
shouldBeTrue('checkbox1.checked');

message = '';
checkbox1.click();
shouldBeEqualToString('message', 'changed');
shouldBeFalse('checkbox1.checked');

message = '';
checkbox2.click();
shouldBeEqualToString('message', 'clicked');
shouldBeFalse('checkbox2.checked');

message = '';
checkbox1.checked = false;
checkbox1.focus();
eventSender.keyDown(' ');
shouldBeEqualToString('message', 'changed');
shouldBeTrue('checkbox1.checked');

message = '';
checkbox1.focus();
eventSender.keyDown(' ');
shouldBeEqualToString('message', 'changed');
shouldBeFalse('checkbox1.checked');

message = '';
checkbox2.checked = false;
checkbox2.focus();
eventSender.keyDown(' ');
shouldBeEqualToString('message', 'clicked');
shouldBeFalse('checkbox2.checked');

debug('Updating |value| in click handler:');
message = '';
checkbox3.click();
shouldBeEqualToString('message', 'changed');

debug('');
debug('Tests for radio buttons:');
message = '';
radio1.click();
shouldBeEqualToString('message', 'changed');
shouldBeTrue('radio1.checked');

message = '';
radio1.click();
shouldBeEqualToString('message', 'clicked');
shouldBeTrue('radio1.checked');

message = '';
radio2.click();
shouldBeEqualToString('message', 'clicked');
shouldBeFalse('radio2.checked');

message = '';
radio1.checked = false;
radio1.focus();
eventSender.keyDown(' ');
shouldBeEqualToString('message', 'changed');
shouldBeTrue('radio1.checked');

message = '';
radio1.focus();
eventSender.keyDown(' ');
shouldBeEqualToString('message', '');
shouldBeTrue('radio1.checked');

message = '';
radio2.checked = false;
radio2.focus();
eventSender.keyDown(' ');
shouldBeEqualToString('message', 'clicked');
shouldBeFalse('radio2.checked');

debug('Updating |value| in click handler:');
message = '';
radio3.click();
shouldBeEqualToString('message', 'changed');
</script>
</body>