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