LibWeb: Add ComputedCSSSstyleDeclaration and support 2 properties :^)

getComputedStyle(element) now returns a ComputedCSSStyleDeclaration
object, which is a live view of the computed style of a given element.

This works by ComputedCSSStyleDeclaration being a wrapper around an
element pointer. When you ask it for a CSS property, it gets the latest
computed style values from the element and returns them as a
CSS::StyleProperty object.

This first cut adds support for computed 'color' and 'display'.

In case the element doesn't have a corresponding node in the layout
tree, we fall back to using specified style instead. This is achieved by
performing an on-the-fly style resolution for the individual element and
then grabbing the requested property from that resolved style.

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -17,6 +17,7 @@ set(SOURCES
     CSS/CSSStyleDeclaration.cpp
     CSS/CSSStyleRule.cpp
     CSS/CSSStyleSheet.cpp
+    CSS/ComputedCSSStyleDeclaration.cpp
     CSS/DefaultStyleSheetSource.cpp
     CSS/Length.cpp
     CSS/MediaQueryList.cpp

Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.cpp

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/CSS/ComputedCSSStyleDeclaration.h>
+#include <LibWeb/CSS/StyleResolver.h>
+#include <LibWeb/DOM/Document.h>
+#include <LibWeb/DOM/Element.h>
+
+namespace Web::CSS {
+
+ComputedCSSStyleDeclaration::ComputedCSSStyleDeclaration(DOM::Element& element)
+    : m_element(element)
+{
+}
+
+ComputedCSSStyleDeclaration::~ComputedCSSStyleDeclaration()
+{
+}
+
+size_t ComputedCSSStyleDeclaration::length() const
+{
+    return 0;
+}
+
+String ComputedCSSStyleDeclaration::item(size_t index) const
+{
+    (void)index;
+    return {};
+}
+
+static CSS::ValueID to_css_value_id(CSS::Display value)
+{
+    switch (value) {
+    case CSS::Display::None:
+        return CSS::ValueID::None;
+    case CSS::Display::Block:
+        return CSS::ValueID::Block;
+    case CSS::Display::Inline:
+        return CSS::ValueID::Inline;
+    case CSS::Display::InlineBlock:
+        return CSS::ValueID::InlineBlock;
+    case CSS::Display::ListItem:
+        return CSS::ValueID::ListItem;
+    case CSS::Display::Table:
+        return CSS::ValueID::Table;
+    case CSS::Display::TableRow:
+        return CSS::ValueID::TableRow;
+    case CSS::Display::TableCell:
+        return CSS::ValueID::TableCell;
+    case CSS::Display::TableHeaderGroup:
+        return CSS::ValueID::TableHeaderGroup;
+    case CSS::Display::TableRowGroup:
+        return CSS::ValueID::TableRowGroup;
+    case CSS::Display::TableFooterGroup:
+        return CSS::ValueID::TableFooterGroup;
+    case CSS::Display::TableColumn:
+        return CSS::ValueID::TableColumn;
+    case CSS::Display::TableColumnGroup:
+        return CSS::ValueID::TableColumnGroup;
+    case CSS::Display::TableCaption:
+        return CSS::ValueID::TableCaption;
+    case CSS::Display::Flex:
+        return CSS::ValueID::Flex;
+    }
+    VERIFY_NOT_REACHED();
+}
+
+Optional<StyleProperty> ComputedCSSStyleDeclaration::property(PropertyID property_id) const
+{
+    const_cast<DOM::Document&>(m_element->document()).force_layout();
+
+    if (!m_element->layout_node()) {
+        auto style = m_element->document().style_resolver().resolve_style(const_cast<DOM::Element&>(*m_element));
+        if (auto maybe_property = style->property(property_id); maybe_property.has_value()) {
+            return StyleProperty {
+                .property_id = property_id,
+                .value = maybe_property.release_value(),
+            };
+        }
+        return {};
+    }
+
+    auto& layout_node = *m_element->layout_node();
+
+    switch (property_id) {
+    case CSS::PropertyID::Color:
+        return StyleProperty {
+            .property_id = property_id,
+            .value = ColorStyleValue::create(layout_node.computed_values().color()),
+        };
+    case CSS::PropertyID::Display: {
+        return StyleProperty {
+            .property_id = property_id,
+            .value = IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().display())),
+        };
+    }
+    default:
+        return {};
+    }
+}
+
+bool ComputedCSSStyleDeclaration::set_property(PropertyID, StringView)
+{
+    return false;
+}
+
+}

Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.h

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/CSSStyleDeclaration.h>
+
+namespace Web::CSS {
+
+class ComputedCSSStyleDeclaration final : public CSSStyleDeclaration {
+public:
+    static NonnullRefPtr<ComputedCSSStyleDeclaration> create(DOM::Element& element)
+    {
+        return adopt_ref(*new ComputedCSSStyleDeclaration(element));
+    }
+
+    virtual ~ComputedCSSStyleDeclaration() override;
+
+    virtual size_t length() const override;
+    virtual String item(size_t index) const override;
+    virtual Optional<StyleProperty> property(PropertyID) const override;
+    virtual bool set_property(PropertyID, StringView css_text) override;
+
+private:
+    explicit ComputedCSSStyleDeclaration(DOM::Element&);
+
+    NonnullRefPtr<DOM::Element> m_element;
+};
+
+}

Userland/Libraries/LibWeb/DOM/Window.cpp

@@ -6,6 +6,7 @@
 
 #include <LibGUI/DisplayLink.h>
 #include <LibJS/Runtime/FunctionObject.h>
+#include <LibWeb/CSS/ComputedCSSStyleDeclaration.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Event.h>
 #include <LibWeb/DOM/EventDispatcher.h>
@@ -189,10 +190,7 @@ Page const* Window::page() const
 
 NonnullRefPtr<CSS::CSSStyleDeclaration> Window::get_computed_style(DOM::Element& element) const
 {
-    dbgln("Generating CSS computed style for {} @ {:p}", element.node_name(), &element);
-    Vector<CSS::StyleProperty> properties;
-    HashMap<String, CSS::StyleProperty> custom_properties;
-    return CSS::PropertyOwningCSSStyleDeclaration::create(move(properties), move(custom_properties));
+    return CSS::ComputedCSSStyleDeclaration::create(element);
 }
 
 NonnullRefPtr<CSS::MediaQueryList> Window::match_media(String media)