Commit 17ff3d67 authored by Alison Maher's avatar Alison Maher Committed by Commit Bot

Ship Windows system colors and LinkText/VisitedText

Set the UseWindowsSystemColors and LinkSystemColors flags to stable
and update test expectations.

Spec: https://drafts.csswg.org/css-color-4/#css-system-colors

Bug: 970285
Change-Id: I1c65b09cbec6a6408c0056ac2f088df2bdcd9f4b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1829645
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: default avatarAvi Drissman <avi@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702152}
parent 81dd6792
// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
#include "build/build_config.h"
#include "content/public/test/content_browser_test.h"
#include "content/public/test/content_browser_test_utils.h"
namespace content {
class WebThemeEngineImplDefaultBrowserTest : public ContentBrowserTest {
public:
WebThemeEngineImplDefaultBrowserTest() {}
};
#if defined(OS_WIN)
IN_PROC_BROWSER_TEST_F(WebThemeEngineImplDefaultBrowserTest, GetSystemColor) {
GURL url(
"data:text/html,"
"<!doctype html><html>"
"<body>"
"<div id='activeBorder' style='color: ActiveBorder'>ActiveBorder</div>"
"<div id='activeCaption' style='color: ActiveCaption'>ActiveCaption</div>"
"<div id='appWorkspace' style='color: AppWorkspace'>AppWorkspace</div>"
"<div id='background' style='color: Background'>Background</div>"
"<div id='buttonFace' style='color: ButtonFace'>ButtonFace</div>"
"<div id='buttonHighlight' style='color: "
"ButtonHighlight'>ButtonHighlight</div>"
"<div id='buttonShadow' style='color: ButtonShadow'>ButtonShadow</div>"
"<div id='buttonText' style='color: ButtonText'>ButtonText</div>"
"<div id='captionText' style='color: CaptionText'>CaptionText</div>"
"<div id='grayText' style='color: GrayText'>GrayText</div>"
"<div id='highlight' style='color: Highlight'>Highlight</div>"
"<div id='highlightText' style='color: HighlightText'>HighlightText</div>"
"<div id='inactiveBorder' style='color: "
"InactiveBorder'>InactiveBorder</div>"
"<div id='inactiveCaption' style='color: "
"InactiveCaption'>InactiveCaption</div>"
"<div id='inactiveCaptionText' style='color: "
"InactiveCaptionText'>InactiveCaptionText</div>"
"<div id='infoBackground' style='color: "
"InfoBackground'>InfoBackground</div>"
"<div id='infoText' style='color: InfoText'>InfoText</div>"
"<div id='linkText' style='color: LinkText'>LinkText</div>"
"<div id='menu' style='color: Menu'>Menu</div>"
"<div id='menuText' style='color: MenuText'>MenuText</div>"
"<div id='scrollbar' style='color: Scrollbar'>Scrollbar</div>"
"<div id='threeDDarkShadow' style='color: "
"ThreeDDarkShadow'>ThreeDDarkShadow</div>"
"<div id='threeDFace' style='color: ThreeDFace'>ThreeDFace</div>"
"<div id='threeDHighlight' style='color: "
"ThreeDHighlight'>ThreeDHighlight</div>"
"<div id='threeDLightShadow' style='color: "
"ThreeDLightShadow'>ThreeDLightShadow</div>"
"<div id='threeDShadow' style='color: ThreeDShadow'>ThreeDShadow</div>"
"<div id='visitedText' style='color: VisitedText'>VisitedText</div>"
"<div id='window' style='color: Window'>Window</div>"
"<div id='windowFrame' style='color: WindowFrame'>WindowFrame</div>"
"<div id='windowText' style='color: WindowText'>WindowText</div>"
"</body></html>");
EXPECT_TRUE(NavigateToURL(shell(), url));
std::vector<std::string> ids = {"activeBorder",
"activeCaption",
"appWorkspace",
"background",
"buttonFace",
"buttonHighlight",
"buttonShadow",
"buttonText",
"captionText",
"grayText",
"highlight",
"highlightText",
"inactiveBorder",
"inactiveCaption",
"inactiveCaptionText",
"infoBackground",
"infoText",
"linkText",
"menu",
"menuText",
"scrollbar",
"threeDDarkShadow",
"threeDFace",
"threeDHighlight",
"threeDLightShadow",
"threeDShadow",
"visitedText",
"window",
"windowFrame",
"windowText"};
std::vector<std::string> expected_colors = {
"rgb(255, 255, 255)", "rgb(204, 204, 204)", "rgb(255, 255, 255)",
"rgb(99, 99, 206)", "rgb(240, 240, 240)", "rgb(221, 221, 221)",
"rgb(136, 136, 136)", "rgb(0, 0, 0)", "rgb(0, 0, 0)",
"rgb(109, 109, 109)", "rgb(0, 120, 215)", "rgb(255, 255, 255)",
"rgb(255, 255, 255)", "rgb(255, 255, 255)", "rgb(127, 127, 127)",
"rgb(251, 252, 197)", "rgb(0, 0, 0)", "rgb(0, 102, 204)",
"rgb(247, 247, 247)", "rgb(0, 0, 0)", "rgb(255, 255, 255)",
"rgb(102, 102, 102)", "rgb(192, 192, 192)", "rgb(221, 221, 221)",
"rgb(192, 192, 192)", "rgb(136, 136, 136)", "rgb(0, 102, 204)",
"rgb(255, 255, 255)", "rgb(204, 204, 204)", "rgb(0, 0, 0)"};
ASSERT_EQ(ids.size(), expected_colors.size());
for (size_t i = 0; i < ids.size(); i++) {
EXPECT_EQ(expected_colors[i],
EvalJs(shell(),
"window.getComputedStyle(document.getElementById('" +
ids[i] + "')).getPropertyValue('color').toString()"));
}
}
#endif // defined(OS_WIN)
} // namespace content
...@@ -1081,6 +1081,7 @@ test("content_browsertests") { ...@@ -1081,6 +1081,7 @@ test("content_browsertests") {
"../browser/webui/web_ui_mojo_browsertest.cc", "../browser/webui/web_ui_mojo_browsertest.cc",
"../browser/worker_host/worker_browsertest.cc", "../browser/worker_host/worker_browsertest.cc",
"../browser/worker_network_isolation_key_browsertest.cc", "../browser/worker_network_isolation_key_browsertest.cc",
"../child/webthemeengine_impl_default_browsertest.cc",
"../renderer/accessibility/render_accessibility_impl_browsertest.cc", "../renderer/accessibility/render_accessibility_impl_browsertest.cc",
"../renderer/blink_platform_audio_hardware_browsertest.cc", "../renderer/blink_platform_audio_hardware_browsertest.cc",
"../renderer/gin_browsertest.cc", "../renderer/gin_browsertest.cc",
......
...@@ -57,11 +57,13 @@ Color LayoutThemeWin::SystemColor(CSSValueID css_value_id, ...@@ -57,11 +57,13 @@ Color LayoutThemeWin::SystemColor(CSSValueID css_value_id,
return LayoutThemeDefault::SystemColor(css_value_id, color_scheme); return LayoutThemeDefault::SystemColor(css_value_id, color_scheme);
} }
if (Platform::Current() && Platform::Current()->ThemeEngine()) {
const base::Optional<SkColor> system_color = const base::Optional<SkColor> system_color =
Platform::Current()->ThemeEngine()->GetSystemColor(theme_color); Platform::Current()->ThemeEngine()->GetSystemColor(theme_color);
if (system_color == base::nullopt) if (system_color)
return LayoutThemeDefault::SystemColor(css_value_id, color_scheme);
return Color(system_color.value()); return Color(system_color.value());
}
return LayoutThemeDefault::SystemColor(css_value_id, color_scheme);
} }
} // namespace blink } // namespace blink
...@@ -910,7 +910,8 @@ ...@@ -910,7 +910,8 @@
// Enabled by features::kLegacyWindowsDWriteFontFallback; // Enabled by features::kLegacyWindowsDWriteFontFallback;
}, },
{ {
name: "LinkSystemColors" name: "LinkSystemColors",
status: "stable",
}, },
{ {
name: "LongTaskV2", name: "LongTaskV2",
...@@ -1666,6 +1667,7 @@ ...@@ -1666,6 +1667,7 @@
}, },
{ {
name: "UseWindowsSystemColors", name: "UseWindowsSystemColors",
status: "stable",
}, },
{ {
name: "V8IdleTasks", name: "V8IdleTasks",
......
...@@ -36,8 +36,8 @@ PASS Setting color to InfoBackground was successfully set. ...@@ -36,8 +36,8 @@ PASS Setting color to InfoBackground was successfully set.
PASS Setting color to infobackground was successfully set. PASS Setting color to infobackground was successfully set.
PASS Setting color to InfoText was successfully set. PASS Setting color to InfoText was successfully set.
PASS Setting color to infotext was successfully set. PASS Setting color to infotext was successfully set.
FAIL Setting color to LinkText was not set but should! PASS Setting color to LinkText was successfully set.
FAIL Setting color to linktext was not set but should! PASS Setting color to linktext was successfully set.
PASS Setting color to Menu was successfully set. PASS Setting color to Menu was successfully set.
PASS Setting color to menu was successfully set. PASS Setting color to menu was successfully set.
PASS Setting color to MenuText was successfully set. PASS Setting color to MenuText was successfully set.
...@@ -54,8 +54,8 @@ PASS Setting color to ThreeDLightShadow was successfully set. ...@@ -54,8 +54,8 @@ PASS Setting color to ThreeDLightShadow was successfully set.
PASS Setting color to threedlightshadow was successfully set. PASS Setting color to threedlightshadow was successfully set.
PASS Setting color to ThreeDShadow was successfully set. PASS Setting color to ThreeDShadow was successfully set.
PASS Setting color to threedshadow was successfully set. PASS Setting color to threedshadow was successfully set.
FAIL Setting color to VisitedText was not set but should! PASS Setting color to VisitedText was successfully set.
FAIL Setting color to visitedtext was not set but should! PASS Setting color to visitedtext was successfully set.
PASS Setting color to Window was successfully set. PASS Setting color to Window was successfully set.
PASS Setting color to window was successfully set. PASS Setting color to window was successfully set.
PASS Setting color to WindowFrame was successfully set. PASS Setting color to WindowFrame was successfully set.
......
<!DOCTYPE html>
<html>
<head>
<title>Color Test</title>
<style>
html {
font-size: 12px;
width: 750px;
}
.box:after {
content: " ";
clear: both;
display: block;
}
.inner {
border-top: solid 1px;
float: right;
width: 620px;
}
.text {
float: left;
}
</style>
</head>
<body>
<div class="box"><div class="text">ActiveBorder</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">ActiveCaption</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div>
<div class="box"><div class="text">AppWorkspace</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">Background</div><div class="inner" style="background-color: rgb(99, 99, 206)">&nbsp;</div></div>
<div class="box"><div class="text">ButtonFace</div><div class="inner" style="background-color: rgb(240, 240, 240)">&nbsp;</div></div>
<div class="box"><div class="text">ButtonHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div>
<div class="box"><div class="text">ButtonShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div>
<div class="box"><div class="text">ButtonText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">CaptionText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">GrayText</div><div class="inner" style="background-color: rgb(109, 109, 109)">&nbsp;</div></div>
<div class="box"><div class="text">Highlight</div><div class="inner" style="background-color: rgb(0, 120, 215)">&nbsp;</div></div>
<div class="box"><div class="text">HighlightText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">InactiveBorder</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">InactiveCaption</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(127, 127, 127)">&nbsp;</div></div>
<div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div>
<div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(0, 102, 204)">&nbsp;</div></div>
<div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(247, 247, 247)">&nbsp;</div></div>
<div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDDarkShadow</div><div class="inner" style="background-color: rgb(102, 102, 102)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDFace</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div>
<div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(0, 102, 204)">&nbsp;</div></div>
<div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div>
<div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
</body>
</html>
Test case for bug 39168. This tests the CSS color parsing code using <canvas>.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS Setting color to ActiveBorder was successfully set.
PASS Setting color to activeborder was successfully set.
PASS Setting color to ActiveCaption was successfully set.
PASS Setting color to activecaption was successfully set.
PASS Setting color to AppWorkspace was successfully set.
PASS Setting color to appworkspace was successfully set.
PASS Setting color to Background was successfully set.
PASS Setting color to background was successfully set.
PASS Setting color to ButtonFace was successfully set.
PASS Setting color to buttonface was successfully set.
PASS Setting color to ButtonHighlight was successfully set.
PASS Setting color to buttonhighlight was successfully set.
PASS Setting color to ButtonShadow was successfully set.
PASS Setting color to buttonshadow was successfully set.
PASS Setting color to ButtonText was successfully set.
PASS Setting color to buttontext was successfully set.
PASS Setting color to CaptionText was successfully set.
PASS Setting color to captiontext was successfully set.
PASS Setting color to GrayText was successfully set.
PASS Setting color to graytext was successfully set.
PASS Setting color to Highlight was successfully set.
PASS Setting color to highlight was successfully set.
PASS Setting color to HighlightText was successfully set.
PASS Setting color to highlighttext was successfully set.
PASS Setting color to InactiveBorder was successfully set.
PASS Setting color to inactiveborder was successfully set.
PASS Setting color to InactiveCaption was successfully set.
PASS Setting color to inactivecaption was successfully set.
PASS Setting color to InactiveCaptionText was successfully set.
PASS Setting color to inactivecaptiontext was successfully set.
PASS Setting color to InfoBackground was successfully set.
PASS Setting color to infobackground was successfully set.
PASS Setting color to InfoText was successfully set.
PASS Setting color to infotext was successfully set.
PASS Setting color to LinkText was successfully set.
PASS Setting color to linktext was successfully set.
PASS Setting color to Menu was successfully set.
PASS Setting color to menu was successfully set.
PASS Setting color to MenuText was successfully set.
PASS Setting color to menutext was successfully set.
PASS Setting color to Scrollbar was successfully set.
PASS Setting color to scrollbar was successfully set.
PASS Setting color to ThreeDDarkShadow was successfully set.
PASS Setting color to threeddarkshadow was successfully set.
PASS Setting color to ThreeDFace was successfully set.
PASS Setting color to threedface was successfully set.
PASS Setting color to ThreeDHighlight was successfully set.
PASS Setting color to threedhighlight was successfully set.
PASS Setting color to ThreeDLightShadow was successfully set.
PASS Setting color to threedlightshadow was successfully set.
PASS Setting color to ThreeDShadow was successfully set.
PASS Setting color to threedshadow was successfully set.
PASS Setting color to VisitedText was successfully set.
PASS Setting color to visitedtext was successfully set.
PASS Setting color to Window was successfully set.
PASS Setting color to window was successfully set.
PASS Setting color to WindowFrame was successfully set.
PASS Setting color to windowframe was successfully set.
PASS Setting color to WindowText was successfully set.
PASS Setting color to windowtext was successfully set.
PASS Setting color to aliceblue was successfully set.
PASS Setting color to antiquewhite was successfully set.
PASS Setting color to aqua was successfully set.
PASS Setting color to aquamarine was successfully set.
PASS Setting color to azure was successfully set.
PASS Setting color to beige was successfully set.
PASS Setting color to bisque was successfully set.
PASS Setting color to black was successfully set.
PASS Setting color to blanchedalmond was successfully set.
PASS Setting color to blue was successfully set.
PASS Setting color to blueviolet was successfully set.
PASS Setting color to brown was successfully set.
PASS Setting color to burlywood was successfully set.
PASS Setting color to cadetblue was successfully set.
PASS Setting color to chartreuse was successfully set.
PASS Setting color to chocolate was successfully set.
PASS Setting color to coral was successfully set.
PASS Setting color to cornflowerblue was successfully set.
PASS Setting color to cornsilk was successfully set.
PASS Setting color to crimson was successfully set.
PASS Setting color to cyan was successfully set.
PASS Setting color to darkblue was successfully set.
PASS Setting color to darkcyan was successfully set.
PASS Setting color to darkgoldenrod was successfully set.
PASS Setting color to darkgray was successfully set.
PASS Setting color to darkgreen was successfully set.
PASS Setting color to darkgrey was successfully set.
PASS Setting color to darkkhaki was successfully set.
PASS Setting color to darkmagenta was successfully set.
PASS Setting color to darkolivegreen was successfully set.
PASS Setting color to darkorange was successfully set.
PASS Setting color to darkorchid was successfully set.
PASS Setting color to darkred was successfully set.
PASS Setting color to darksalmon was successfully set.
PASS Setting color to darkseagreen was successfully set.
PASS Setting color to darkslateblue was successfully set.
PASS Setting color to darkslategray was successfully set.
PASS Setting color to darkslategrey was successfully set.
PASS Setting color to darkturquoise was successfully set.
PASS Setting color to darkviolet was successfully set.
PASS Setting color to deeppink was successfully set.
PASS Setting color to deepskyblue was successfully set.
PASS Setting color to dimgray was successfully set.
PASS Setting color to dimgrey was successfully set.
PASS Setting color to dodgerblue was successfully set.
PASS Setting color to firebrick was successfully set.
PASS Setting color to floralwhite was successfully set.
PASS Setting color to forestgreen was successfully set.
PASS Setting color to fuchsia was successfully set.
PASS Setting color to gainsboro was successfully set.
PASS Setting color to ghostwhite was successfully set.
PASS Setting color to gold was successfully set.
PASS Setting color to goldenrod was successfully set.
PASS Setting color to gray was successfully set.
PASS Setting color to green was successfully set.
PASS Setting color to greenyellow was successfully set.
PASS Setting color to grey was successfully set.
PASS Setting color to honeydew was successfully set.
PASS Setting color to hotpink was successfully set.
PASS Setting color to indianred was successfully set.
PASS Setting color to indigo was successfully set.
PASS Setting color to ivory was successfully set.
PASS Setting color to khaki was successfully set.
PASS Setting color to lavender was successfully set.
PASS Setting color to lavenderblush was successfully set.
PASS Setting color to lawngreen was successfully set.
PASS Setting color to lemonchiffon was successfully set.
PASS Setting color to lightblue was successfully set.
PASS Setting color to lightcoral was successfully set.
PASS Setting color to lightcyan was successfully set.
PASS Setting color to lightgoldenrodyellow was successfully set.
PASS Setting color to lightgray was successfully set.
PASS Setting color to lightgreen was successfully set.
PASS Setting color to lightgrey was successfully set.
PASS Setting color to lightpink was successfully set.
PASS Setting color to lightsalmon was successfully set.
PASS Setting color to lightseagreen was successfully set.
PASS Setting color to lightskyblue was successfully set.
PASS Setting color to lightslategray was successfully set.
PASS Setting color to lightslategrey was successfully set.
PASS Setting color to lightsteelblue was successfully set.
PASS Setting color to lightyellow was successfully set.
PASS Setting color to lime was successfully set.
PASS Setting color to limegreen was successfully set.
PASS Setting color to linen was successfully set.
PASS Setting color to magenta was successfully set.
PASS Setting color to maroon was successfully set.
PASS Setting color to mediumaquamarine was successfully set.
PASS Setting color to mediumblue was successfully set.
PASS Setting color to mediumorchid was successfully set.
PASS Setting color to mediumpurple was successfully set.
PASS Setting color to mediumseagreen was successfully set.
PASS Setting color to mediumslateblue was successfully set.
PASS Setting color to mediumspringgreen was successfully set.
PASS Setting color to mediumturquoise was successfully set.
PASS Setting color to mediumvioletred was successfully set.
PASS Setting color to midnightblue was successfully set.
PASS Setting color to mintcream was successfully set.
PASS Setting color to mistyrose was successfully set.
PASS Setting color to moccasin was successfully set.
PASS Setting color to navajowhite was successfully set.
PASS Setting color to navy was successfully set.
PASS Setting color to oldlace was successfully set.
PASS Setting color to olive was successfully set.
PASS Setting color to olivedrab was successfully set.
PASS Setting color to orange was successfully set.
PASS Setting color to orangered was successfully set.
PASS Setting color to orchid was successfully set.
PASS Setting color to palegoldenrod was successfully set.
PASS Setting color to palegreen was successfully set.
PASS Setting color to paleturquoise was successfully set.
PASS Setting color to palevioletred was successfully set.
PASS Setting color to papayawhip was successfully set.
PASS Setting color to peachpuff was successfully set.
PASS Setting color to peru was successfully set.
PASS Setting color to pink was successfully set.
PASS Setting color to plum was successfully set.
PASS Setting color to powderblue was successfully set.
PASS Setting color to purple was successfully set.
PASS Setting color to rosybrown was successfully set.
PASS Setting color to royalblue was successfully set.
PASS Setting color to saddlebrown was successfully set.
PASS Setting color to salmon was successfully set.
PASS Setting color to sandybrown was successfully set.
PASS Setting color to seagreen was successfully set.
PASS Setting color to seashell was successfully set.
PASS Setting color to sienna was successfully set.
PASS Setting color to silver was successfully set.
PASS Setting color to skyblue was successfully set.
PASS Setting color to slateblue was successfully set.
PASS Setting color to slategray was successfully set.
PASS Setting color to slategrey was successfully set.
PASS Setting color to snow was successfully set.
PASS Setting color to springgreen was successfully set.
PASS Setting color to steelblue was successfully set.
PASS Setting color to tan was successfully set.
PASS Setting color to teal was successfully set.
PASS Setting color to thistle was successfully set.
PASS Setting color to tomato was successfully set.
PASS Setting color to turquoise was successfully set.
PASS Setting color to violet was successfully set.
PASS Setting color to wheat was successfully set.
PASS Setting color to white was successfully set.
PASS Setting color to whitesmoke was successfully set.
PASS Setting color to yellow was successfully set.
PASS Setting color to yellowgreen was successfully set.
PASS Setting color to #0f0 was successfully set.
PASS Setting color to hsl(120, 100%, 50%) was successfully set.
PASS Setting color to foobar was not set (as expected).
PASS Setting color to counter(foobar) was not set (as expected).
PASS Setting color to url(http://127.0.0.1:8080/) was not set (as expected).
PASS Setting color to inherited was not set (as expected).
PASS Setting color to #100% was not set (as expected).
PASS Setting color to #100px was not set (as expected).
PASS Setting color to var("test") was not set (as expected).
PASS successfullyParsed is true
TEST COMPLETE
Test that fill and stroke properties accept system colors
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Testing system colorActiveBorder
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorActiveCaption
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorAppWorkspace
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorBackground
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorButtonFace
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorButtonHighlight
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorButtonShadow
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorButtonText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorCaptionText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorGrayText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorHighlight
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorHighlightText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorInactiveBorder
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorInactiveCaption
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorInactiveCaptionText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorInfoBackground
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorInfoText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorLinkText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorMenu
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorMenuText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorScrollbar
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorThreeDDarkShadow
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorThreeDFace
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorThreeDHighlight
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorThreeDLightShadow
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorThreeDShadow
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorVisitedText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorWindow
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorWindowFrame
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorWindowText
PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color
PASS successfullyParsed is true
TEST COMPLETE
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(127, 127, 127)">&nbsp;</div></div> <div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(127, 127, 127)">&nbsp;</div></div>
<div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div> <div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div>
<div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(0, 0, 238)">&nbsp;</div></div>
<div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(247, 247, 247)">&nbsp;</div></div> <div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(247, 247, 247)">&nbsp;</div></div>
<div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div>
<div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(85, 26, 139)">&nbsp;</div></div>
<div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div> <div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div>
<div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div> <div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div>
<div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(0, 0, 238)">&nbsp;</div></div>
<div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(246, 246, 246)">&nbsp;</div></div> <div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(246, 246, 246)">&nbsp;</div></div>
<div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(170, 170, 170)">&nbsp;</div></div> <div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(170, 170, 170)">&nbsp;</div></div>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(85, 26, 139)">&nbsp;</div></div>
<div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(236, 236, 236)">&nbsp;</div></div> <div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(236, 236, 236)">&nbsp;</div></div>
<div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(170, 170, 170)">&nbsp;</div></div> <div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(170, 170, 170)">&nbsp;</div></div>
<div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(127, 127, 127)">&nbsp;</div></div> <div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(127, 127, 127)">&nbsp;</div></div>
<div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div> <div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div>
<div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(0, 0, 238)">&nbsp;</div></div>
<div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(247, 247, 247)">&nbsp;</div></div> <div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(247, 247, 247)">&nbsp;</div></div>
<div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div>
<div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(85, 26, 139)">&nbsp;</div></div>
<div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div> <div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div>
<div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(127, 127, 127)">&nbsp;</div></div> <div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: rgb(127, 127, 127)">&nbsp;</div></div>
<div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div> <div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: rgb(251, 252, 197)">&nbsp;</div></div>
<div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">LinkText</div><div class="inner" style="background-color: rgb(0, 0, 238)">&nbsp;</div></div>
<div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(247, 247, 247)">&nbsp;</div></div> <div class="box"><div class="text">Menu</div><div class="inner" style="background-color: rgb(247, 247, 247)">&nbsp;</div></div>
<div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: rgb(221, 221, 221)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: rgb(192, 192, 192)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div> <div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: rgb(136, 136, 136)">&nbsp;</div></div>
<div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">VisitedText</div><div class="inner" style="background-color: rgb(85, 26, 139)">&nbsp;</div></div>
<div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div> <div class="box"><div class="text">Window</div><div class="inner" style="background-color: rgb(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div> <div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: rgb(204, 204, 204)">&nbsp;</div></div>
<div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div> <div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
......
...@@ -57,7 +57,7 @@ PASS computedStyleText.fill is computedStyleDiv.color ...@@ -57,7 +57,7 @@ PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorLinkText Testing system colorLinkText
PASS computedStyleText.fill is computedStyleDiv.color PASS computedStyleText.fill is computedStyleDiv.color
FAIL computedStyleText.stroke should be rgb(0, 0, 0). Was rgb(0, 0, 238). PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorMenu Testing system colorMenu
PASS computedStyleText.fill is computedStyleDiv.color PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color PASS computedStyleText.stroke is computedStyleDiv.color
...@@ -84,7 +84,7 @@ PASS computedStyleText.fill is computedStyleDiv.color ...@@ -84,7 +84,7 @@ PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorVisitedText Testing system colorVisitedText
PASS computedStyleText.fill is computedStyleDiv.color PASS computedStyleText.fill is computedStyleDiv.color
FAIL computedStyleText.stroke should be rgb(0, 0, 0). Was rgb(85, 26, 139). PASS computedStyleText.stroke is computedStyleDiv.color
Testing system colorWindow Testing system colorWindow
PASS computedStyleText.fill is computedStyleDiv.color PASS computedStyleText.fill is computedStyleDiv.color
PASS computedStyleText.stroke is computedStyleDiv.color PASS computedStyleText.stroke is computedStyleDiv.color
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment