| <html> |
| <body style="background: #cccccc;"> |
| <p id="console"></p> |
| <div id="background" style="position: absolute; top: 490px; width: 500px; height:3em;background: black;"></div> |
| <div id="container" contenteditable="true"></div> |
| <script type="text/javascript"> |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function getColor(e) { |
| if (document.selection) { |
| var r = document.selection.createRange(); |
| r.moveToElementText(e); |
| r.select(); |
| backColor = document.queryCommandValue('backColor'); |
| r = (backColor & 0xFF) |
| g = ((backColor >> 8) & 0xFF) |
| b = ((backColor >> 16) & 0xFF) |
| return 'rgb('+r+', '+g+', '+b+')'; |
| } else { |
| var r = document.createRange(); |
| var s = window.getSelection(); |
| r.setStart(e, 0); |
| r.setEnd(e, e.childNodes.length); |
| s.removeAllRanges(); |
| s.addRange(r); |
| return document.queryCommandValue('backColor'); |
| } |
| } |
| |
| function test(html, expected) { |
| var c = document.getElementById('container'); |
| c.innerHTML = html; |
| var actual = getColor(document.getElementById('selected')); |
| var console = document.getElementById('console'); |
| if (actual == expected) { |
| console.innerHTML += "<span style='color: green; font-weight: bold;'>PASS</span> "+expected+" for "; |
| } else { |
| console.innerHTML += "<span style='color: red; font-weight: bold;'>FAILED</span> expected "+expected+ |
| " but got "+actual+" for "; |
| } |
| console.appendChild(document.createTextNode(html)); |
| console.innerHTML += "<br>"; |
| c.innerHTML = ""; |
| } |
| |
| test("<div style='background: green;'><span id=selected>hello world</span></div>", 'rgb(0, 128, 0)'); |
| test("<div style='background: green;'><p>hello</p><span id=selected>world</span><p>webkit</p></div>", 'rgb(0, 128, 0)'); |
| test("<div style='background: green;'>hello <span style='background-color: blue;' id=selected>world</span></div>", 'rgb(0, 0, 255)'); |
| test("<div style='background: green;'>hello<span style='position: absolute; top: 200px;' id=selected>world</span></div>", 'rgb(204, 204, 204)'); |
| test("<div style='background: green;'>hello<span style='position: absolute; top: 500px;' id=selected>world</span></div>", 'rgb(0, 0, 0)'); |
| test("<div style='background: green;' id=selected><span style='background-color: yellow'>hello</span> world</div>", 'rgb(0, 128, 0)'); |
| 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)'); |
| 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)'); |
| test("<div style='background: green;'><span style='background-color: yellow' id=selected>hello world</span></div>", 'rgb(255, 255, 0)'); |
| test("<div style='background: green;'><span style='background-color: rgba(255, 255, 0, 0);' id=selected>hello world</span></div>", 'rgb(0, 128, 0)'); |
| 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.498039)'); |
| |
| </script> |
