diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index 2e05b20529..a7da6dd395 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -62,6 +62,7 @@ public: FlexBasisData flex_basis() const { return m_noninherited.flex_basis; } Optional flex_grow_factor() const { return m_noninherited.flex_grow_factor; } Optional flex_shrink_factor() const { return m_noninherited.flex_shrink_factor; } + Optional opacity() const { return m_noninherited.opacity; } CSS::JustifyContent justify_content() const { return m_noninherited.justify_content; } const CSS::Length& width() const { return m_noninherited.width; } const CSS::Length& min_width() const { return m_noninherited.min_width; } @@ -146,6 +147,7 @@ protected: CSS::JustifyContent justify_content { InitialValues::justify_content() }; CSS::Overflow overflow_x { InitialValues::overflow() }; CSS::Overflow overflow_y { InitialValues::overflow() }; + Optional opacity; } m_noninherited; }; @@ -193,6 +195,7 @@ public: void set_flex_basis(FlexBasisData value) { m_noninherited.flex_basis = value; } void set_flex_grow_factor(Optional value) { m_noninherited.flex_grow_factor = value; } void set_flex_shrink_factor(Optional value) { m_noninherited.flex_shrink_factor = value; } + void set_opacity(Optional value) { m_noninherited.opacity = value; } void set_justify_content(CSS::JustifyContent value) { m_noninherited.justify_content = value; } }; diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index c2e84902bf..3b83a4224a 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -347,6 +347,10 @@ "inherited": false, "initial": "0" }, + "opacity": { + "inherited": false, + "initial": 1 + }, "overflow": { "longhands": [ "overflow-x", diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index c5a9807c49..0adb41aad6 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -229,6 +229,18 @@ Optional StyleProperties::z_index() const return static_cast(value.value()->to_length().raw_value()); } +Optional StyleProperties::opacity() const +{ + auto value = property(CSS::PropertyID::Opacity); + if (!value.has_value()) + return {}; + + if (auto length = value.value()->to_length(); length.is_percentage()) + return clamp(static_cast(length.raw_value() / 100), 0.0f, 1.0f); + else + return clamp(static_cast(length.raw_value()), 0.0f, 1.0f); +} + Optional StyleProperties::flex_direction() const { auto value = property(CSS::PropertyID::FlexDirection); diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h index 74c9715c36..df289849dd 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h @@ -56,6 +56,7 @@ public: Optional flex_basis() const; Optional flex_grow_factor() const; Optional flex_shrink_factor() const; + Optional opacity() const; Optional justify_content() const; Optional overflow_x() const; Optional overflow_y() const; diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index 063f9d6e46..e7564af1bd 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -327,6 +327,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style) computed_values.set_background_color(specified_style.color_or_fallback(CSS::PropertyID::BackgroundColor, document(), Color::Transparent)); computed_values.set_z_index(specified_style.z_index()); + computed_values.set_opacity(specified_style.opacity()); + if (computed_values.opacity() == 0) + m_visible = false; if (auto width = specified_style.property(CSS::PropertyID::Width); width.has_value()) m_has_definite_width = true;