LibWeb: Plumb style/computed values for `backdrop-filter`

Userland/Libraries/LibWeb/CSS/BackdropFilter.h

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2022, MacDue <macdue@dueutil.tech>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <AK/Variant.h>
+#include <LibWeb/CSS/StyleValue.h>
+
+namespace Web::CSS {
+
+class BackdropFilter {
+public:
+    BackdropFilter() = default;
+    BackdropFilter(FilterValueListStyleValue const& filter_value_list)
+        : m_filter_value_list { filter_value_list } {};
+
+    static inline BackdropFilter make_none()
+    {
+        return BackdropFilter {};
+    }
+
+    bool has_filters() const { return m_filter_value_list; }
+    bool is_none() const { return !has_filters(); }
+
+    Span<FilterFunction const> filters() const
+    {
+        VERIFY(has_filters());
+        return m_filter_value_list->filter_value_list().span();
+    }
+
+private:
+    RefPtr<FilterValueListStyleValue const> m_filter_value_list { nullptr };
+};
+
+}

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -7,6 +7,7 @@
 #pragma once
 
 #include <AK/Optional.h>
+#include <LibWeb/CSS/BackdropFilter.h>
 #include <LibWeb/CSS/Clip.h>
 #include <LibWeb/CSS/LengthBox.h>
 #include <LibWeb/CSS/StyleValue.h>
@@ -32,6 +33,7 @@ public:
     static CSS::TextTransform text_transform() { return CSS::TextTransform::None; }
     static CSS::Display display() { return CSS::Display { CSS::Display::Outside::Inline, CSS::Display::Inside::Flow }; }
     static Color color() { return Color::Black; }
+    static CSS::BackdropFilter backdrop_filter() { return BackdropFilter::make_none(); }
     static Color background_color() { return Color::Transparent; }
     static CSS::ListStyleType list_style_type() { return CSS::ListStyleType::Disc; }
     static CSS::Visibility visibility() { return CSS::Visibility::Visible; }
@@ -167,6 +169,7 @@ public:
     CSS::Visibility visibility() const { return m_inherited.visibility; }
     CSS::ImageRendering image_rendering() const { return m_inherited.image_rendering; }
     CSS::JustifyContent justify_content() const { return m_noninherited.justify_content; }
+    CSS::BackdropFilter const& backdrop_filter() const { return m_noninherited.backdrop_filter; }
     Vector<ShadowData> const& box_shadow() const { return m_noninherited.box_shadow; }
     CSS::BoxSizing box_sizing() const { return m_noninherited.box_sizing; }
     CSS::LengthPercentage const& width() const { return m_noninherited.width; }
@@ -267,6 +270,7 @@ protected:
         CSS::LengthBox inset { InitialValues::inset() };
         CSS::LengthBox margin { InitialValues::margin() };
         CSS::LengthBox padding { InitialValues::padding() };
+        CSS::BackdropFilter backdrop_filter { InitialValues::backdrop_filter() };
         BorderData border_left;
         BorderData border_top;
         BorderData border_right;
@@ -347,6 +351,7 @@ public:
     void set_overflow_y(CSS::Overflow value) { m_noninherited.overflow_y = value; }
     void set_list_style_type(CSS::ListStyleType value) { m_inherited.list_style_type = value; }
     void set_display(CSS::Display value) { m_noninherited.display = value; }
+    void set_backdrop_filter(CSS::BackdropFilter backdrop_filter) { m_noninherited.backdrop_filter = move(backdrop_filter); }
     void set_border_bottom_left_radius(CSS::BorderRadiusData value) { m_noninherited.border_bottom_left_radius = value; }
     void set_border_bottom_right_radius(CSS::BorderRadiusData value) { m_noninherited.border_bottom_right_radius = value; }
     void set_border_top_left_radius(CSS::BorderRadiusData value) { m_noninherited.border_top_left_radius = value; }

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -355,6 +355,14 @@ Optional<CSS::Appearance> StyleProperties::appearance() const
     return appearance;
 }
 
+CSS::BackdropFilter StyleProperties::backdrop_filter() const
+{
+    auto value = property(CSS::PropertyID::BackdropFilter);
+    if (value->is_filter_value_list())
+        return BackdropFilter(value->as_filter_value_list());
+    return BackdropFilter::make_none();
+}
+
 Optional<CSS::Position> StyleProperties::position() const
 {
     auto value = property(CSS::PropertyID::Position);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -70,6 +70,7 @@ public:
     Optional<CSS::AlignItems> align_items() const;
     Optional<CSS::AlignSelf> align_self() const;
     Optional<CSS::Appearance> appearance() const;
+    CSS::BackdropFilter backdrop_filter() const;
     float opacity() const;
     Optional<CSS::Visibility> visibility() const;
     Optional<CSS::ImageRendering> image_rendering() const;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -393,6 +393,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     computed_values.set_flex_shrink(computed_style.flex_shrink());
     computed_values.set_order(computed_style.order());
     computed_values.set_clip(computed_style.clip());
+    computed_values.set_backdrop_filter(computed_style.backdrop_filter());
 
     auto justify_content = computed_style.justify_content();
     if (justify_content.has_value())