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

    function test() {
        if (window.testRunner)
            testRunner.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>
<button type="button" name="victim">Lorem ipsum</button>
<input name="victim" disabled/>
<input type="button" name="victim"/>
<select name="victim"></select>
<textarea name="victim"></textarea>
<hr>
<ol id="console"></ol>
</body>
</html>