editing/execCommand/query-command-value-background-color.html

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