blob: 4a4ba18f94fed494e1c8145437b4b05b721e7940 [file] [log] [blame]
<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>