<!DOCTYPE html>
<html>
<head>
<style>
[name=victim] {
background-color: #0f0;
}
[name=victim]:invalid {
background-color: #f00;
}
</style>
<script src="../../resources/js-test.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>
</body>
</html>