Skip to content

GitLab

T
tangled
Commit 22eb2d02 authored by Alison Maher's avatar Alison Maher Committed by Commit Bot
Browse files
Options

Expose Windows system color keywords 

This change exposes the previously-deprecated CSS system color keywords
on Windows that are used for high contrast style overrides. This will
give users the ability to customize their sites with the relevant
system colors for high contrast.

Bug: 970285
Change-Id: I73f746d24f57b494a2f39e7a175715a98bdd4dc6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1689961Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarKevin Babbitt <kbabbitt@microsoft.com>
Commit-Queue: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#682323}
parent befe9cd5
Hide whitespace changes
Inline Side-by-side
Showing with 386 additions and 0 deletions
third_party/blink/renderer/core/layout/layout_theme_win.cc
View file @ 22eb2d02
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
#include "third_party/blink/renderer/core/layout/layout_theme_win.h" #include "third_party/blink/renderer/core/layout/layout_theme_win.h"
#include <windows.h>
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
namespace blink { namespace blink {
scoped_refptr<LayoutTheme> LayoutThemeWin::Create() { scoped_refptr<LayoutTheme> LayoutThemeWin::Create() {
...@@ -15,4 +19,46 @@ LayoutTheme& LayoutTheme::NativeTheme() { ...@@ -15,4 +19,46 @@ LayoutTheme& LayoutTheme::NativeTheme() {
return *layout_theme; return *layout_theme;
} }
Color LayoutThemeWin::SystemColor(CSSValueID css_value_id) const {
if (!RuntimeEnabledFeatures::UseWindowsSystemColorsEnabled()) {
return LayoutThemeDefault::SystemColor(css_value_id);
}
int system_index;
switch (css_value_id) {
case CSSValueID::kButtonface:
system_index = COLOR_BTNFACE;
break;
case CSSValueID::kButtontext:
system_index = COLOR_BTNTEXT;
break;
case CSSValueID::kGraytext:
system_index = COLOR_GRAYTEXT;
break;
case CSSValueID::kHighlight:
system_index = COLOR_HIGHLIGHT;
break;
case CSSValueID::kHighlighttext:
system_index = COLOR_HIGHLIGHTTEXT;
break;
case CSSValueID::kWindow:
system_index = COLOR_WINDOW;
break;
case CSSValueID::kWindowtext:
system_index = COLOR_WINDOWTEXT;
break;
default:
return LayoutThemeDefault::SystemColor(css_value_id);
}
return SystemColorBySystemIndex(system_index);
}
Color LayoutThemeWin::SystemColorBySystemIndex(int system_index) {
DWORD system_color = ::GetSysColor(system_index);
return Color(GetRValue(system_color), GetGValue(system_color),
GetBValue(system_color));
}
} // namespace blink } // namespace blink
third_party/blink/renderer/core/layout/layout_theme_win.h
View file @ 22eb2d02
...@@ -12,6 +12,11 @@ namespace blink { ...@@ -12,6 +12,11 @@ namespace blink {
class LayoutThemeWin final : public LayoutThemeDefault { class LayoutThemeWin final : public LayoutThemeDefault {
public: public:
static scoped_refptr<LayoutTheme> Create(); static scoped_refptr<LayoutTheme> Create();
Color SystemColor(CSSValueID css_value_id) const override;
private:
static Color SystemColorBySystemIndex(int system_index);
}; };
} // namespace blink } // namespace blink
......
third_party/blink/renderer/platform/runtime_enabled_features.json5
View file @ 22eb2d02
...@@ -1618,6 +1618,9 @@ ...@@ -1618,6 +1618,9 @@
name: "UserAgentClientHint", name: "UserAgentClientHint",
status: "experimental" status: "experimental"
}, },
{
name: "UseWindowsSystemColors",
},
{ {
name: "V8IdleTasks", name: "V8IdleTasks",
}, },
......
third_party/blink/web_tests/fast/css/css2-system-color.html 0 → 100644
View file @ 22eb2d02
<!DOCTYPE html>
<html>
<meta name="assert" content="System color keywords work as expected.">
<link rel="match" href="css2-system-color-expected.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: ActiveBorder">&nbsp;</div></div>
<div class="box"><div class="text">ActiveCaption</div><div class="inner" style="background-color: ActiveCaption">&nbsp;</div></div>
<div class="box"><div class="text">AppWorkspace</div><div class="inner" style="background-color: AppWorkspace">&nbsp;</div></div>
<div class="box"><div class="text">Background</div><div class="inner" style="background-color: Background">&nbsp;</div></div>
<div class="box"><div class="text">ButtonFace</div><div class="inner" style="background-color: ButtonFace">&nbsp;</div></div>
<div class="box"><div class="text">ButtonHighlight</div><div class="inner" style="background-color: ButtonHighlight">&nbsp;</div></div>
<div class="box"><div class="text">ButtonShadow</div><div class="inner" style="background-color: ButtonShadow">&nbsp;</div></div>
<div class="box"><div class="text">ButtonText</div><div class="inner" style="background-color: ButtonText">&nbsp;</div></div>
<div class="box"><div class="text">CaptionText</div><div class="inner" style="background-color: CaptionText">&nbsp;</div></div>
<div class="box"><div class="text">GrayText</div><div class="inner" style="background-color: GrayText">&nbsp;</div></div>
<div class="box"><div class="text">Highlight</div><div class="inner" style="background-color: Highlight">&nbsp;</div></div>
<div class="box"><div class="text">HighlightText</div><div class="inner" style="background-color: HighlightText">&nbsp;</div></div>
<div class="box"><div class="text">InactiveBorder</div><div class="inner" style="background-color: InactiveBorder">&nbsp;</div></div>
<div class="box"><div class="text">InactiveCaption</div><div class="inner" style="background-color: InactiveCaption">&nbsp;</div></div>
<div class="box"><div class="text">InactiveCaptionText</div><div class="inner" style="background-color: InactiveCaptionText">&nbsp;</div></div>
<div class="box"><div class="text">InfoBackground</div><div class="inner" style="background-color: InfoBackground">&nbsp;</div></div>
<div class="box"><div class="text">InfoText</div><div class="inner" style="background-color: InfoText">&nbsp;</div></div>
<div class="box"><div class="text">Menu</div><div class="inner" style="background-color: Menu">&nbsp;</div></div>
<div class="box"><div class="text">MenuText</div><div class="inner" style="background-color: MenuText">&nbsp;</div></div>
<div class="box"><div class="text">Scrollbar</div><div class="inner" style="background-color: Scrollbar">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDDarkShadow</div><div class="inner" style="background-color: ThreeDDarkShadow">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDFace</div><div class="inner" style="background-color: ThreeDFace">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDHighlight</div><div class="inner" style="background-color: ThreeDHighlight">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDLightShadow</div><div class="inner" style="background-color: ThreeDLightShadow">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDShadow</div><div class="inner" style="background-color: ThreeDShadow">&nbsp;</div></div>
<div class="box"><div class="text">Window</div><div class="inner" style="background-color: Window">&nbsp;</div></div>
<div class="box"><div class="text">WindowFrame</div><div class="inner" style="background-color: WindowFrame">&nbsp;</div></div>
<div class="box"><div class="text">WindowText</div><div class="inner" style="background-color: WindowText">&nbsp;</div></div>
</body>
</html>
third_party/blink/web_tests/fast/css/css2-system-color.html-disabled → third_party/blink/web_tests/flag-specific/enable-blink-features=UseWindowsSystemColors/fast/css/css2-system-color-expected.html
View file @ 22eb2d02
<html><head><title>Color Test</title> <!DOCTYPE html>
<html>
<head>
<title>Color Test</title>
<style> <style>
html { text-align: center; font-size: 10px; font-family: verdana; } html {
.content { font-size: 12px;
border: 1px solid black; width: 750px;
margin: 0 auto; }
text-align: left; .box:after {
width: 750px; content: " ";
padding: 2px 2px 1px 2px; clear: both;
} display: block;
.box { width: 100%; margin-bottom: 1px; } }
.box:after { .inner {
content: " "; border-top: solid 1px;
display: block; float: right;
visibility: hidden; width: 620px;
clear: both; }
height: 0.1px; .text {
font-size: 0.1em; float: left;
line-height: 0; }
}
* html .box { display: inline-block; }
* html .box { height: 1%; }
.box { display: block; }
.inner { width: 620px; float: right; }
.text { float: left; }
</style> </style>
</head><body> </head>
<body>
<div class="content"> <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">ActiveBorder</div><div class="inner" style="background-color: ActiveBorder">&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">ActiveCaption</div><div class="inner" style="background-color: ActiveCaption">&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">AppWorkspace</div><div class="inner" style="background-color: AppWorkspace">&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">Background</div><div class="inner" style="background-color: Background">&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">ButtonFace</div><div class="inner" style="background-color: ButtonFace">&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">ButtonHighlight</div><div class="inner" style="background-color: ButtonHighlight">&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">ButtonShadow</div><div class="inner" style="background-color: ButtonShadow">&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">ButtonText</div><div class="inner" style="background-color: ButtonText">&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">CaptionText</div><div class="inner" style="background-color: CaptionText">&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">GrayText</div><div class="inner" style="background-color: GrayText">&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">Highlight</div><div class="inner" style="background-color: Highlight">&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">HighlightText</div><div class="inner" style="background-color: HighlightText">&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">InactiveBorder</div><div class="inner" style="background-color: InactiveBorder">&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">InactiveCaption</div><div class="inner" style="background-color: InactiveCaption">&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">InactiveCaptionText</div><div class="inner" style="background-color: InactiveCaptionText">&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: InfoBackground">&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: InfoText">&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: Menu">&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: MenuText">&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: Scrollbar">&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">ThreeDDarkShadow</div><div class="inner" style="background-color: ThreeDDarkShadow">&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">ThreeDFace</div><div class="inner" style="background-color: ThreeDFace">&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">ThreeDHighlight</div><div class="inner" style="background-color: ThreeDHighlight">&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: ThreeDLightShadow">&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: ThreeDShadow">&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: Window">&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: WindowFrame">&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: WindowText">&nbsp;</div></div> </body>
</div> </html>
</body></html>
\ No newline at end of file
third_party/blink/web_tests/platform/linux/fast/css/css2-system-color-expected.html 0 → 100644
View file @ 22eb2d02
<!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(192, 192, 192)">&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(128, 128, 128)">&nbsp;</div></div>
<div class="box"><div class="text">Highlight</div><div class="inner" style="background-color: rgb(181, 213, 255)">&nbsp;</div></div>
<div class="box"><div class="text">HighlightText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&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">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">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>
third_party/blink/web_tests/platform/mac/fast/css/css2-system-color-expected.html 0 → 100644
View file @ 22eb2d02
<!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(59, 153, 252)">&nbsp;</div></div>
<div class="box"><div class="text">ActiveCaption</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
<div class="box"><div class="text">AppWorkspace</div><div class="inner" style="background-color: rgb(170, 170, 170)">&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(255, 255, 255)">&nbsp;</div></div>
<div class="box"><div class="text">ButtonHighlight</div><div class="inner" style="background-color: rgb(233, 233, 233)">&nbsp;</div></div>
<div class="box"><div class="text">ButtonShadow</div><div class="inner" style="background-color: rgba(159, 160, 159)">&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(127, 127, 127)">&nbsp;</div></div>
<div class="box"><div class="text">Highlight</div><div class="inner" style="background-color: rgb(181, 213, 255)">&nbsp;</div></div>
<div class="box"><div class="text">HighlightText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&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(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">InfoText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&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">Scrollbar</div><div class="inner" style="background-color: rgb(170, 170, 170)">&nbsp;</div></div>
<div class="box"><div class="text">ThreeDDarkShadow</div><div class="inner" style="background-color: rgb(0, 0, 0)">&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(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">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">WindowText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&nbsp;</div></div>
</body>
</html>
third_party/blink/web_tests/platform/win/fast/css/css2-system-color-expected.html 0 → 100644
View file @ 22eb2d02
<!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(192, 192, 192)">&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(128, 128, 128)">&nbsp;</div></div>
<div class="box"><div class="text">Highlight</div><div class="inner" style="background-color: rgb(181, 213, 255)">&nbsp;</div></div>
<div class="box"><div class="text">HighlightText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&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">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">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>
third_party/blink/web_tests/platform/win7/fast/css/css2-system-color-expected.html 0 → 100644
View file @ 22eb2d02
<!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(192, 192, 192)">&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(128, 128, 128)">&nbsp;</div></div>
<div class="box"><div class="text">Highlight</div><div class="inner" style="background-color: rgb(181, 213, 255)">&nbsp;</div></div>
<div class="box"><div class="text">HighlightText</div><div class="inner" style="background-color: rgb(0, 0, 0)">&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">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">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>
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