<!DOCTYPE html>
<html>
<head>
<style>

[name=victim] {
  background-color: #0f0;
}

[name=victim]:invalid {
  background-color: #f00;
}

</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>

<select name="victim"></select>
<textarea name="victim"></textarea>
<input name="victim">

<div id="console"></div>
<script>

description('This test checks if setCustomValidity causes CSS to get applied correctly.');

var v = document.getElementsByName('victim');
var test;

for (var i = 0; i < v.length; i++) {
    test = v[i];

    shouldBeFalse('test.validity.customError');
    shouldBeEqualToString('test.validationMessage', '');
    shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(0, 255, 0)');

    var message = 'Custom validation message';
    test.setCustomValidity(message);
    shouldBeTrue('test.validity.customError');
    shouldBeEqualToString('test.validationMessage', message);
    shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(255, 0, 0)');

    test.setCustomValidity('');
    shouldBeFalse('test.validity.customError');
    shouldBeEqualToString('test.validationMessage', '');
    shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(0, 255, 0)');
}

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