<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
* {
    background-color: white;
}
target:read-only {
    background-color: red;
}
target:read-write {
    background-color: lime;
}
</style>
</head>
<body>
    <div style="display:none">
        <target></target>
        <target id="target"></target>
        <target></target>
    </div>
</body>
<script>
description('Test that the style is invalidated and updated properly when properties causing :read-only/:read-write change.');

function testStyle(expectReadOnly)
{
    shouldBeEqualToString('getComputedStyle(document.getElementById("target")).backgroundColor', expectReadOnly ? 'rgb(255, 0, 0)' : 'rgb(0, 255, 0)');
}

debug("Initially, the target should be read only.");
testStyle(true);

debug("Changing content editable via the API.");
var target = document.getElementById('target');
target.contentEditable = "true";
testStyle(false);

target.contentEditable = "false";
testStyle(true);

target.contentEditable = "plaintext-only";
testStyle(false);

target.contentEditable = false;
testStyle(true);

debug("Changing content editable via the attributes.");
target.setAttribute("CoNtEnTeDiTaBlE", "true");
testStyle(false);

target.setAttribute("CoNtEnTeDiTaBlE", "false");
testStyle(true);

target.setAttribute("CoNtEnTeDiTaBlE", "");
testStyle(false);

target.removeAttribute("contenteditable");
testStyle(true);

debug("Changing content editable on the parent via the API.");
var parent = target.parentElement;
parent.contentEditable = "true";
testStyle(false);

parent.contentEditable = "false";
testStyle(true);

parent.contentEditable = "plaintext-only";
testStyle(false);

parent.contentEditable = false;
testStyle(true);

debug("Changing content editable via the attributes.");
parent.setAttribute("CoNtEnTeDiTaBlE", "true");
testStyle(false);

parent.setAttribute("CoNtEnTeDiTaBlE", "false");
testStyle(true);

parent.setAttribute("CoNtEnTeDiTaBlE", "");
testStyle(false);

parent.removeAttribute("contenteditable");
testStyle(true);

debug("Moving the document to design mode.");
document.designMode = "on";
testStyle(false);

debug("Setting the target's contenteditable to true should not change a thing now.");
target.contentEditable = "true";
testStyle(false);

debug("Setting the target's contenteditable to false should still be respected in design mode.");
target.contentEditable = "false";
testStyle(true);

debug("Let's remove the contenteditable attribute on the target, we should still be read-write because of design mode.");
target.removeAttribute("contenteditable");
testStyle(false);

debug("Disabling design mode.");
document.designMode = "off";
testStyle(true);

</script>
<script src="../../resources/js-test-post.js"></script>
</html>