LibWeb: Clarify StyleValue API with new naming scheme

This does a few things, that are hard to separate. For a while now, it's been confuzing what `StyleValue::is_foo()` actually means. It sometimes was used to check the type, and sometimes to see if it could return a certain value type. The new naming scheme is: - `is_length()` - is it a LengthStyleValue? - `as_length()` - casts it to LengthStyleValue - `has_length()` - can it return a Length? - `to_length()` - gets the internal value out (eg, Length) This also means, no more `static_cast<LengthStyleValue const&>(*this)` stuff when dealing with StyleValues. :^) Hopefully this will be a bit clearer going forward. There are lots of places using the original methods, so I'll be going through them to hopefully catch any issues.
2025-07-25 15:57:45 +00:00 · 2021-09-23 19:54:19 +01:00 · 2021-09-23 19:54:19 +01:00 · 4b554ba92a
commit 4b554ba92a
parent 1ae0781ce1
6 changed files with 263 additions and 60 deletions
--- a/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_PropertyID_cpp.cpp
+++ b/Meta/Lagom/Tools/CodeGenerators/LibWeb/Generate_CSS_PropertyID_cpp.cpp
@ -284,7 +284,7 @@ bool property_accepts_value(PropertyID property_id, StyleValue& style_value)
                        auto type_args = type_parts.size() > 1 ? type_parts[1] : ""sv;
                        if (type_name == "color") {
                            property_generator.append(R"~~~(
-        if (style_value.is_color())
+        if (style_value.has_color())
            return true;
 )~~~");
                        } else if (type_name == "image") {
@ -295,7 +295,7 @@ bool property_accepts_value(PropertyID property_id, StyleValue& style_value)
                        } else if (type_name == "length" || type_name == "percentage") {
                            // FIXME: Handle lengths and percentages separately
                            property_generator.append(R"~~~(
-        if (style_value.is_length() || style_value.is_calculated())
+        if (style_value.has_length() || style_value.is_calculated())
            return true;
 )~~~");
                        } else if (type_name == "number" || type_name == "integer") {
@ -309,14 +309,14 @@ bool property_accepts_value(PropertyID property_id, StyleValue& style_value)
                                max_value = type_args.substring_view(comma_index + 1, type_args.length() - comma_index - 2);
                            }
                            property_generator.append(R"~~~(
-        if (style_value.is_numeric())~~~");
+        if (style_value.has_number())~~~");
                            if (!min_value.is_empty()) {
                                property_generator.set("minvalue", min_value);
-                                property_generator.append(" && (style_value.as_number() >= (float)@minvalue@)");
+                                property_generator.append(" && (style_value.to_number() >= (float)@minvalue@)");
                            }
                            if (!max_value.is_empty()) {
                                property_generator.set("maxvalue", max_value);
-                                property_generator.append(" && (style_value.as_number() <= (float)@maxvalue@)");
+                                property_generator.append(" && (style_value.to_number() <= (float)@maxvalue@)");
                            }
                            property_generator.append(R"~~~()
            return true;
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@ -268,7 +268,7 @@ Optional<int> StyleProperties::z_index() const
        return {};
    auto& value = maybe_value.value();

-    if (value->is_auto())
+    if (value->has_auto())
        return 0;
    if (value->is_numeric())
        return static_cast<int>(static_cast<NumericStyleValue&>(*value).value());
@ -339,7 +339,7 @@ Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
    if (value.value()->is_identifier() && value.value()->to_identifier() == CSS::ValueID::Content)
        return { { CSS::FlexBasis::Content, {} } };

-    if (value.value()->is_auto())
+    if (value.value()->has_auto())
        return { { CSS::FlexBasis::Auto, {} } };

    if (value.value()->is_length())
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
@ -26,14 +26,158 @@ StyleValue::~StyleValue()
 {
 }

-bool StyleValue::is_color() const
+BackgroundStyleValue const& StyleValue::as_background() const
 {
-    if (type() == Type::Color)
-        return true;
-    if (type() != Type::Identifier)
-        return false;
+    VERIFY(is_background());
+    return static_cast<BackgroundStyleValue const&>(*this);
+}

-    switch (to_identifier()) {
+BackgroundRepeatStyleValue const& StyleValue::as_background_repeat() const
+{
+    VERIFY(is_background_repeat());
+    return static_cast<BackgroundRepeatStyleValue const&>(*this);
+}
+
+BorderStyleValue const& StyleValue::as_border() const
+{
+    VERIFY(is_border());
+    return static_cast<BorderStyleValue const&>(*this);
+}
+
+BorderRadiusStyleValue const& StyleValue::as_border_radius() const
+{
+    VERIFY(is_border_radius());
+    return static_cast<BorderRadiusStyleValue const&>(*this);
+}
+
+BoxShadowStyleValue const& StyleValue::as_box_shadow() const
+{
+    VERIFY(is_box_shadow());
+    return static_cast<BoxShadowStyleValue const&>(*this);
+}
+
+CalculatedStyleValue const& StyleValue::as_calculated() const
+{
+    VERIFY(is_calculated());
+    return static_cast<CalculatedStyleValue const&>(*this);
+}
+
+ColorStyleValue const& StyleValue::as_color() const
+{
+    VERIFY(is_color());
+    return static_cast<ColorStyleValue const&>(*this);
+}
+
+CustomStyleValue const& StyleValue::as_custom_property() const
+{
+    VERIFY(is_custom_property());
+    return static_cast<CustomStyleValue const&>(*this);
+}
+
+FlexStyleValue const& StyleValue::as_flex() const
+{
+    VERIFY(is_flex());
+    return static_cast<FlexStyleValue const&>(*this);
+}
+
+FlexFlowStyleValue const& StyleValue::as_flex_flow() const
+{
+    VERIFY(is_flex_flow());
+    return static_cast<FlexFlowStyleValue const&>(*this);
+}
+
+FontStyleValue const& StyleValue::as_font() const
+{
+    VERIFY(is_font());
+    return static_cast<FontStyleValue const&>(*this);
+}
+
+IdentifierStyleValue const& StyleValue::as_identifier() const
+{
+    VERIFY(is_identifier());
+    return static_cast<IdentifierStyleValue const&>(*this);
+}
+
+ImageStyleValue const& StyleValue::as_image() const
+{
+    VERIFY(is_image());
+    return static_cast<ImageStyleValue const&>(*this);
+}
+
+InheritStyleValue const& StyleValue::as_inherit() const
+{
+    VERIFY(is_inherit());
+    return static_cast<InheritStyleValue const&>(*this);
+}
+
+InitialStyleValue const& StyleValue::as_initial() const
+{
+    VERIFY(is_initial());
+    return static_cast<InitialStyleValue const&>(*this);
+}
+
+LengthStyleValue const& StyleValue::as_length() const
+{
+    VERIFY(is_length());
+    return static_cast<LengthStyleValue const&>(*this);
+}
+
+ListStyleStyleValue const& StyleValue::as_list_style() const
+{
+    VERIFY(is_list_style());
+    return static_cast<ListStyleStyleValue const&>(*this);
+}
+
+NumericStyleValue const& StyleValue::as_numeric() const
+{
+    VERIFY(is_numeric());
+    return static_cast<NumericStyleValue const&>(*this);
+}
+
+OverflowStyleValue const& StyleValue::as_overflow() const
+{
+    VERIFY(is_overflow());
+    return static_cast<OverflowStyleValue const&>(*this);
+}
+
+StringStyleValue const& StyleValue::as_string() const
+{
+    VERIFY(is_string());
+    return static_cast<StringStyleValue const&>(*this);
+}
+
+TextDecorationStyleValue const& StyleValue::as_text_decoration() const
+{
+    VERIFY(is_text_decoration());
+    return static_cast<TextDecorationStyleValue const&>(*this);
+}
+
+TransformationStyleValue const& StyleValue::as_transformation() const
+{
+    VERIFY(is_transformation());
+    return static_cast<TransformationStyleValue const&>(*this);
+}
+
+UnsetStyleValue const& StyleValue::as_unset() const
+{
+    VERIFY(is_unset());
+    return static_cast<UnsetStyleValue const&>(*this);
+}
+
+StyleValueList const& StyleValue::as_value_list() const
+{
+    VERIFY(is_value_list());
+    return static_cast<StyleValueList const&>(*this);
+}
+
+String IdentifierStyleValue::to_string() const
+{
+    return CSS::string_from_value_id(m_id);
+}
+
+bool IdentifierStyleValue::has_color() const
+{
+    switch (m_id) {
    case ValueID::Currentcolor:
    case ValueID::LibwebLink:
    case ValueID::LibwebPaletteActiveLink:
@ -92,21 +236,8 @@ bool StyleValue::is_color() const
    case ValueID::LibwebPaletteWindowText:
        return true;
    default:
-        break;
+        return false;
    }
-
-    return false;
-}
-
-float StyleValue::as_number() const
-{
-    VERIFY(is_numeric());
-    return static_cast<NumericStyleValue const&>(*this).value();
-}
-
-String IdentifierStyleValue::to_string() const
-{
-    return CSS::string_from_value_id(m_id);
 }

 Color IdentifierStyleValue::to_color(Layout::NodeWithStyle const& node) const
@ -255,5 +386,4 @@ void ImageStyleValue::resource_did_load()
    if (m_document->browsing_context())
        m_document->browsing_context()->set_needs_display({});
 }
-
 }
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h
@ -269,11 +269,11 @@ public:
    bool is_flex() const { return type() == Type::Flex; }
    bool is_flex_flow() const { return type() == Type::FlexFlow; }
    bool is_font() const { return type() == Type::Font; }
-    bool is_identifier() const { return type() == Type::Identifier || is_auto(); }
+    bool is_identifier() const { return type() == Type::Identifier; }
    bool is_image() const { return type() == Type::Image; }
    bool is_inherit() const { return type() == Type::Inherit; }
    bool is_initial() const { return type() == Type::Initial; }
-    virtual bool is_length() const { return type() == Type::Length; }
+    bool is_length() const { return type() == Type::Length; }
    bool is_list_style() const { return type() == Type::ListStyle; }
    bool is_numeric() const { return type() == Type::Numeric; }
    bool is_overflow() const { return type() == Type::Overflow; }
@ -285,21 +285,67 @@ public:

    bool is_builtin() const { return is_inherit() || is_initial() || is_unset(); }

-    bool is_builtin_or_dynamic() const
-    {
-        return is_builtin() || is_custom_property() || is_calculated();
-    }
+    BackgroundRepeatStyleValue const& as_background_repeat() const;
+    BackgroundStyleValue const& as_background() const;
+    BorderRadiusStyleValue const& as_border_radius() const;
+    BorderStyleValue const& as_border() const;
+    BoxShadowStyleValue const& as_box_shadow() const;
+    CalculatedStyleValue const& as_calculated() const;
+    ColorStyleValue const& as_color() const;
+    CustomStyleValue const& as_custom_property() const;
+    FlexFlowStyleValue const& as_flex_flow() const;
+    FlexStyleValue const& as_flex() const;
+    FontStyleValue const& as_font() const;
+    IdentifierStyleValue const& as_identifier() const;
+    ImageStyleValue const& as_image() const;
+    InheritStyleValue const& as_inherit() const;
+    InitialStyleValue const& as_initial() const;
+    LengthStyleValue const& as_length() const;
+    ListStyleStyleValue const& as_list_style() const;
+    NumericStyleValue const& as_numeric() const;
+    OverflowStyleValue const& as_overflow() const;
+    StringStyleValue const& as_string() const;
+    TextDecorationStyleValue const& as_text_decoration() const;
+    TransformationStyleValue const& as_transformation() const;
+    UnsetStyleValue const& as_unset() const;
+    StyleValueList const& as_value_list() const;

-    float as_number() const;
+    BackgroundRepeatStyleValue& as_background_repeat() { return const_cast<BackgroundRepeatStyleValue&>(const_cast<StyleValue const&>(*this).as_background_repeat()); }
+    BackgroundStyleValue& as_background() { return const_cast<BackgroundStyleValue&>(const_cast<StyleValue const&>(*this).as_background()); }
+    BorderRadiusStyleValue& as_border_radius() { return const_cast<BorderRadiusStyleValue&>(const_cast<StyleValue const&>(*this).as_border_radius()); }
+    BorderStyleValue& as_border() { return const_cast<BorderStyleValue&>(const_cast<StyleValue const&>(*this).as_border()); }
+    BoxShadowStyleValue& as_box_shadow() { return const_cast<BoxShadowStyleValue&>(const_cast<StyleValue const&>(*this).as_box_shadow()); }
+    CalculatedStyleValue& as_calculated() { return const_cast<CalculatedStyleValue&>(const_cast<StyleValue const&>(*this).as_calculated()); }
+    ColorStyleValue& as_color() { return const_cast<ColorStyleValue&>(const_cast<StyleValue const&>(*this).as_color()); }
+    CustomStyleValue& as_custom_property() { return const_cast<CustomStyleValue&>(const_cast<StyleValue const&>(*this).as_custom_property()); }
+    FlexFlowStyleValue& as_flex_flow() { return const_cast<FlexFlowStyleValue&>(const_cast<StyleValue const&>(*this).as_flex_flow()); }
+    FlexStyleValue& as_flex() { return const_cast<FlexStyleValue&>(const_cast<StyleValue const&>(*this).as_flex()); }
+    FontStyleValue& as_font() { return const_cast<FontStyleValue&>(const_cast<StyleValue const&>(*this).as_font()); }
+    IdentifierStyleValue& as_identifier() { return const_cast<IdentifierStyleValue&>(const_cast<StyleValue const&>(*this).as_identifier()); }
+    ImageStyleValue& as_image() { return const_cast<ImageStyleValue&>(const_cast<StyleValue const&>(*this).as_image()); }
+    InheritStyleValue& as_inherit() { return const_cast<InheritStyleValue&>(const_cast<StyleValue const&>(*this).as_inherit()); }
+    InitialStyleValue& as_initial() { return const_cast<InitialStyleValue&>(const_cast<StyleValue const&>(*this).as_initial()); }
+    LengthStyleValue& as_length() { return const_cast<LengthStyleValue&>(const_cast<StyleValue const&>(*this).as_length()); }
+    ListStyleStyleValue& as_list_style() { return const_cast<ListStyleStyleValue&>(const_cast<StyleValue const&>(*this).as_list_style()); }
+    NumericStyleValue& as_numeric() { return const_cast<NumericStyleValue&>(const_cast<StyleValue const&>(*this).as_numeric()); }
+    OverflowStyleValue& as_overflow() { return const_cast<OverflowStyleValue&>(const_cast<StyleValue const&>(*this).as_overflow()); }
+    StringStyleValue& as_string() { return const_cast<StringStyleValue&>(const_cast<StyleValue const&>(*this).as_string()); }
+    TextDecorationStyleValue& as_text_decoration() { return const_cast<TextDecorationStyleValue&>(const_cast<StyleValue const&>(*this).as_text_decoration()); }
+    TransformationStyleValue& as_transformation() { return const_cast<TransformationStyleValue&>(const_cast<StyleValue const&>(*this).as_transformation()); }
+    UnsetStyleValue& as_unset() { return const_cast<UnsetStyleValue&>(const_cast<StyleValue const&>(*this).as_unset()); }
+    StyleValueList& as_value_list() { return const_cast<StyleValueList&>(const_cast<StyleValue const&>(*this).as_value_list()); }

-    virtual String to_string() const = 0;
-    virtual Length to_length() const { return {}; }
+    virtual bool has_auto() const { return false; }
+    virtual bool has_color() const { return false; }
+    virtual bool has_identifier() const { return false; }
+    virtual bool has_length() const { return false; }
+    virtual bool has_number() const { return false; }

    virtual Color to_color(Layout::NodeWithStyle const&) const { return {}; }
-
-    CSS::ValueID to_identifier() const;
-
-    virtual bool is_auto() const { return false; }
+    virtual CSS::ValueID to_identifier() const { return ValueID::Invalid; }
+    virtual Length to_length() const { return {}; }
+    virtual float to_number() const { return {}; }
+    virtual String to_string() const = 0;

    bool operator==(const StyleValue& other) const { return equals(other); }
    bool operator!=(const StyleValue& other) const { return !(*this == other); }
@ -621,8 +667,9 @@ public:
    virtual ~ColorStyleValue() override { }

    Color color() const { return m_color; }
-    String to_string() const override { return m_color.to_string(); }
-    Color to_color(Layout::NodeWithStyle const&) const override { return m_color; }
+    virtual String to_string() const override { return m_color.to_string(); }
+    virtual bool has_color() const override { return true; }
+    virtual Color to_color(Layout::NodeWithStyle const&) const override { return m_color; }

    virtual bool equals(const StyleValue& other) const override
    {
@ -806,8 +853,12 @@ public:

    CSS::ValueID id() const { return m_id; }

-    virtual String to_string() const override;
+    virtual bool has_auto() const override { return m_id == ValueID::Auto; }
+    virtual bool has_identifier() const override { return true; }
+    virtual CSS::ValueID to_identifier() const override { return m_id; }
+    virtual bool has_color() const override;
    virtual Color to_color(Layout::NodeWithStyle const& node) const override;
+    virtual String to_string() const override;

    virtual bool equals(const StyleValue& other) const override
    {
@ -892,13 +943,13 @@ public:
    }
    virtual ~LengthStyleValue() override { }

+    Length const& length() const { return m_length; }
+
+    virtual bool has_auto() const override { return m_length.is_auto(); }
+    virtual bool has_length() const override { return true; }
    virtual String to_string() const override { return m_length.to_string(); }
    virtual Length to_length() const override { return m_length; }

-    const Length& length() const { return m_length; }
-
-    virtual bool is_auto() const override { return m_length.is_auto(); }
-
    virtual bool equals(const StyleValue& other) const override
    {
        if (type() != other.type())
@ -960,10 +1011,15 @@ public:
        return adopt_ref(*new NumericStyleValue(value));
    }

-    virtual bool is_length() const override { return m_value == 0; }
+    virtual bool has_length() const override { return m_value == 0; }
    virtual Length to_length() const override { return Length(0, Length::Type::Px); }

+    virtual bool has_number() const override { return true; }
+    virtual float to_number() const override { return m_value; }
+
    float value() const { return m_value; }
+    // FIXME: Store integer values separately
+    i64 int_value() const { return roundf(m_value); }
    String to_string() const override { return String::formatted("{}", m_value); }

    virtual bool equals(StyleValue const& other) const override
@ -1143,12 +1199,4 @@ private:
    NonnullRefPtrVector<StyleValue> m_values;
 };

-inline CSS::ValueID StyleValue::to_identifier() const
-{
-    if (type() == Type::Identifier)
-        return static_cast<const IdentifierStyleValue&>(*this).id();
-    if (is_auto())
-        return CSS::ValueID::Auto;
-    return CSS::ValueID::Invalid;
-}
 }
--- a/Userland/Libraries/LibWeb/Forward.h
+++ b/Userland/Libraries/LibWeb/Forward.h
@ -28,8 +28,33 @@ class Selector;
 class StyleProperties;
 class StyleResolver;
 class StyleSheet;
-class StyleValue;
 enum class Display;
+
+class StyleValue;
+class BackgroundRepeatStyleValue;
+class BackgroundStyleValue;
+class BorderRadiusStyleValue;
+class BorderStyleValue;
+class BoxShadowStyleValue;
+class CalculatedStyleValue;
+class ColorStyleValue;
+class CustomStyleValue;
+class FlexFlowStyleValue;
+class FlexStyleValue;
+class FontStyleValue;
+class IdentifierStyleValue;
+class ImageStyleValue;
+class InheritStyleValue;
+class InitialStyleValue;
+class LengthStyleValue;
+class ListStyleStyleValue;
+class NumericStyleValue;
+class OverflowStyleValue;
+class StringStyleValue;
+class TextDecorationStyleValue;
+class TransformationStyleValue;
+class UnsetStyleValue;
+class StyleValueList;
 }

 namespace Web::DOM {
--- a/Userland/Libraries/LibWeb/Layout/Node.cpp
+++ b/Userland/Libraries/LibWeb/Layout/Node.cpp
@ -329,13 +329,13 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
    if (computed_values.opacity() == 0)
        m_visible = false;

-    if (auto width = specified_style.property(CSS::PropertyID::Width); width.has_value() && !width.value()->is_auto())
+    if (auto width = specified_style.property(CSS::PropertyID::Width); width.has_value() && !width.value()->has_auto())
        m_has_definite_width = true;
    computed_values.set_width(specified_style.length_or_fallback(CSS::PropertyID::Width, {}));
    computed_values.set_min_width(specified_style.length_or_fallback(CSS::PropertyID::MinWidth, {}));
    computed_values.set_max_width(specified_style.length_or_fallback(CSS::PropertyID::MaxWidth, {}));

-    if (auto height = specified_style.property(CSS::PropertyID::Height); height.has_value() && !height.value()->is_auto())
+    if (auto height = specified_style.property(CSS::PropertyID::Height); height.has_value() && !height.value()->has_auto())
        m_has_definite_height = true;
    computed_values.set_height(specified_style.length_or_fallback(CSS::PropertyID::Height, {}));
    computed_values.set_min_height(specified_style.length_or_fallback(CSS::PropertyID::MinHeight, {}));