LayoutTests/fast/forms/setCustomValidity.html - WebKit - Git at Google

 <!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>
	<!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>