--- a/browser/components/customizableui/test/browser.ini
+++ b/browser/components/customizableui/test/browser.ini
@@ -97,14 +97,15 @@ skip-if = os == "linux"
 [browser_984455_bookmarks_items_reparenting.js]
 skip-if = os == "linux"
 
 [browser_985815_propagate_setToolbarVisibility.js]
 [browser_981305_separator_insertion.js]
 [browser_987177_destroyWidget_xul.js]
 [browser_987177_xul_wrapper_updating.js]
 [browser_987492_window_api.js]
+[browser_987640_charEncoding.js]
 [browser_992747_toggle_noncustomizable_toolbar.js]
 [browser_993322_widget_notoolbar.js]
 [browser_995164_registerArea_during_customize_mode.js]
 [browser_996364_registerArea_different_properties.js]
 [browser_bootstrapped_custom_toolbar.js]
 [browser_panel_toggle.js]

new file mode 100644
--- /dev/null
+++ b/browser/components/customizableui/test/browser_987640_charEncoding.js
@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const TEST_PAGE = "http://mochi.test:8888/browser/browser/components/customizableui/test/support/test_967000_charEncoding_page.html";
+let newTab = null;
+
+add_task(function() {
+  info("Check Character Encoding panel functionality");
+
+  // add the Character Encoding button to the panel
+  CustomizableUI.addWidgetToArea("characterencoding-button",
+                                  CustomizableUI.AREA_PANEL);
+
+  newTab = gBrowser.addTab(TEST_PAGE);
+  yield promiseTabLoadEvent(gBrowser.selectedTab, TEST_PAGE);
+
+  yield PanelUI.show();
+  let charEncodingButton = document.getElementById("characterencoding-button");
+  charEncodingButton.click();
+
+  let characterEncodingView = document.getElementById("PanelUI-characterEncodingView");
+  let checkedButtons = characterEncodingView.querySelectorAll("toolbarbutton[checked='true']");
+  let initialEncoding = checkedButtons[0];
+  is(initialEncoding.getAttribute("label"), "Unicode", "The unicode encoding is initially selected");
+
+  // change the encoding
+  let encodings = characterEncodingView.querySelectorAll("toolbarbutton");
+  let newEncoding = encodings[0].hasAttribute("checked") ? encodings[1] : encodings[0];
+  let tabLoadPromise = promiseTabLoadEvent(gBrowser.selectedTab, TEST_PAGE);
+  newEncoding.click();
+  yield tabLoadPromise;
+
+  // check that the new encodng is applied
+  yield PanelUI.show();
+  charEncodingButton.click();
+  checkedButtons = characterEncodingView.querySelectorAll("toolbarbutton[checked='true']");
+  let selectedEncodingName = checkedButtons[0].getAttribute("label");
+  ok(selectedEncodingName != "Unicode", "The encoding was changed to " + selectedEncodingName);
+
+  // reset the initial encoding
+  yield PanelUI.show();
+  charEncodingButton.click();
+  tabLoadPromise = promiseTabLoadEvent(gBrowser.selectedTab, TEST_PAGE);
+  initialEncoding.click();
+  yield tabLoadPromise;
+  yield PanelUI.show();
+  charEncodingButton.click();
+  let checkedButtons = characterEncodingView.querySelectorAll("toolbarbutton[checked='true']");
+  is(checkedButtons[0].getAttribute("label"), "Unicode", "The encoding was reset to Unicode");
+});
+
+add_task(function asyncCleanup() {
+  // reset the panel to the default state
+  yield resetCustomization();
+  ok(CustomizableUI.inDefaultState, "The UI is in default state again.");
+
+  // remove the added tab
+  gBrowser.removeTab(newTab);
+});