readwrite-contenteditable-recalc.html

<!doctype html>

<script src='../../resources/js-test.js'></script>

<style>
    div:read-only, span:read-only { background-color: rgb(204, 255, 255); }
    div:read-write, span:read-write { background-color: rgb(255, 204, 204); }
</style>

<div id="p1" contenteditable>Some parent text. <span id="c1a">Some <span id="c1b">child text.</span></span></div>
<div id="p2">Some parent text. <span id="c2a">Some <span id="c2b">child text.</span></span></div>

<script>

    var readOnlyColor = '"rgb(204, 255, 255)"';
    var readWriteColor = '"rgb(255, 204, 204)"';

    var p1 = document.getElementById('p1');
    var c1a = document.getElementById('c1a');
    var c1b = document.getElementById('c1b');

    var p2 = document.getElementById('p2');
    var c2a = document.getElementById('c2a');
    var c2b = document.getElementById('c2b');

    var backgroundColorOf = function(elmName) {
        return 'getComputedStyle('+elmName+')["background-color"]';
    };

    // Check initial computed style.

    shouldBe(backgroundColorOf('p1'), readWriteColor);
    shouldBe(backgroundColorOf('c1a'), readWriteColor);
    shouldBe(backgroundColorOf('c1b'), readWriteColor);

    shouldBe(backgroundColorOf('p2'), readOnlyColor);
    shouldBe(backgroundColorOf('c2a'), readOnlyColor);
    shouldBe(backgroundColorOf('c2b'), readOnlyColor);

    p1.setAttribute("contenteditable", "false");
    p2.setAttribute("contenteditable", "true");

    // Check computed style after changing attribute.

    shouldBe(backgroundColorOf('p1'), readOnlyColor);
    shouldBe(backgroundColorOf('c1a'), readOnlyColor);
    shouldBe(backgroundColorOf('c1b'), readOnlyColor);

    shouldBe(backgroundColorOf('p2'), readWriteColor);
    shouldBe(backgroundColorOf('c2a'), readWriteColor);
    shouldBe(backgroundColorOf('c2b'), readWriteColor);

</script>
chromium/third_party/blink/web_tests/fast/css/readwrite-contenteditable-recalc.html
