LibHTML: Respect the CSS "color" property for text

Also remove the color values from the ComputedStyle object and get them
via StyleProperties instead.

At the moment, we only handle colors that Color::from_string() parses.

7 files changed, 56 insertions, 10 deletions

diff --git a/Libraries/LibHTML/CSS/StyleProperties.cpp b/Libraries/LibHTML/CSS/StyleProperties.cpp
index 8bf9108911..7fa1ba5714 100644
--- a/Libraries/LibHTML/CSS/StyleProperties.cpp
+++ b/Libraries/LibHTML/CSS/StyleProperties.cpp
@@ -28,3 +28,13 @@ String StyleProperties::string_or_fallback(const StringView& property_name, cons
         return fallback;
     return value.value()->to_string();
 }
+
+Color StyleProperties::color_or_fallback(const StringView& property_name, Color fallback) const
+{
+    auto value = property(property_name);
+    if (!value.has_value())
+        return fallback;
+    if (value.value()->type() != StyleValue::Type::Color)
+        return fallback;
+    return static_cast<ColorStyleValue&>(*value.value()).color();
+}
diff --git a/Libraries/LibHTML/CSS/StyleProperties.h b/Libraries/LibHTML/CSS/StyleProperties.h
index 4deca177b1..0493d29d4d 100644
--- a/Libraries/LibHTML/CSS/StyleProperties.h
+++ b/Libraries/LibHTML/CSS/StyleProperties.h
@@ -4,6 +4,8 @@
 #include <AK/NonnullRefPtr.h>
 #include <LibHTML/CSS/StyleValue.h>
 
+class Color;
+
 class StyleProperties {
 public:
     template<typename Callback>
@@ -18,6 +20,7 @@ public:
 
     Length length_or_fallback(const StringView& property_name, const Length& fallback) const;
     String string_or_fallback(const StringView& property_name, const StringView& fallback) const;
+    Color color_or_fallback(const StringView& property_name, Color fallback) const;
 
 private:
     HashMap<String, NonnullRefPtr<StyleValue>> m_property_values;
diff --git a/Libraries/LibHTML/CSS/StyleResolver.cpp b/Libraries/LibHTML/CSS/StyleResolver.cpp
index 97c552ed8b..6730724ba2 100644
--- a/Libraries/LibHTML/CSS/StyleResolver.cpp
+++ b/Libraries/LibHTML/CSS/StyleResolver.cpp
@@ -63,7 +63,7 @@ StyleProperties StyleResolver::resolve_style(const Element& element, const Style
     if (parent_properties) {
         parent_properties->for_each_property([&](const StringView& name, auto& value) {
             // TODO: proper inheritance
-            if (name.starts_with("font") || name == "white-space")
+            if (name.starts_with("font") || name == "white-space" || name == "color")
                 style_properties.set_property(name, value);
         });
     }
diff --git a/Libraries/LibHTML/CSS/StyleValue.h b/Libraries/LibHTML/CSS/StyleValue.h
index 516dc71f08..02dd2a1cc0 100644
--- a/Libraries/LibHTML/CSS/StyleValue.h
+++ b/Libraries/LibHTML/CSS/StyleValue.h
@@ -1,9 +1,10 @@
 #pragma once
 
-#include <AK/String.h>
 #include <AK/RefCounted.h>
 #include <AK/RefPtr.h>
+#include <AK/String.h>
 #include <AK/StringView.h>
+#include <LibDraw/Color.h>
 #include <LibHTML/CSS/Length.h>
 
 class StyleValue : public RefCounted<StyleValue> {
@@ -16,6 +17,7 @@ public:
         Initial,
         String,
         Length,
+        Color,
     };
 
     Type type() const { return m_type; }
@@ -107,3 +109,24 @@ private:
     {
     }
 };
+
+class ColorStyleValue : public StyleValue {
+public:
+    static NonnullRefPtr<ColorStyleValue> create(Color color)
+    {
+        return adopt(*new ColorStyleValue(color));
+    }
+    virtual ~ColorStyleValue() override {}
+
+    Color color() const { return m_color; }
+    String to_string() const override { return String::format("COLOR: %s", m_color.to_string().characters()); }
+
+private:
+    explicit ColorStyleValue(Color color)
+        : StyleValue(Type::Color)
+        , m_color(color)
+    {
+    }
+
+    Color m_color;
+};
diff --git a/Libraries/LibHTML/Layout/ComputedStyle.h b/Libraries/LibHTML/Layout/ComputedStyle.h
index 2fba7f6275..cbb0f5383a 100644
--- a/Libraries/LibHTML/Layout/ComputedStyle.h
+++ b/Libraries/LibHTML/Layout/ComputedStyle.h
@@ -1,6 +1,5 @@
 #pragma once
 
-#include <LibDraw/Color.h>
 #include <LibDraw/Size.h>
 #include <LibHTML/CSS/LengthBox.h>
 
@@ -14,9 +13,6 @@ public:
     ComputedStyle();
     ~ComputedStyle();
 
-    Color text_color() const { return m_text_color; }
-    Color background_color() const { return m_background_color; }
-
     LengthBox& margin() { return m_margin; }
     LengthBox& padding() { return m_padding; }
     LengthBox& border() { return m_border; }
@@ -40,9 +36,6 @@ public:
     PixelBox full_margin() const;
 
 private:
-    Color m_text_color;
-    Color m_background_color;
-
     LengthBox m_margin;
     LengthBox m_padding;
     LengthBox m_border;
diff --git a/Libraries/LibHTML/Layout/LayoutText.cpp b/Libraries/LibHTML/Layout/LayoutText.cpp
index f0d4b5ff5f..fc22c62695 100644
--- a/Libraries/LibHTML/Layout/LayoutText.cpp
+++ b/Libraries/LibHTML/Layout/LayoutText.cpp
@@ -227,6 +227,8 @@ void LayoutText::render(RenderingContext& context)
     auto& painter = context.painter();
     painter.set_font(*m_font);
 
+    auto color = style_properties().color_or_fallback("color", Color::Black);
+
     for (auto& run : m_runs) {
         Rect rect {
             run.pos.x(),
@@ -234,6 +236,6 @@ void LayoutText::render(RenderingContext& context)
             m_font->width(run.text),
             m_font->glyph_height()
         };
-        painter.draw_text(rect, run.text);
+        painter.draw_text(rect, run.text, TextAlignment::TopLeft, color);
     }
 }
diff --git a/Libraries/LibHTML/Parser/CSSParser.cpp b/Libraries/LibHTML/Parser/CSSParser.cpp
index 408751f509..518ac990cf 100644
--- a/Libraries/LibHTML/Parser/CSSParser.cpp
+++ b/Libraries/LibHTML/Parser/CSSParser.cpp
@@ -3,6 +3,16 @@
 #include <ctype.h>
 #include <stdio.h>
 
+static Optional<Color> parse_css_color(const StringView& view)
+{
+    auto color = Color::from_string(view);
+    if (color.has_value())
+        return color;
+
+    // FIXME: Parse all valid color strings :^)
+    return {};
+}
+
 NonnullRefPtr<StyleValue> parse_css_value(const StringView& view)
 {
     String string(view);
@@ -19,6 +29,11 @@ NonnullRefPtr<StyleValue> parse_css_value(const StringView& view)
         return InitialStyleValue::create();
     if (string == "auto")
         return LengthStyleValue::create(Length());
+
+    auto color = parse_css_color(view);
+    if (color.has_value())
+        return ColorStyleValue::create(color.value());
+
     return StringStyleValue::create(string);
 }