<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../resources/js-test-pre.js"/>
</head>
<body>
<svg display="none" xmlns="http://www.w3.org/2000/svg"/>
<p id="description"></p>
<div id="console"/>
<script><![CDATA[
SVG_NS = 'http://www.w3.org/2000/svg';
var color1, color2;
var systemColorRed, systemColorGreen, systemColorBlue;
function checkSystemColor(id1, id2, systemColor)
{
    var textElement = document.getElementById(id1);
    var computedStyleText = textElement.ownerDocument.defaultView.getComputedStyle(textElement);
    var divElement = document.getElementById(id2);
    var computedStyleDiv = divElement.ownerDocument.defaultView.getComputedStyle(divElement);

    color1 = computedStyleText.getPropertyCSSValue('fill').rgbColor;
    color2 = computedStyleDiv.getPropertyCSSValue('color').getRGBColorValue();

    systemColorRed = color2.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
    systemColorGreen = color2.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
    systemColorBlue = color2.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);

    debug('Testing system color' + systemColor);

    shouldBe("color1.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "systemColorRed");
    shouldBe("color1.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "systemColorGreen");
    shouldBe("color1.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "systemColorBlue");

    color1 = computedStyleText.getPropertyCSSValue('stroke').rgbColor;

    shouldBe("color1.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "systemColorRed");
    shouldBe("color1.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "systemColorGreen");
    shouldBe("color1.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "systemColorBlue");
}

description('Test that fill and stroke properties accept system colors');
debug('');

var systemColors = new Array("ActiveBorder", "ActiveCaption", "AppWorkspace", "Background", "ButtonFace", "ButtonHighlight",
                             "ButtonShadow", "ButtonText", "CaptionText", "GrayText", "Highlight", "HighlightText",
                             "InactiveBorder", "InactiveCaption", "InactiveCaptionText", "InfoBackground", "InfoText",
                             "Menu", "MenuText", "Scrollbar", "ThreeDDarkShadow", "ThreeDFace", "ThreeDHighlight",
                             "ThreeDLightShadow", "ThreeDShadow", "Window", "WindowFrame", "WindowText");
var svgElement = document.getElementsByTagName("svg")[0];
for (i = 0; i < systemColors.length; ++i) {
    var textElement = document.createElementNS(SVG_NS, "text");
    textElement.setAttribute("id", "text" + i);
    textElement.setAttribute("stroke", systemColors[i]);
    textElement.setAttribute("style", "fill:" + systemColors[i]);
    svgElement.appendChild(textElement);

    var divElement = document.createElement("div");
    divElement.setAttribute("id", "expected" + i);
    divElement.setAttribute("style", "color:" + systemColors[i]);
    document.body.appendChild(divElement);

    checkSystemColor('text' + i, 'expected' + i, systemColors[i]);
}

]]>
</script>
<script src="../../resources/js-test-post.js"></script>

</body>
</html>