Invalid value when using multiply or round methods (#9147)

packages/color/src/Color.ts

@@ -94,7 +94,7 @@ export class Color
     private static readonly HEX_PATTERN = /^(#|0x)?(([a-f0-9]{3}){1,2}([a-f0-9]{2})?)$/i;
 
     /** Internal color source, from constructor or set value */
-    private _value: Exclude<ColorSource, Color>;
+    private _value: Exclude<ColorSource, Color> | null;
 
     /** Normalized rgba component, floats from 0-1 */
     private _components: Float32Array;
@@ -148,7 +148,8 @@ export class Color
     }
 
     /**
-     * Set the current color source
+     * Set the current color source. A return value of `null` means the previous
+     * value was overridden (e.g., `multiply`, `round`).
      * @type {PIXI.ColorSource}
      */
     set value(value: ColorSource)
@@ -166,7 +167,7 @@ export class Color
             this._value = value;
         }
     }
-    get value(): Exclude<ColorSource, Color>
+    get value(): Exclude<ColorSource, Color> | null
     {
         return this._value;
     }
@@ -270,7 +271,8 @@ export class Color
     }
 
     /**
-     * Multiply with another color
+     * Multiply with another color. This action is destructive, and will
+     * override the previous `value` property to be `null`.
      * @param {PIXI.ColorSource} value - The color to multiply by.
      */
     multiply(value: ColorSource): this
@@ -283,6 +285,7 @@ export class Color
         this._components[3] *= a;
 
         this.refreshInt();
+        this._value = null;
 
         return this;
     }
@@ -326,7 +329,8 @@ export class Color
     }
 
     /**
-     * Rounds the specified color according to the step.
+     * Rounds the specified color according to the step. This action is destructive, and will
+     * override the previous `value` property to be `null`.
      * @param step - Number of steps which will be used as a cap when rounding colors
      */
     round(step: number): this
@@ -339,6 +343,7 @@ export class Color
             Math.min(255, (b / step) * step),
         ]);
         this.refreshInt();
+        this._value = null;
 
         return this;
     }

packages/color/test/Color.tests.ts

@@ -215,4 +215,19 @@ describe('Color', () =>
         expect(color.alpha).toBe(0.25);
         expect(color.toNumber()).toBe(0x3f3f3f);
     });
+
+    it('should invalidate value when multiply', () =>
+    {
+        const color = new Color(0xff0000);
+
+        expect(color.value).toBe(0xff0000);
+
+        color.multiply(0xcccccc);
+
+        expect(color.value).toBe(null);
+
+        color.setValue(0x999999);
+
+        expect(color.value).toBe(0x999999);
+    });
 });