LibWeb: Parse and store the opacity property

5 files changed, 23 insertions, 0 deletions

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<float> flex_grow_factor() const { return m_noninherited.flex_grow_factor; }
     Optional<float> flex_shrink_factor() const { return m_noninherited.flex_shrink_factor; }
+    Optional<float> 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<float> 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<float> value) { m_noninherited.flex_grow_factor = value; }
     void set_flex_shrink_factor(Optional<float> value) { m_noninherited.flex_shrink_factor = value; }
+    void set_opacity(Optional<float> 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<int> StyleProperties::z_index() const
     return static_cast<int>(value.value()->to_length().raw_value());
 }
 
+Optional<float> 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<float>(length.raw_value() / 100), 0.0f, 1.0f);
+    else
+        return clamp(static_cast<float>(length.raw_value()), 0.0f, 1.0f);
+}
+
 Optional<CSS::FlexDirection> 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<CSS::FlexBasisData> flex_basis() const;
     Optional<float> flex_grow_factor() const;
     Optional<float> flex_shrink_factor() const;
+    Optional<float> opacity() const;
     Optional<CSS::JustifyContent> justify_content() const;
     Optional<CSS::Overflow> overflow_x() const;
     Optional<CSS::Overflow> 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;