LayoutTests/fast/css/pseudo-required-optional-unapplied.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 <style>
 :required {
     background-color: red;
 }
 :optional {
     background-color: red;
 }
 input, fieldset, legend, label, datalist, optgroup, option, keygen, output, meter, progress {
     background-color: lime;
 }
 </style>
 </head>
 <body>
 <p id="description"></p>

 <div id=victims>
 <fieldset id=fieldset>
 <legend id=legend></legend>
 </fieldset>
 <label id=label></label>
 <datalist id=datalist></datalist>
 <select>
 <optgroup id=optgroup></optgroup>
 <option id=option></option>
 </select>
 <keygen id=keygen>
 <output id=output></output>
 <meter id=meter></meter>
 <progress id=progress></progress>
 </div>

 <div id="console"></div>
 <script>
 description('Check cases that :required/:optional classes are not applied');

 function getBackgroundColor(id) {
     var element = document.getElementById(id);
     return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color')
 }

 var identifiers = [
     'fieldset',
     'legend',
     'label',
     'datalist',
     'optgroup',
     'option',
     'keygen',
     'output',
     'meter',
     'progress',
 ];

 var normalColor = 'rgb(0, 255, 0)';
 for (var i = 0; i < identifiers.length; i++)
     shouldBe('getBackgroundColor("' + identifiers[i] + '")', 'normalColor');

 document.getElementById('victims').innerHTML = '';
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<script src="../../resources/js-test-pre.js"></script>
	<style>
	:required {
	background-color: red;
	}
	:optional {
	background-color: red;
	}
	input, fieldset, legend, label, datalist, optgroup, option, keygen, output, meter, progress {
	background-color: lime;
	}
	</style>
	</head>
	<body>
	<p id="description"></p>

	<div id=victims>
	<fieldset id=fieldset>
	<legend id=legend></legend>
	</fieldset>
	<label id=label></label>
	<datalist id=datalist></datalist>
	<select>
	<optgroup id=optgroup></optgroup>
	<option id=option></option>
	</select>
	<keygen id=keygen>
	<output id=output></output>
	<meter id=meter></meter>
	<progress id=progress></progress>
	</div>

	<div id="console"></div>
	<script>
	description('Check cases that :required/:optional classes are not applied');

	function getBackgroundColor(id) {
	var element = document.getElementById(id);
	return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color')
	}

	var identifiers = [
	'fieldset',
	'legend',
	'label',
	'datalist',
	'optgroup',
	'option',
	'keygen',
	'output',
	'meter',
	'progress',
	];

	var normalColor = 'rgb(0, 255, 0)';
	for (var i = 0; i < identifiers.length; i++)
	shouldBe('getBackgroundColor("' + identifiers[i] + '")', 'normalColor');

	document.getElementById('victims').innerHTML = '';
	</script>
	<script src="../../resources/js-test-post.js"></script>
	</body>
	</html>