From 5dab5bf0e9add43a5905b7fdde51f74cfbe5b68b Mon Sep 17 00:00:00 2001
From: Alice Mikhaylenko <alicem@gnome.org>
Date: Wed, 5 Jun 2024 22:13:16 +0400
Subject: [PATCH] css: Allow percents in opacity

Add another missing feature from web css. It's nice to be able to use the
same variables in color-mix() and here.
---
 gtk/gtkcssstylepropertyimpl.c        | 5 +++--
 gtk/gtkwidget.c                      | 2 +-
 testsuite/css/parser/opacity.css     | 4 ++++
 testsuite/css/parser/opacity.ref.css | 4 ++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/gtk/gtkcssstylepropertyimpl.c b/gtk/gtkcssstylepropertyimpl.c
index 4cf1030ae0..ae2ccdcb2d 100644
--- a/gtk/gtkcssstylepropertyimpl.c
+++ b/gtk/gtkcssstylepropertyimpl.c
@@ -240,9 +240,10 @@ parse_css_direction (GtkCssStyleProperty *property,
 
 static GtkCssValue *
 opacity_parse (GtkCssStyleProperty *property,
-	       GtkCssParser        *parser)
+               GtkCssParser        *parser)
 {
-  return gtk_css_number_value_parse (parser, GTK_CSS_PARSE_NUMBER);
+  return gtk_css_number_value_parse (parser, GTK_CSS_PARSE_NUMBER
+                                             | GTK_CSS_PARSE_PERCENT);
 }
 
 static GtkCssValue *
diff --git a/gtk/gtkwidget.c b/gtk/gtkwidget.c
index 0236cf3d04..d2a0f10a24 100644
--- a/gtk/gtkwidget.c
+++ b/gtk/gtkwidget.c
@@ -11857,7 +11857,7 @@ gtk_widget_create_render_node (GtkWidget   *widget,
 
   style = gtk_css_node_get_style (priv->cssnode);
 
-  css_opacity = gtk_css_number_value_get (style->other->opacity, 100);
+  css_opacity = gtk_css_number_value_get (style->other->opacity, 1);
   opacity = CLAMP (css_opacity, 0.0, 1.0) * priv->user_alpha / 255.0;
 
   if (opacity <= 0.0)
diff --git a/testsuite/css/parser/opacity.css b/testsuite/css/parser/opacity.css
index 9aa762fafa..386f03471c 100644
--- a/testsuite/css/parser/opacity.css
+++ b/testsuite/css/parser/opacity.css
@@ -21,3 +21,7 @@ e {
 f {
   opacity: 0;
 }
+
+g {
+  opacity: 50%;
+}
diff --git a/testsuite/css/parser/opacity.ref.css b/testsuite/css/parser/opacity.ref.css
index 9aa762fafa..386f03471c 100644
--- a/testsuite/css/parser/opacity.ref.css
+++ b/testsuite/css/parser/opacity.ref.css
@@ -21,3 +21,7 @@ e {
 f {
   opacity: 0;
 }
+
+g {
+  opacity: 50%;
+}