<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../../../../fast/forms/resources/live-pseudo-selectors.css">
<script src="../../../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("This test performs a check that :valid/:invalid CSS psudo selectors are lively applied by HTMLSelectElement::setSelectedIndexByUser.");

// Setup for static elements.
var form = document.createElement('form');
document.body.appendChild(form);

function makeInvalid(id) {
    var select = document.createElement('select');
    select.name = 'foo';
    select.required = true;
    if (id != undefined)
        select.id = id;
    select.value = '';
    form.appendChild(select);
    return select;
}

function appendOption(value, select) {
    var option = document.createElement('option');
    option.value = value;
    option.innerText = value;
    select.add(option);
    return option;
}

function backgroundOf(el) {
    return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color');
}

var elBackground = 'backgroundOf(el)';
var invalidColor = 'rgb(255, 0, 0)';
var normalColor = 'rgb(255, 255, 255)';
var disabledColor = 'rgb(0, 0, 0)';
var readOnlyColor = 'rgb(0, 255, 0)'
var validColor = 'rgb(0, 0, 255)';

debug('Change the value of a menulist select by setSelectedIndexByUser:');
el = makeInvalid('menulist');
o1 = appendOption('', el);
o2 = appendOption('X', el);
objCController.setSelectElementSelectedIndexAllowingMultiple(el, 1, false);
shouldBe(elBackground, 'validColor');
objCController.setSelectElementSelectedIndexAllowingMultiple(el, 0, false);
shouldBe(elBackground, 'invalidColor');

debug('Change the value of a listbox select by setSelectedIndexByUser:');
el = makeInvalid('listbox');
el.multiple = true;
o1 = appendOption('', el);
o2 = appendOption('X', el);
o1.selected = false;
o2.selected = false;
shouldBe(elBackground, 'invalidColor');
objCController.setSelectElementSelectedIndexAllowingMultiple(el, 0, false);
shouldBe(elBackground, 'validColor');

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