3 <script src='../../resources/js-test.js'
></script>
6 div:read-only, span:read-only { background-color: rgb(
204,
255,
255); }
7 div:read-write, span:read-write { background-color: rgb(
255,
204,
204); }
10 <div id=
"p1" contenteditable
>Some parent text.
<span id=
"c1a">Some
<span id=
"c1b">child text.
</span></span></div>
11 <div id=
"p2">Some parent text.
<span id=
"c2a">Some
<span id=
"c2b">child text.
</span></span></div>
15 var readOnlyColor
= '"rgb(204, 255, 255)"';
16 var readWriteColor
= '"rgb(255, 204, 204)"';
18 var p1
= document
.getElementById('p1');
19 var c1a
= document
.getElementById('c1a');
20 var c1b
= document
.getElementById('c1b');
22 var p2
= document
.getElementById('p2');
23 var c2a
= document
.getElementById('c2a');
24 var c2b
= document
.getElementById('c2b');
26 var backgroundColorOf = function(elmName
) {
27 return 'getComputedStyle('+elmName
+')["background-color"]';
30 // Check initial computed style.
32 shouldBe(backgroundColorOf('p1'), readWriteColor
);
33 shouldBe(backgroundColorOf('c1a'), readWriteColor
);
34 shouldBe(backgroundColorOf('c1b'), readWriteColor
);
36 shouldBe(backgroundColorOf('p2'), readOnlyColor
);
37 shouldBe(backgroundColorOf('c2a'), readOnlyColor
);
38 shouldBe(backgroundColorOf('c2b'), readOnlyColor
);
40 p1
.setAttribute("contenteditable", "false");
41 p2
.setAttribute("contenteditable", "true");
43 // Check computed style after changing attribute.
45 shouldBe(backgroundColorOf('p1'), readOnlyColor
);
46 shouldBe(backgroundColorOf('c1a'), readOnlyColor
);
47 shouldBe(backgroundColorOf('c1b'), readOnlyColor
);
49 shouldBe(backgroundColorOf('p2'), readWriteColor
);
50 shouldBe(backgroundColorOf('c2a'), readWriteColor
);
51 shouldBe(backgroundColorOf('c2b'), readWriteColor
);