From 013feb5b79fc2d01814dc113bc5ecee199bf11d8 Mon Sep 17 00:00:00 2001
From: Haowen Chen <415122975@qq.com>
Date: Mon, 3 Jun 2024 17:35:13 +0800
Subject: [PATCH] FIx test

---
 .../test/editor/core/createEditorCoreTest.ts               | 7 +++++++
 .../lib/formatHandlers/utils/color.ts                      | 2 +-
 .../test/formatHandlers/utils/colorTest.ts                 | 6 +++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
index 361612fe2aa..9c379183d05 100644
--- a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
+++ b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
@@ -129,6 +129,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -180,6 +181,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             mockedGetDarkColor,
+            undefined,
             undefined
         );
     });
@@ -213,6 +215,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -246,6 +249,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -279,6 +283,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -312,6 +317,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -345,6 +351,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts
index c3c957918a4..cabfcc8a825 100644
--- a/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts
+++ b/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts
@@ -39,7 +39,7 @@ const VARIABLE_REGEX = /^\s*var\(\s*(\-\-[a-zA-Z0-9\-_]+)\s*(?:,\s*(.*))?\)\s*$/
 const VARIABLE_PREFIX = 'var(';
 const VARIABLE_POSTFIX = ')';
 const COLOR_VAR_PREFIX = '--darkColor';
-const COLOR_VAR_ENFORCE_FALLBACK_KEY = 'fallback-color';
+const COLOR_VAR_ENFORCE_FALLBACK_KEY = `${COLOR_VAR_PREFIX}_fallback-color`;
 
 /**
  * Get color from given HTML element
diff --git a/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts b/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
index c0e968717da..bec43d7ec06 100644
--- a/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
+++ b/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
@@ -494,7 +494,7 @@ describe('setColor with darkColorHandler', () => {
 
     it('no existing color, set valid color, skip known colors, getDarkColor return null', () => {
         knownColors = {
-            white: {
+            '--darkColor_white': {
                 lightModeColor: 'white',
                 darkModeColor: 'black',
             },
@@ -518,10 +518,10 @@ describe('setColor with darkColorHandler', () => {
         setColor(darkDiv, 'white', false, true, darkColorHandler);
 
         expect(lightDiv.outerHTML).toBe(
-            '<div style="color: white; background-color: white;"></div>'
+            '<div style="background-color: white; color: white;"></div>'
         );
         expect(darkDiv.outerHTML).toBe(
-            '<div style="color: var(--darkColor_fallback-color, white); background-color: var(--darkColor_fallback-color, white);"></div>'
+            '<div style="background-color: var(--darkColor_fallback-color, white); color: var(--darkColor_fallback-color, white);"></div>'
         );
         expect(getDarkColorSpy).toHaveBeenCalledTimes(4);
         expect(updateKnownColorSpy).toHaveBeenCalledTimes(0);