| <!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> |
