Skip to content
Permalink
Browse files
Update named colors list to match CSS Color 4
https://bugs.webkit.org/show_bug.cgi?id=245533
<rdar://100287586>

Reviewed by Darin Adler.

Added new system colors from CSS Color 4 with the following default
platform agnostic values:

  ButtonBorder
    white (matching existing ActiveBorder and InactiveBorder values).
  SelectedItem
    lightGray (matching existing Menu value)
  SelectedItemText
    black (matching existing *Text values)
  Mark
    yellow (matching background-color of <mark> in UA stylesheet)
  MarkText
    black (matching color of <mark> in UA stylesheet)
  AccentColor
    sRGB { 0, 122, 255 } (matching color of system-control-accent)
  AccentColorText
    black (matching existing *Text values)

As with other system colors, it may make sense to specialize
these per-platform, but this change does not aim to do that.

Also re-organized CSSValueKeywords.in to group some related
color names together, and added comments to help clarify what
set things belong to.

As a way of organizing, and in preparation for an upcoming
change to deprecated system colors, the deprecated system
colors were grouped together and a helper function added.

As we now have a named colors Mark and MarkText, the UA stylesheet
for <mark> was updated to use the named colors (no observable
change in behavior though, as the colors still resolve to yellow
and black).

* Source/WebCore/css/CSSValueKeywords.in:
* Source/WebCore/css/StyleColor.cpp:
(WebCore::isVGAPaletteColor):
(WebCore::StyleColor::isAbsoluteColorKeyword):
(WebCore::StyleColor::isSystemColorKeyword):
(WebCore::StyleColor::isDeprecatedSystemColorKeyword):
* Source/WebCore/css/StyleColor.h:
* Source/WebCore/css/html.css:
* Source/WebCore/rendering/RenderTheme.cpp:
(WebCore::RenderTheme::systemColor const):

Canonical link: https://commits.webkit.org/254840@main
  • Loading branch information
weinig authored and Sam Weinig committed Sep 25, 2022
1 parent 0154fee commit 09df074a4a8861c5fa7ba160368f6fb1ea1890b0
Show file tree
Hide file tree
Showing 6 changed files with 249 additions and 59 deletions.
@@ -1,6 +1,6 @@

PASS e.style['color'] = "ActiveText" should set the property value
FAIL e.style['color'] = "ButtonBorder" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['color'] = "ButtonBorder" should set the property value
PASS e.style['color'] = "ButtonFace" should set the property value
PASS e.style['color'] = "ButtonText" should set the property value
PASS e.style['color'] = "Canvas" should set the property value
@@ -11,11 +11,11 @@ PASS e.style['color'] = "GrayText" should set the property value
PASS e.style['color'] = "Highlight" should set the property value
PASS e.style['color'] = "HighlightText" should set the property value
PASS e.style['color'] = "LinkText" should set the property value
FAIL e.style['color'] = "Mark" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['color'] = "MarkText" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['color'] = "Mark" should set the property value
PASS e.style['color'] = "MarkText" should set the property value
PASS e.style['color'] = "VisitedText" should set the property value
FAIL e.style['color'] = "SelectedItem" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['color'] = "SelectedItemText" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['color'] = "AccentColor" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['color'] = "AccentColorText" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['color'] = "SelectedItem" should set the property value
PASS e.style['color'] = "SelectedItemText" should set the property value
PASS e.style['color'] = "AccentColor" should set the property value
PASS e.style['color'] = "AccentColorText" should set the property value

@@ -174,7 +174,18 @@ system-ui
//
// CSS_PROP_*_COLOR
//

// https://drafts.csswg.org/css-color-4/#currentcolor-color
currentcolor

// https://drafts.csswg.org/css-color-4/#transparent-color
transparent

// Non-standard
alpha

// https://drafts.csswg.org/css-color-4/#named-colors
// "16 of CSS’s named colors come from the VGA palette originally, and were then adopted into HTML"
aqua
black
blue
@@ -192,45 +203,55 @@ silver
teal
white
yellow
transparent
-webkit-link
-webkit-activelink
grey

// https://drafts.csswg.org/css-color-4/#deprecated-system-colors
activeborder
activecaption
activetext
appworkspace
background
buttonface
buttonhighlight
buttonshadow
buttontext
activebuttontext
canvas
canvastext
captiontext
field
fieldtext
graytext
highlight
highlighttext
inactiveborder
inactivecaption
inactivecaptiontext
infobackground
infotext
linktext
luminance
// menu
menutext
scrollbar
threeddarkshadow
threedface
threedhighlight
threedlightshadow
threedshadow
visitedtext
window
windowframe
windowtext

// https://drafts.csswg.org/css-color-4/#typedef-system-color
canvas
canvastext
linktext
visitedtext
activetext
buttonface
buttontext
buttonborder
field
fieldtext
highlight
highlighttext
selecteditem
selecteditemtext
mark
marktext
graytext
accentcolor
accentcolortext

// Non-standard system colors
#if (defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC) || (defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
-apple-system-header-text
-apple-system-text-background
@@ -286,12 +307,12 @@ windowtext
#if (defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC) || (defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) || (defined(HAVE_OS_DARK_MODE_SUPPORT) && HAVE_OS_DARK_MODE_SUPPORT)
-webkit-control-background
#endif
activebuttontext
-webkit-activelink
-webkit-link
-webkit-focus-ring-color
currentcolor
//
// colors in non strict mode
grey
-webkit-text

//
// CSS_PROP_BACKGROUND_REPEAT:
//
@@ -1572,7 +1593,7 @@ compact

// mask-type, mask-mode
// alpha
// luminance
luminance
match-source

// rotate
@@ -52,7 +52,7 @@ static bool isVGAPaletteColor(CSSValueID id)
{
// https://drafts.csswg.org/css-color-4/#named-colors
// "16 of CSS’s named colors come from the VGA palette originally, and were then adopted into HTML"
return (id >= CSSValueAqua && id <= CSSValueYellow) || id == CSSValueGrey;
return (id >= CSSValueAqua && id <= CSSValueGrey);
}

static bool isNonVGANamedColor(CSSValueID id)
@@ -70,8 +70,13 @@ bool StyleColor::isAbsoluteColorKeyword(CSSValueID id)
bool StyleColor::isSystemColorKeyword(CSSValueID id)
{
// https://drafts.csswg.org/css-color-4/#css-system-colors
return (id >= CSSValueCanvas && id <= CSSValueWebkitText) || id == CSSValueText || isDeprecatedSystemColorKeyword(id);
}

bool StyleColor::isDeprecatedSystemColorKeyword(CSSValueID id)
{
// https://drafts.csswg.org/css-color-4/#deprecated-system-colors
return (id >= CSSValueWebkitLink && id <= CSSValueWebkitFocusRingColor) || id == CSSValueWebkitText || id == CSSValueMenu || id == CSSValueText;
return (id >= CSSValueActiveborder && id <= CSSValueWindowtext) || id == CSSValueMenu;
}

bool StyleColor::isColorKeyword(CSSValueID id, OptionSet<CSSColorType> allowedColorTypes)
@@ -53,6 +53,7 @@ struct StyleColor {
static bool isCurrentColor(const CSSPrimitiveValue& value) { return isCurrentColorKeyword(value.valueID()); }

WEBCORE_EXPORT static bool isSystemColorKeyword(CSSValueID);
static bool isDeprecatedSystemColorKeyword(CSSValueID);

enum class CSSColorType : uint8_t {
Absolute = 1 << 0,
@@ -1236,8 +1236,8 @@ pre, xmp, plaintext, listing {
}

mark {
background-color: yellow;
color: black;
background-color: Mark;
color: MarkText;
}

big {

0 comments on commit 09df074

Please sign in to comment.