Editing tests should use testRunner instead of layoutTestController
[WebKit-https.git] / LayoutTests / editing / execCommand / query-command-value-background-color.html
1 <html>
2 <body style="background: #cccccc;">
3 <p id="console"></p>
4 <div id="background" style="position: absolute; top: 490px; width: 500px; height:3em;background: black;"></div>
5 <div id="container" contenteditable="true"></div>
6 <script type="text/javascript"> 
7
8 if (window.testRunner)
9     testRunner.dumpAsText();
10
11 function getColor(e) {
12     if (document.selection) {
13         var r = document.selection.createRange();
14         r.moveToElementText(e);
15         r.select();
16         backColor = document.queryCommandValue('backColor');
17         r = (backColor & 0xFF)
18         g = ((backColor >> 8) & 0xFF)
19         b = ((backColor >> 16) & 0xFF)
20         return 'rgb('+r+', '+g+', '+b+')';
21     } else {
22         var r = document.createRange();
23         var s = window.getSelection();
24         r.setStart(e, 0);
25         r.setEnd(e, e.childNodes.length);
26         s.removeAllRanges();
27         s.addRange(r);
28         return document.queryCommandValue('backColor');
29     }
30 }
31
32 function test(html, expected) {
33     var c = document.getElementById('container');
34     c.innerHTML = html;
35     var actual = getColor(document.getElementById('selected'));
36     var console = document.getElementById('console');
37     if (actual == expected) {
38         console.innerHTML += "<span style='color: green; font-weight: bold;'>PASS</span> "+expected+" for ";
39     } else {
40         console.innerHTML += "<span style='color: red; font-weight: bold;'>FAILED</span> expected "+expected+
41             " but got "+actual+" for ";
42     }
43     console.appendChild(document.createTextNode(html));
44     console.innerHTML += "<br>";
45     c.innerHTML = "";
46 }
47
48 test("<div style='background: green;'><span id=selected>hello world</span></div>", 'rgb(0, 128, 0)');
49 test("<div style='background: green;'><p>hello</p><span id=selected>world</span><p>webkit</p></div>", 'rgb(0, 128, 0)');
50 test("<div style='background: green;'>hello <span style='background-color: blue;' id=selected>world</span></div>", 'rgb(0, 0, 255)');
51 test("<div style='background: green;'>hello<span style='position: absolute; top: 200px;' id=selected>world</span></div>", 'rgb(204, 204, 204)');
52 test("<div style='background: green;'>hello<span style='position: absolute; top: 500px;' id=selected>world</span></div>", 'rgb(0, 0, 0)');
53 test("<div style='background: green;' id=selected><span style='background-color: yellow'>hello</span> world</div>", 'rgb(0, 128, 0)');
54 test("<div style='background: green;' id=selected><span style='background-color: yellow'>hello</span><span style='background-color: yellow'> world</span></div>", 'rgb(0, 128, 0)');
55 test("<div style='background: green;' id=selected><span style='background-color: yellow'>hello</span><span style='background-color: blue'> world</span></div>", 'rgb(0, 128, 0)');
56 test("<div style='background: green;'><span style='background-color: yellow' id=selected>hello world</span></div>", 'rgb(255, 255, 0)');
57 test("<div style='background: green;'><span style='background-color: rgba(255, 255, 0, 0);' id=selected>hello world</span></div>", 'rgb(0, 128, 0)');
58 test("<div style='background: green;'><span style='background-color: rgba(255, 255, 0, 0.5);' id=selected>hello world</span></div>", 'rgba(255, 255, 0, 0.496094)');
59
60 </script>