<html>
<head>
<title>"readonly", :read-only and :read-write</title>
<style>
 input { background: red; }
 #i1:read-write { background: lime; }
 #i2 { background: lime; }
 #i2:read-only { background: red; }
 #i3:read-write { background: lime; }
 #i4:read-only { background: lime; }
 #i5:read-only { background: lime; }
 #i6:read-write { background: lime; }

</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();

        document.getElementById('i3').removeAttribute('readonly');
        document.getElementById('i4').readOnly = true;
        document.getElementById('i5').setAttribute('readonly','readonly');
        document.getElementById('i6').readOnly = false;

        var i = document.getElementsByTagName("input");
        for (c = 0; c < i.length; c++) {
            if (document.defaultView.getComputedStyle(i[c], null).getPropertyValue('background-color') == "rgb(0, 255, 0)")
                log(c + ": SUCCESS");
            else
                log(c + ": FAILURE");
        }
    }
</script>
</head>
<body onload="test()">
<p>This test checks for :read-only and :read-write right behavior along with readonly attribute. Fails if some FAILURE is shown below.</p>

<input id="i1"/>
<input type="radio" readonly="readonly" id="i2"/>
<input readonly="readonly" id="i3"/>
<input id="i4"/>
<input id="i5"/>
<input readonly="readonly" id="i6"/>
<hr>
<ol id="console"></ol>
</body>
</html>