Fix CSSOM inheritance (flackr#221)

Also now properly handles CSSNumericValue instances when parsing. Co-authored-by: Robert Flack <[email protected]>
johannesodland · Feb 4, 2024 · ecdca38 · ecdca38
1 parent 8b52a5c
commit ecdca38
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/src/proxy-cssom.js b/src/proxy-cssom.js
@@ -46,8 +46,20 @@ export function installCSSOM() {
     return result;
   }
 
-  class MathOperation {
+  class CSSNumericValue {
+    static parse(value) {
+      if (value instanceof CSSNumericValue) return value;
+
+      return simplifyCalculation(parseCSSNumericValue(value), {});
+    }
+
+    // TODO: Add other methods: add, sub, mul, div, …
+    // Spec: https://drafts.css-houdini.org/css-typed-om/#numeric-value
+  }
+
+  class CSSMathValue extends CSSNumericValue {
     constructor(values, operator, opt_name, opt_delimiter) {
+      super();
       privateDetails.set(this, {
         values: toCssNumericArray(values),
         operator: operator,
@@ -71,13 +83,11 @@ export function installCSSOM() {
   }
 
   const cssOMTypes = {
-    'CSSNumericValue': class {
-      static parse(value) {
-        return parseCSSNumericValue(value);
-      }
-    },
-    'CSSUnitValue': class {
+    'CSSNumericValue': CSSNumericValue,
+    'CSSMathValue': CSSMathValue,
+    'CSSUnitValue': class extends CSSNumericValue {
       constructor(value, unit) {
+        super();
         privateDetails.set(this, {
           value: value,
           unit: unit
@@ -126,13 +136,13 @@ export function installCSSOM() {
       }
     },
 
-    'CSSMathSum': class extends MathOperation  {
+    'CSSMathSum': class extends CSSMathValue  {
       constructor(values) {
         super(arguments, 'sum', 'calc', ' + ');
       }
     },
 
-    'CSSMathProduct': class extends MathOperation  {
+    'CSSMathProduct': class extends CSSMathValue  {
       constructor(values) {
         super(arguments, 'product', 'calc', ' * ');
       }
@@ -148,7 +158,7 @@ export function installCSSOM() {
       }
     },
 
-    'CSSMathNegate': class extends MathOperation {
+    'CSSMathNegate': class extends CSSMathValue {
       constructor(values) {
         super([arguments[0]], 'negate', '-');
       }
@@ -158,7 +168,7 @@ export function installCSSOM() {
       }
     },
 
-    'CSSMathInvert': class extends MathOperation {
+    'CSSMathInvert': class extends CSSMathValue {
       constructor(values) {
         super([1, arguments[0]], 'invert', 'calc', ' / ');
       }
@@ -174,13 +184,13 @@ export function installCSSOM() {
       }
     },
 
-    'CSSMathMax': class extends MathOperation {
+    'CSSMathMax': class extends CSSMathValue {
       constructor() {
         super(arguments, 'max');
       }
     },
 
-    'CSSMathMin': class extends MathOperation  {
+    'CSSMathMin': class extends CSSMathValue  {
       constructor() {
         super(arguments, 'min');
       }
@@ -237,10 +247,10 @@ export function installCSSOM() {
     });
   }
 
-  for (let type in cssOMTypes) {
+  for (let [type, value] of Object.entries(cssOMTypes)) {
     if (type in window)
       continue;
-    if (!Reflect.defineProperty(window, type, { value: cssOMTypes[type] }))
+    if (!Reflect.defineProperty(window, type, { value }))
       throw Error(`Error installing CSSOM support for ${type}`);
   }
 }