<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("Tests that it is possible to select a color on a input type=color that is marked as readOnly.");

var input = document.createElement('input');
input.type = 'color';
input.readOnly = true;
input.value = '#000000';
document.body.appendChild(input);

input.style.position = 'absolute';
input.style.left = '0';
input.style.top = '0';
input.style.width = '20px';
input.style.height = '20px';

var onChangeCount = 0;
input.onchange = function() {
    debug("change event dispatched - value changed to " + input.value);
    onChangeCount++;
};

input.oninput = function() {
    debug("input event dispatched - value is:  " + input.value);
};

eventSender.mouseMoveTo(10, 10);
eventSender.mouseDown();
eventSender.mouseUp();

shouldBe('onChangeCount', '0');

// input.onchange should be called
internals.selectColorInColorChooser(input, '#ff0000');
shouldBe('onChangeCount', '1');
shouldBeEqualToString('input.value', '#ff0000');
</script>
</body>
</html>