From 8003a4792581da1816ecb74369153a152244d748 Mon Sep 17 00:00:00 2001
From: Ryan McCahan <ryan@mccahan.net>
Date: Sat, 19 Feb 2022 09:23:47 -0700
Subject: [PATCH] Support Firefox translation of background positions

---
 src/css/types/length-percentage.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/css/types/length-percentage.ts b/src/css/types/length-percentage.ts
index ae79cb4..6837d82 100644
--- a/src/css/types/length-percentage.ts
+++ b/src/css/types/length-percentage.ts
@@ -130,6 +130,17 @@ export const getAbsoluteValue = (token: LengthPercentage, parent: number): numbe
         }
     }
 
+    // Firefox translates positions like "right 20px" as calc(100% + 20px)
+    if (token.type === TokenType.FUNCTION) {
+        if (token.name === 'calc' && token.values.length == 5) {
+            let firstValue = getAbsoluteValue(token.values[0], parent);
+            let secondValue = getAbsoluteValue(token.values[4], parent);
+
+            if (token.values[2].value == '-') return firstValue - secondValue;
+            if (token.values[2].value == '+') return firstValue + secondValue;
+        }
+    }
+
     if (isDimensionToken(token)) {
         switch (token.unit) {
             case 'rem':