LibWeb: Store opacity in computed form in ComputedProperties

Author: https://github.com/Calme1709
Commit: 1ba84de4f6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6112
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/tcl3 ✅

Libraries/LibWeb/CSS/CSSStyleProperties.cpp

@@ -813,10 +813,6 @@ RefPtr<StyleValue const> CSSStyleProperties::style_value_for_computed_property(L
 
         return get_computed_value(property_id);
     }
-    case PropertyID::Opacity: {
-        auto opacity = layout_node.computed_values().opacity();
-        return NumberStyleValue::create(opacity);
-    }
     case PropertyID::FillOpacity: {
         auto opacity = layout_node.computed_values().fill_opacity();
         return NumberStyleValue::create(opacity);

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -474,8 +474,7 @@ float ComputedProperties::resolve_opacity_value(StyleValue const& value)
 
 float ComputedProperties::opacity() const
 {
-    auto const& value = property(PropertyID::Opacity);
-    return resolve_opacity_value(value);
+    return property(PropertyID::Opacity).as_number().number();
 }
 
 float ComputedProperties::fill_opacity() const

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -3283,6 +3283,8 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_value_of_property(Propert
         return compute_border_or_outline_width(specified_value, get_property_specified_value(PropertyID::BorderTopStyle), computation_context);
     case PropertyID::OutlineWidth:
         return compute_border_or_outline_width(specified_value, get_property_specified_value(PropertyID::OutlineStyle), computation_context);
+    case PropertyID::Opacity:
+        return compute_opacity(specified_value, computation_context);
     default:
         // FIXME: We should replace this with a VERIFY_NOT_REACHED() once all properties have their own handling.
         return specified_value;
@@ -3314,6 +3316,30 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_border_or_outline_width(N
     return LengthStyleValue::create(Length::make_px(snap_a_length_as_a_border_width(computation_context.device_pixels_per_css_pixel, absolute_length)));
 }
 
+NonnullRefPtr<StyleValue const> StyleComputer::compute_opacity(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const& computation_context)
+{
+    // https://drafts.csswg.org/css-color-4/#transparency
+    // specified number, clamped to the range [0,1]
+
+    // <number>
+    if (specified_value->is_number())
+        return NumberStyleValue::create(clamp(specified_value->as_number().number(), 0, 1));
+
+    // NOTE: We also support calc()'d numbers
+    if (specified_value->is_calculated() && specified_value->as_calculated().resolves_to_number())
+        return NumberStyleValue::create(clamp(specified_value->as_calculated().resolve_number({ .length_resolution_context = computation_context.length_resolution_context }).value(), 0, 1));
+
+    // <percentage>
+    if (specified_value->is_percentage())
+        return NumberStyleValue::create(clamp(specified_value->as_percentage().percentage().as_fraction(), 0, 1));
+
+    // NOTE: We also support calc()'d percentages
+    if (specified_value->is_calculated() && specified_value->as_calculated().resolves_to_percentage())
+        return NumberStyleValue::create(clamp(specified_value->as_calculated().resolve_percentage({ .length_resolution_context = computation_context.length_resolution_context })->as_fraction(), 0, 1));
+
+    VERIFY_NOT_REACHED();
+}
+
 void StyleComputer::compute_math_depth(ComputedProperties& style, Optional<DOM::AbstractElement> element) const
 {
     // https://w3c.github.io/mathml-core/#propdef-math-depth

Libraries/LibWeb/CSS/StyleComputer.h

@@ -204,6 +204,7 @@ public:
     };
     static NonnullRefPtr<StyleValue const> compute_value_of_property(PropertyID, NonnullRefPtr<StyleValue const> const& specified_value, Function<NonnullRefPtr<StyleValue const>(PropertyID)> const& get_property_specified_value, PropertyValueComputationContext const&);
     static NonnullRefPtr<StyleValue const> compute_border_or_outline_width(NonnullRefPtr<StyleValue const> const& specified_value, NonnullRefPtr<StyleValue const> const& style_specified_value, PropertyValueComputationContext const&);
+    static NonnullRefPtr<StyleValue const> compute_opacity(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const&);
 
 private:
     virtual void visit_edges(Visitor&) override;

Libraries/LibWeb/CSS/StyleInvalidation.cpp

@@ -5,9 +5,9 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleInvalidation.h>
 #include <LibWeb/CSS/StyleValues/KeywordStyleValue.h>
+#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 
 namespace Web::CSS {
 
@@ -61,8 +61,8 @@ RequiredInvalidationAfterStyleChange compute_property_invalidation(CSS::Property
         // OPTIMIZATION: An element creates a stacking context when its opacity changes from 1 to less than 1
         //               and stops to create one when opacity returns to 1. So stacking context tree rebuild is
         //               not required for opacity changes within the range below 1.
-        auto old_value_opacity = CSS::ComputedProperties::resolve_opacity_value(*old_value);
-        auto new_value_opacity = CSS::ComputedProperties::resolve_opacity_value(*new_value);
+        auto old_value_opacity = old_value->as_number().number();
+        auto new_value_opacity = new_value->as_number().number();
         if (old_value_opacity != new_value_opacity && (old_value_opacity == 1 || new_value_opacity == 1)) {
             invalidation.rebuild_stacking_context_tree = true;
         }