mirror of
https://github.com/SerenityOS/serenity.git
synced 2025-01-23 18:02:05 -05:00
LibWeb: Implement <system-color> and <deprecated-color> keywords
The spec allows for these either to be based on the OS, or to be defined by the browser. Looking at the other browser engines, there's a mix of the two options. Since we've had issues with using OS colors as defaults, let's use hard-coded colors for now. Some of these are based on the definitions in https://html.spec.whatwg.org/multipage/rendering.html
This commit is contained in:
Sam Atkins
Sam Atkins
parent
1dcd63be05
commit
848ec538c6
5 changed files with 296 additions and 0 deletions
|
|
@ -126,6 +126,7 @@ set(SOURCES
|
|||
CSS/StyleValues/UnresolvedStyleValue.cpp
|
||||
CSS/Supports.cpp
|
||||
CSS/SyntaxHighlighter/SyntaxHighlighter.cpp
|
||||
CSS/SystemColor.cpp
|
||||
CSS/Time.cpp
|
||||
CSS/VisualViewport.cpp
|
||||
Cookie/Cookie.cpp
|
||||
|
|
|
|||
|
|
@ -58,7 +58,12 @@
|
|||
"-libweb-palette-window",
|
||||
"-libweb-palette-window-text",
|
||||
"absolute",
|
||||
"accentcolor",
|
||||
"accentcolortext",
|
||||
"active",
|
||||
"activeborder",
|
||||
"activecaption",
|
||||
"activetext",
|
||||
"additive",
|
||||
"alias",
|
||||
"all",
|
||||
|
|
@ -66,8 +71,10 @@
|
|||
"alternate",
|
||||
"alternate-reverse",
|
||||
"anywhere",
|
||||
"appworkspace",
|
||||
"auto",
|
||||
"back",
|
||||
"background",
|
||||
"backwards",
|
||||
"baseline",
|
||||
"blink",
|
||||
|
|
@ -80,7 +87,15 @@
|
|||
"break-word",
|
||||
"browser",
|
||||
"button",
|
||||
"buttonborder",
|
||||
"buttonface",
|
||||
"buttonhighlight",
|
||||
"buttonshadow",
|
||||
"buttontext",
|
||||
"canvas",
|
||||
"canvastext",
|
||||
"capitalize",
|
||||
"captiontext",
|
||||
"cell",
|
||||
"center",
|
||||
"circle",
|
||||
|
|
@ -130,6 +145,8 @@
|
|||
"extra-expanded",
|
||||
"fantasy",
|
||||
"fast",
|
||||
"field",
|
||||
"fieldtext",
|
||||
"fine",
|
||||
"fill",
|
||||
"fit-content",
|
||||
|
|
@ -146,14 +163,22 @@
|
|||
"fullscreen",
|
||||
"grab",
|
||||
"grabbing",
|
||||
"graytext",
|
||||
"grid",
|
||||
"groove",
|
||||
"help",
|
||||
"hidden",
|
||||
"high",
|
||||
"high-quality",
|
||||
"highlight",
|
||||
"highlighttext",
|
||||
"hover",
|
||||
"inactiveborder",
|
||||
"inactivecaption",
|
||||
"inactivecaptiontext",
|
||||
"infinite",
|
||||
"infobackground",
|
||||
"infotext",
|
||||
"initial-only",
|
||||
"inline",
|
||||
"inline-block",
|
||||
|
|
@ -183,6 +208,7 @@
|
|||
"lighter",
|
||||
"linear",
|
||||
"line-through",
|
||||
"linktext",
|
||||
"list-item",
|
||||
"local",
|
||||
"lower-alpha",
|
||||
|
|
@ -191,8 +217,12 @@
|
|||
"lowercase",
|
||||
"ltr",
|
||||
"listbox",
|
||||
"mark",
|
||||
"marktext",
|
||||
"max-content",
|
||||
"medium",
|
||||
"menu",
|
||||
"menutext",
|
||||
"middle",
|
||||
"min-content",
|
||||
"minimal-ui",
|
||||
|
|
@ -265,7 +295,10 @@
|
|||
"sans-serif",
|
||||
"scale-down",
|
||||
"scroll",
|
||||
"scrollbar",
|
||||
"se-resize",
|
||||
"selecteditem",
|
||||
"selecteditemtext",
|
||||
"self-end",
|
||||
"self-start",
|
||||
"semi-condensed",
|
||||
|
|
@ -311,6 +344,11 @@
|
|||
"text-top",
|
||||
"thick",
|
||||
"thin",
|
||||
"threeddarkshadow",
|
||||
"threedface",
|
||||
"threedhighlight",
|
||||
"threedlightshadow",
|
||||
"threedshadow",
|
||||
"to-zero",
|
||||
"top",
|
||||
"textarea",
|
||||
|
|
@ -330,9 +368,13 @@
|
|||
"uppercase",
|
||||
"vertical-text",
|
||||
"visible",
|
||||
"visitedtext",
|
||||
"w-resize",
|
||||
"wait",
|
||||
"wavy",
|
||||
"window",
|
||||
"windowframe",
|
||||
"windowtext",
|
||||
"wrap",
|
||||
"wrap-reverse",
|
||||
"x-large",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
#include "IdentifierStyleValue.h"
|
||||
#include <LibGfx/Palette.h>
|
||||
#include <LibWeb/CSS/SystemColor.h>
|
||||
#include <LibWeb/DOM/Document.h>
|
||||
#include <LibWeb/Layout/Node.h>
|
||||
|
||||
|
|
@ -22,7 +23,32 @@ String IdentifierStyleValue::to_string() const
|
|||
bool IdentifierStyleValue::is_color(ValueID value_id)
|
||||
{
|
||||
switch (value_id) {
|
||||
case ValueID::Accentcolor:
|
||||
case ValueID::Accentcolortext:
|
||||
case ValueID::Activeborder:
|
||||
case ValueID::Activecaption:
|
||||
case ValueID::Activetext:
|
||||
case ValueID::Appworkspace:
|
||||
case ValueID::Background:
|
||||
case ValueID::Buttonborder:
|
||||
case ValueID::Buttonface:
|
||||
case ValueID::Buttonhighlight:
|
||||
case ValueID::Buttonshadow:
|
||||
case ValueID::Buttontext:
|
||||
case ValueID::Canvas:
|
||||
case ValueID::Canvastext:
|
||||
case ValueID::Captiontext:
|
||||
case ValueID::Currentcolor:
|
||||
case ValueID::Field:
|
||||
case ValueID::Fieldtext:
|
||||
case ValueID::Graytext:
|
||||
case ValueID::Highlight:
|
||||
case ValueID::Highlighttext:
|
||||
case ValueID::Inactiveborder:
|
||||
case ValueID::Inactivecaption:
|
||||
case ValueID::Inactivecaptiontext:
|
||||
case ValueID::Infobackground:
|
||||
case ValueID::Infotext:
|
||||
case ValueID::LibwebLink:
|
||||
case ValueID::LibwebPaletteActiveLink:
|
||||
case ValueID::LibwebPaletteActiveWindowBorder1:
|
||||
|
|
@ -78,6 +104,23 @@ bool IdentifierStyleValue::is_color(ValueID value_id)
|
|||
case ValueID::LibwebPaletteVisitedLink:
|
||||
case ValueID::LibwebPaletteWindow:
|
||||
case ValueID::LibwebPaletteWindowText:
|
||||
case ValueID::Linktext:
|
||||
case ValueID::Mark:
|
||||
case ValueID::Marktext:
|
||||
case ValueID::Menu:
|
||||
case ValueID::Menutext:
|
||||
case ValueID::Scrollbar:
|
||||
case ValueID::Selecteditem:
|
||||
case ValueID::Selecteditemtext:
|
||||
case ValueID::Threeddarkshadow:
|
||||
case ValueID::Threedface:
|
||||
case ValueID::Threedhighlight:
|
||||
case ValueID::Threedlightshadow:
|
||||
case ValueID::Threedshadow:
|
||||
case ValueID::Visitedtext:
|
||||
case ValueID::Window:
|
||||
case ValueID::Windowframe:
|
||||
case ValueID::Windowtext:
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
|
|
@ -97,6 +140,75 @@ Color IdentifierStyleValue::to_color(Optional<Layout::NodeWithStyle const&> node
|
|||
return node->computed_values().color();
|
||||
}
|
||||
|
||||
// First, handle <system-color>s, since they don't require a node.
|
||||
// https://www.w3.org/TR/css-color-4/#css-system-colors
|
||||
// https://www.w3.org/TR/css-color-4/#deprecated-system-colors
|
||||
switch (id()) {
|
||||
case ValueID::Accentcolor:
|
||||
return SystemColor::accent_color();
|
||||
case ValueID::Accentcolortext:
|
||||
return SystemColor::accent_color_text();
|
||||
case ValueID::Activetext:
|
||||
return SystemColor::active_text();
|
||||
case ValueID::Buttonborder:
|
||||
case ValueID::Activeborder:
|
||||
case ValueID::Inactiveborder:
|
||||
case ValueID::Threeddarkshadow:
|
||||
case ValueID::Threedhighlight:
|
||||
case ValueID::Threedlightshadow:
|
||||
case ValueID::Threedshadow:
|
||||
case ValueID::Windowframe:
|
||||
return SystemColor::button_border();
|
||||
case ValueID::Buttonface:
|
||||
case ValueID::Buttonhighlight:
|
||||
case ValueID::Buttonshadow:
|
||||
case ValueID::Threedface:
|
||||
return SystemColor::button_face();
|
||||
case ValueID::Buttontext:
|
||||
return SystemColor::button_face();
|
||||
case ValueID::Canvas:
|
||||
case ValueID::Appworkspace:
|
||||
case ValueID::Background:
|
||||
case ValueID::Inactivecaption:
|
||||
case ValueID::Infobackground:
|
||||
case ValueID::Menu:
|
||||
case ValueID::Scrollbar:
|
||||
case ValueID::Window:
|
||||
return SystemColor::canvas();
|
||||
case ValueID::Canvastext:
|
||||
case ValueID::Activecaption:
|
||||
case ValueID::Captiontext:
|
||||
case ValueID::Infotext:
|
||||
case ValueID::Menutext:
|
||||
case ValueID::Windowtext:
|
||||
return SystemColor::canvas_text();
|
||||
case ValueID::Field:
|
||||
return SystemColor::field();
|
||||
case ValueID::Fieldtext:
|
||||
return SystemColor::field_text();
|
||||
case ValueID::Graytext:
|
||||
case ValueID::Inactivecaptiontext:
|
||||
return SystemColor::gray_text();
|
||||
case ValueID::Highlight:
|
||||
return SystemColor::highlight();
|
||||
case ValueID::Highlighttext:
|
||||
return SystemColor::highlight_text();
|
||||
case ValueID::Linktext:
|
||||
return SystemColor::link_text();
|
||||
case ValueID::Mark:
|
||||
return SystemColor::mark();
|
||||
case ValueID::Marktext:
|
||||
return SystemColor::mark_text();
|
||||
case ValueID::Selecteditem:
|
||||
return SystemColor::selected_item();
|
||||
case ValueID::Selecteditemtext:
|
||||
return SystemColor::selected_item_text();
|
||||
case ValueID::Visitedtext:
|
||||
return SystemColor::visited_text();
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (!node.has_value()) {
|
||||
// FIXME: Can't resolve palette colors without layout node.
|
||||
return Color::Black;
|
||||
|
|
|
|||
106
Userland/Libraries/LibWeb/CSS/SystemColor.cpp
Normal file
106
Userland/Libraries/LibWeb/CSS/SystemColor.cpp
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
/*
|
||||
* Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include <LibWeb/CSS/SystemColor.h>
|
||||
|
||||
namespace Web::CSS::SystemColor {
|
||||
|
||||
Color accent_color()
|
||||
{
|
||||
return Color(61, 174, 233);
|
||||
}
|
||||
|
||||
Color accent_color_text()
|
||||
{
|
||||
return Color(255, 255, 255);
|
||||
}
|
||||
|
||||
Color active_text()
|
||||
{
|
||||
return Color(255, 0, 0);
|
||||
}
|
||||
|
||||
Color button_border()
|
||||
{
|
||||
return Color(128, 128, 128);
|
||||
}
|
||||
|
||||
Color button_face()
|
||||
{
|
||||
return Color(212, 208, 200);
|
||||
}
|
||||
|
||||
Color button_text()
|
||||
{
|
||||
return Color(0, 0, 0);
|
||||
}
|
||||
|
||||
Color canvas()
|
||||
{
|
||||
return Color(255, 255, 255);
|
||||
}
|
||||
|
||||
Color canvas_text()
|
||||
{
|
||||
return Color(0, 0, 0);
|
||||
}
|
||||
|
||||
Color field()
|
||||
{
|
||||
return Color(255, 255, 255);
|
||||
}
|
||||
|
||||
Color field_text()
|
||||
{
|
||||
return Color(0, 0, 0);
|
||||
}
|
||||
|
||||
Color gray_text()
|
||||
{
|
||||
return Color(128, 128, 128);
|
||||
}
|
||||
|
||||
Color highlight()
|
||||
{
|
||||
return Color(61, 174, 233);
|
||||
}
|
||||
|
||||
Color highlight_text()
|
||||
{
|
||||
return Color(255, 255, 255);
|
||||
}
|
||||
|
||||
Color link_text()
|
||||
{
|
||||
return Color(0, 0, 238);
|
||||
}
|
||||
|
||||
Color mark()
|
||||
{
|
||||
return Color(255, 255, 0);
|
||||
}
|
||||
|
||||
Color mark_text()
|
||||
{
|
||||
return Color(0, 0, 0);
|
||||
}
|
||||
|
||||
Color selected_item()
|
||||
{
|
||||
return Color(61, 174, 233);
|
||||
}
|
||||
|
||||
Color selected_item_text()
|
||||
{
|
||||
return Color(255, 255, 255);
|
||||
}
|
||||
|
||||
Color visited_text()
|
||||
{
|
||||
return Color(85, 26, 139);
|
||||
}
|
||||
|
||||
}
|
||||
35
Userland/Libraries/LibWeb/CSS/SystemColor.h
Normal file
35
Userland/Libraries/LibWeb/CSS/SystemColor.h
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
* Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <LibGfx/Color.h>
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#css-system-colors
|
||||
namespace Web::CSS::SystemColor {
|
||||
|
||||
// FIXME: Provide colors for `color-scheme: dark` once we support that.
|
||||
Color accent_color();
|
||||
Color accent_color_text();
|
||||
Color active_text();
|
||||
Color button_border();
|
||||
Color button_face();
|
||||
Color button_text();
|
||||
Color canvas();
|
||||
Color canvas_text();
|
||||
Color field();
|
||||
Color field_text();
|
||||
Color gray_text();
|
||||
Color highlight();
|
||||
Color highlight_text();
|
||||
Color link_text();
|
||||
Color mark();
|
||||
Color mark_text();
|
||||
Color selected_item();
|
||||
Color selected_item_text();
|
||||
Color visited_text();
|
||||
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue