<html>
<head>
<title>"readonly" and elements it does not apply to</title>
<style>
 input:read-only { background:red }
 input { display: none }
 select:read-only { background:red }
 select { display: none }
 button:read-only { background:red }
 button { display: none }
</style>
<link rel="help" href="http://whatwg.org/specs/web-forms/current-work/#readonly">
<link rel="help" href="http://whatwg.org/specs/web-forms/current-work/#relation">
<script language="JavaScript" type="text/javascript">
    function log(message) {
        document.getElementById("console").innerHTML += "<li>"+message+"</li>";
    }

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

        var i = document.getElementsByName("victim");
        for (c = 0; c < i.length; c++) {
            if (document.defaultView.getComputedStyle(i[c], null).getPropertyValue('display') == "none")
                log(c + ": SUCCESS");
            else
                log(c + ": FAILURE");
        }
    }
</script>
</head>
<body onload="test()">
<p>:read-only doesn't apply to following controls. Fails if FAILURE is shown somewhere.</p>
<input name="victim" type="radio" readonly>
<input name="victim" type="file" readonly>
<input name="victim" type="range" readonly disabled>
<input name="victim" type="button" readonly>
<input name="victim" type="submit" readonly>
<input name="victim" type="reset" readonly>
<select name="victim" readonly></select>
<button name="victim" readonly></button>
<button name="victim" readonly type="reset"></button>
<button name="victim" readonly type="submit"></button>
<hr>
<ol id="console"></ol>
</body>
</html>