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

 <html>
 <head>
 <title>required/optional CSS pseudoclasses part 6</title>
 <style>
  input:optional { background: red; }
  input { background: red; }
  input:required { background: lime; }
 </style>
 <script language="JavaScript" type="text/javascript">
     function log(message) {
         document.getElementById("console").innerHTML += "<li>"+message+"</li>";
     }

     function test() {
         if (window.layoutTestController)
             layoutTestController.dumpAsText();

         v = document.getElementsByName("victim");

         for (i = 0; i < v.length; i++)
             if (document.defaultView.getComputedStyle(v[i], null).getPropertyValue('background-color') == "rgb(0, 255, 0)")
                 log("SUCCESS");
             else
                 log("FAILURE");
     }
 </script>
 </head>
 <body onload="test()">
 <p>All controls should have a green background.</p>
 <input type="text" name="victim" required/>
 <input type="password" name="victim" required/>
 <input type="search" name="victim" required/>
 <input type="url" name="victim" required/>
 <input type="telephone" name="victim" required/>
 <input type="email" name="victim" required/>
 <input type="number" name="victim" required/>
 <input type="checkbox" name="victim" required/>
 <input type="radio" name="victim" required/>
 <input type="file" name="victim" required/>

 <hr>
 <ol id="console"></ol>
 </body>
 </html>
	<html>
	<head>
	<title>required/optional CSS pseudoclasses part 6</title>
	<style>
	input:optional { background: red; }
	input { background: red; }
	input:required { background: lime; }
	</style>
	<script language="JavaScript" type="text/javascript">
	function log(message) {
	document.getElementById("console").innerHTML += "<li>"+message+"</li>";
	}

	function test() {
	if (window.layoutTestController)
	layoutTestController.dumpAsText();

	v = document.getElementsByName("victim");

	for (i = 0; i < v.length; i++)
	if (document.defaultView.getComputedStyle(v[i], null).getPropertyValue('background-color') == "rgb(0, 255, 0)")
	log("SUCCESS");
	else
	log("FAILURE");
	}
	</script>
	</head>
	<body onload="test()">
	<p>All controls should have a green background.</p>
	<input type="text" name="victim" required/>
	<input type="password" name="victim" required/>
	<input type="search" name="victim" required/>
	<input type="url" name="victim" required/>
	<input type="telephone" name="victim" required/>
	<input type="email" name="victim" required/>
	<input type="number" name="victim" required/>
	<input type="checkbox" name="victim" required/>
	<input type="radio" name="victim" required/>
	<input type="file" name="victim" required/>

	<hr>
	<ol id="console"></ol>
	</body>
	</html>