From 07b3b70a109ebbcaaafa8dc0d26187924ed77877 Mon Sep 17 00:00:00 2001
From: Tim Ledbetter <tim.ledbetter@ladybird.org>
Date: Wed, 18 Jun 2025 18:22:15 +0100
Subject: [PATCH] LibWeb: Return the correct computed value for opacity
 properties

---
 Libraries/LibWeb/CSS/CSSStyleProperties.cpp   | 16 ++++++++++++
 .../Text/expected/css/calc-coverage.txt       | 16 ++++++------
 .../css-color/parsing/opacity-computed.txt    | 13 ++++++++++
 .../css-color/parsing/opacity-computed.html   | 25 +++++++++++++++++++
 4 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/opacity-computed.html

diff --git a/Libraries/LibWeb/CSS/CSSStyleProperties.cpp b/Libraries/LibWeb/CSS/CSSStyleProperties.cpp
index 9e038b617da..98a7eda5d91 100644
--- a/Libraries/LibWeb/CSS/CSSStyleProperties.cpp
+++ b/Libraries/LibWeb/CSS/CSSStyleProperties.cpp
@@ -1071,6 +1071,22 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
 
         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);
+    }
+    case PropertyID::StopOpacity: {
+        auto opacity = layout_node.computed_values().stop_opacity();
+        return NumberStyleValue::create(opacity);
+    }
+    case PropertyID::StrokeOpacity: {
+        auto opacity = layout_node.computed_values().stroke_opacity();
+        return NumberStyleValue::create(opacity);
+    }
     case PropertyID::OutlineWidth: {
         auto outline_width = layout_node.computed_values().outline_width();
         return LengthStyleValue::create(outline_width);
diff --git a/Tests/LibWeb/Text/expected/css/calc-coverage.txt b/Tests/LibWeb/Text/expected/css/calc-coverage.txt
index e40c999b9ed..bb3d57ede5e 100644
--- a/Tests/LibWeb/Text/expected/css/calc-coverage.txt
+++ b/Tests/LibWeb/Text/expected/css/calc-coverage.txt
@@ -54,8 +54,8 @@ cx: 'calc(2px)' -> '2px'
 cx: 'calc(2px * var(--n))' -> '4px'
 cy: 'calc(2%)' -> '2%'
 cy: 'calc(2% * var(--n))' -> 'calc(2 * 2%)'
-fill-opacity: 'calc(2)' -> '2'
-fill-opacity: 'calc(2 * var(--n))' -> '4'
+fill-opacity: 'calc(2)' -> '1'
+fill-opacity: 'calc(2 * var(--n))' -> '1'
 filter: 'grayscale(calc(2%))' -> 'grayscale(calc(2%))'
 filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(calc(4%))'
 filter: 'grayscale(calc(0.02))' -> 'grayscale(calc(0.02))'
@@ -110,8 +110,8 @@ min-height: 'calc(2px)' -> '2px'
 min-height: 'calc(2px * var(--n))' -> '4px'
 min-width: 'calc(2%)' -> '2%'
 min-width: 'calc(2% * var(--n))' -> 'calc(2 * 2%)'
-opacity: 'calc(2)' -> '2'
-opacity: 'calc(2 * var(--n))' -> '4'
+opacity: 'calc(2)' -> '1'
+opacity: 'calc(2 * var(--n))' -> '1'
 order: 'calc(2)' -> '2'
 order: 'calc(2 * var(--n))' -> '4'
 outline-offset: 'calc(2px)' -> '2px'
@@ -136,10 +136,10 @@ rx: 'calc(2px)' -> '2px'
 rx: 'calc(2px * var(--n))' -> '4px'
 ry: 'calc(2%)' -> '2%'
 ry: 'calc(2% * var(--n))' -> 'calc(2 * 2%)'
-stop-opacity: 'calc(2)' -> '2'
-stop-opacity: 'calc(2 * var(--n))' -> '4'
-stroke-opacity: 'calc(2%)' -> '0.02'
-stroke-opacity: 'calc(2% * var(--n))' -> '0.04'
+stop-opacity: 'calc(2)' -> '1'
+stop-opacity: 'calc(2 * var(--n))' -> '1'
+stroke-opacity: 'calc(2%)' -> '1'
+stroke-opacity: 'calc(2% * var(--n))' -> '1'
 stroke-width: 'calc(2px)' -> '2px'
 stroke-width: 'calc(2px * var(--n))' -> '4px'
 tab-size: 'calc(2px)' -> '2px'
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt
new file mode 100644
index 00000000000..67ea5a87c50
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt
@@ -0,0 +1,13 @@
+Harness status: OK
+
+Found 8 tests
+
+8 Pass
+Pass	Property opacity value '1'
+Pass	Property opacity value '0.5'
+Pass	Property opacity value '0'
+Pass	Property opacity value '-2'
+Pass	Property opacity value '3'
+Pass	Property opacity value '-100%'
+Pass	Property opacity value '50%'
+Pass	Property opacity value '300%'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/opacity-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/opacity-computed.html
new file mode 100644
index 00000000000..d538c606848
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/opacity-computed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Color Level 3: getComputedStyle().opacity</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("opacity", "1");
+test_computed_value("opacity", "0.5");
+test_computed_value("opacity", "0");
+test_computed_value("opacity", "-2", "0");
+test_computed_value("opacity", "3", "1");
+test_computed_value("opacity", "-100%", "0");
+test_computed_value("opacity", "50%", "0.5");
+test_computed_value("opacity", "300%", "1");
+
+</script>
+</body>
+</html>