diff --git a/src/extensions/default/DebugCommands/MacroRunner.js b/src/extensions/default/DebugCommands/MacroRunner.js
index 4201c82d5..020b5012d 100644
--- a/src/extensions/default/DebugCommands/MacroRunner.js
+++ b/src/extensions/default/DebugCommands/MacroRunner.js
@@ -50,6 +50,7 @@ define(function (require, exports, module) {
         KeyEvent = brackets.getModule("utils/KeyEvent"),
         Commands = brackets.getModule("command/Commands"),
         FileSystem = brackets.getModule("filesystem/FileSystem"),
+        MainViewManager = brackets.getModule("view/MainViewManager"),
         FileUtils   = brackets.getModule("file/FileUtils"),
         PreferencesManager  = brackets.getModule("preferences/PreferencesManager"),
         Editor = brackets.getModule("editor/Editor"),
@@ -425,6 +426,14 @@ define(function (require, exports, module) {
         return PreferencesManager.get(key);
     }
 
+    // Helper function to get full path (reusing existing openFile logic)
+    function _getFullPath(filePath) {
+        if(filePath.startsWith('/')) {
+            return filePath;
+        }
+        return path.join(ProjectManager.getProjectRoot().fullPath, filePath);
+    }
+
     const EDITING = {
         setEditorSpacing: function (useTabs, spaceOrTabCount, isAutoMode) {
             const activeEditor = EditorManager.getActiveEditor();
@@ -442,6 +451,85 @@ define(function (require, exports, module) {
             } else {
                 Editor.Editor.setSpaceUnits(spaceOrTabCount, fullPath);
             }
+        },
+        /**
+         * Split the editor pane vertically
+         */
+        splitVertical: function() {
+            CommandManager.execute(Commands.CMD_SPLITVIEW_VERTICAL);
+        },
+
+        /**
+         * Split the editor pane horizontally
+         */
+        splitHorizontal: function() {
+            CommandManager.execute(Commands.CMD_SPLITVIEW_HORIZONTAL);
+        },
+
+        /**
+         * Remove split pane and return to single pane view
+         */
+        splitNone: function() {
+            CommandManager.execute(Commands.CMD_SPLITVIEW_NONE);
+        },
+        /**
+         * Gets the editor in the first pane (left/top)
+         * @return {?Editor} The editor in first pane or null if not available
+         */
+        getFirstPaneEditor: function() {
+            return MainViewManager.getCurrentlyViewedEditor("first-pane");
+        },
+
+        /**
+         * Gets the editor in the second pane (right/bottom)
+         * @return {?Editor} The editor in second pane or null if not available
+         */
+        getSecondPaneEditor: function() {
+            return MainViewManager.getCurrentlyViewedEditor("second-pane");
+        },
+
+        /**
+         * Checks if the view is currently split
+         * @return {boolean} True if view is split, false otherwise
+         */
+        isSplit: function() {
+            return MainViewManager.getPaneCount() > 1;
+        },
+        /**
+         * Opens a file in the first pane (left/top)
+         * @param {string} filePath - Project relative or absolute file path
+         * @returns {Promise} A promise that resolves when the file is opened
+         */
+        openFileInFirstPane: function(filePath) {
+            return jsPromise(CommandManager.execute(Commands.FILE_OPEN, {
+                fullPath: _getFullPath(filePath),
+                paneId: "first-pane"
+            }));
+        },
+
+        /**
+         * Opens a file in the second pane (right/bottom)
+         * @param {string} filePath - Project relative or absolute file path
+         * @returns {Promise} A promise that resolves when the file is opened
+         */
+        openFileInSecondPane: function(filePath) {
+            return jsPromise(CommandManager.execute(Commands.FILE_OPEN, {
+                fullPath: _getFullPath(filePath),
+                paneId: "second-pane"
+            }));
+        },
+        /**
+         * Focus the first pane (left/top)
+         */
+        focusFirstPane: function() {
+            MainViewManager.setActivePaneId("first-pane");
+        },
+
+        /**
+         * Focus the second pane (right/bottom)
+         */
+        focusSecondPane: function() {
+            MainViewManager.setActivePaneId("second-pane");
         }
     };
 
diff --git a/test/spec/Extn-CSSColorPreview-integ-test.js b/test/spec/Extn-CSSColorPreview-integ-test.js
index 0ab3c5cee..e8ae50b04 100644
--- a/test/spec/Extn-CSSColorPreview-integ-test.js
+++ b/test/spec/Extn-CSSColorPreview-integ-test.js
@@ -19,7 +19,7 @@
  *
  */
 
-/*global describe, it, expect, beforeAll, afterAll, beforeEach, awaitsForDone, awaits, awaitsFor, path, jsPromise */
+/*global describe, it, beforeAll, afterAll*/
 
 define(function (require, exports, module) {
 
@@ -48,6 +48,7 @@ define(function (require, exports, module) {
 
         afterAll(async function () {
             await __PR.closeAll();
+            await __PR.EDITING.splitNone();
             testWindow    = null;
             __PR          = null;
             EditorManager = null;
@@ -277,8 +278,6 @@ define(function (require, exports, module) {
                 _verifyExpectedColors(editor, [8, 11, 12, 13, 14, 15]);
                 await __PR.closeFile();
             });
-
-            // todo test preference change, multi pane tests
         }
 
         const htmlFiles = ["a.html", "a.htm", "a.xhtml", "a.php", "a.jsp", "a.jsx", "a.tsx"];
@@ -289,5 +288,36 @@ define(function (require, exports, module) {
         for (let cssFile of cssFiles){
             testFile("base.css", cssFile);
         }
+
+        it(`Changing preferences should enable or disable the color box`, async function () {
+            const htmlText = await __PR.readTextFile("base.html");
+            await __PR.writeTextFile("b.html", htmlText, true);
+            await __PR.writeTextFile("c.html", htmlText, true);
+            await __PR.EDITING.splitVertical();
+            await __PR.EDITING.openFileInSecondPane("b.html");
+            await __PR.EDITING.openFileInFirstPane("c.html");
+            __PR.EDITING.focusFirstPane();
+            let editor = EditorManager.getActiveEditor();
+            __PR.validateEqual(editor.isGutterActive(GUTTER_NAME), true);
+            validateSingleColor(editor, 8, "blue");
+
+            __PR.setPreference("colorPreview", false);
+            __PR.validateEqual(editor.isGutterActive(GUTTER_NAME), false);
+            validateNoColors(editor, 8);
+            __PR.EDITING.focusSecondPane();
+            editor = EditorManager.getActiveEditor();
+            __PR.validateEqual(editor.isGutterActive(GUTTER_NAME), false);
+            validateNoColors(editor, 8);
+
+            __PR.setPreference("colorPreview", true);
+            __PR.validateEqual(editor.isGutterActive(GUTTER_NAME), true);
+            validateSingleColor(editor, 8, "blue");
+            __PR.EDITING.focusSecondPane();
+            editor = EditorManager.getActiveEditor();
+            __PR.validateEqual(editor.isGutterActive(GUTTER_NAME), true);
+            validateSingleColor(editor, 8, "blue");
+
+            await __PR.closeFile();
+        });
     });
 });