From 0356e307353005abe192b02771a39e3a1ab3d0cb Mon Sep 17 00:00:00 2001
From: Zach Hoffman <zach@zrhoffman.net>
Date: Fri, 26 Jan 2024 13:05:13 +0000
Subject: [PATCH] Bug 1876496 - Remove prefix from custom property name passed
 to AnimatedPropertyID r=nchevobbe,emilio

Including the `--` prefix in custom property names caused
Servo_ComputedValues_ExtractAnimationValue to not find custom properties
that nsDOMWindowUtils::GetUnanimatedComputedStyle passed.

Differential Revision: https://phabricator.services.mozilla.com/D199714
---
 dom/base/nsDOMWindowUtils.cpp                    |  8 +++++---
 dom/base/test/file_domwindowutils_animation.html | 16 ++++++++++++++++
 dom/base/test/test_domwindowutils.html           |  1 +
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/dom/base/nsDOMWindowUtils.cpp b/dom/base/nsDOMWindowUtils.cpp
index f11ba77a46c3..692b94e9bd2a 100644
--- a/dom/base/nsDOMWindowUtils.cpp
+++ b/dom/base/nsDOMWindowUtils.cpp
@@ -3185,9 +3185,11 @@ nsDOMWindowUtils::GetUnanimatedComputedStyle(Element* aElement,
       nsCSSProps::IsShorthand(propertyID)) {
     return NS_ERROR_INVALID_ARG;
   }
-  AnimatedPropertyID property = propertyID == eCSSPropertyExtra_variable
-                                    ? AnimatedPropertyID(NS_Atomize(aProperty))
-                                    : AnimatedPropertyID(propertyID);
+  AnimatedPropertyID property =
+      propertyID == eCSSPropertyExtra_variable
+          ? AnimatedPropertyID(
+                NS_Atomize(Substring(aProperty, 2, aProperty.Length() - 2)))
+          : AnimatedPropertyID(propertyID);
 
   switch (aFlushType) {
     case FLUSH_NONE:
diff --git a/dom/base/test/file_domwindowutils_animation.html b/dom/base/test/file_domwindowutils_animation.html
index dfcc8fc05c09..c8b6f2a99dc0 100644
--- a/dom/base/test/file_domwindowutils_animation.html
+++ b/dom/base/test/file_domwindowutils_animation.html
@@ -28,7 +28,16 @@ function deleteStyle() {
 }
 
 
+let propertyIndex = 0;
+
 function test_getUnanimatedComputedStyle() {
+  const name = `--property-${++propertyIndex}`;
+  CSS.registerProperty({
+    name,
+    syntax: "<length>",
+    initialValue: "2px",
+    inherits: false,
+  });
   [
     {
       property: "opacity",
@@ -37,6 +46,13 @@ function test_getUnanimatedComputedStyle() {
       expectedDuringTransitionStyle: "0",
       isDiscrete: false,
     },
+    {
+      property: name,
+      keyframes: ["1px", "10px"],
+      expectedInitialStyle: "2px",
+      expectedDuringTransitionStyle: "2px",
+      isDiscrete: true,
+    },
     {
       property: "clear",
       keyframes: ["left", "inline-end"],
diff --git a/dom/base/test/test_domwindowutils.html b/dom/base/test/test_domwindowutils.html
index 2fc2d7685fdd..8d9f8c3f9cd0 100644
--- a/dom/base/test/test_domwindowutils.html
+++ b/dom/base/test/test_domwindowutils.html
@@ -83,6 +83,7 @@ function test_getUnanimatedComputedStyle() {
       set: [
         ["dom.animations-api.getAnimations.enabled", true],
         ["dom.animations-api.timelines.enabled", true],
+        ["layout.css.properties-and-values.enabled", true],
       ],
     },
     () => {