From 00d4ea331d0b843c47f31c08ddade2c3384ff14e Mon Sep 17 00:00:00 2001
From: "Carsten \"Tomcat\" Book" <cbook@mozilla.com>
Date: Mon, 22 May 2017 15:45:31 +0200
Subject: [PATCH] Backed out changeset bbb688fe1ba3 (bug 1365614)

---
 .../general/browser_tab_dragdrop2_frame1.xul  |  4 +-
 .../test/static/browser_parsable_css.js       |  4 --
 devtools/client/responsive.html/index.css     |  2 +-
 .../sourceeditor/test/browser_css_getInfo.js  |  4 +-
 .../test/css_statemachine_testcases.css       |  6 +--
 .../test/css_statemachine_tests.json          |  3 --
 devtools/client/themes/animationinspector.css |  2 +-
 .../client/themes/commandline-browser.css     |  7 ++--
 devtools/client/themes/common.css             |  6 +--
 devtools/client/themes/debugger.css           |  4 +-
 devtools/client/themes/devtools-browser.css   |  2 +-
 .../themes/floating-scrollbars-dark-theme.css |  6 +--
 .../floating-scrollbars-responsive-design.css |  6 +--
 devtools/client/themes/new-webconsole.css     |  2 +-
 devtools/client/themes/responsivedesign.css   | 22 +++++-----
 devtools/client/themes/shadereditor.css       |  4 +-
 devtools/client/themes/splitters.css          |  2 +-
 devtools/client/themes/toolbars.css           |  8 ++--
 devtools/client/themes/toolbox.css            |  2 +-
 devtools/client/themes/tooltips.css           |  2 +-
 devtools/client/themes/webaudioeditor.css     |  2 +-
 devtools/client/themes/webconsole.css         |  2 +-
 devtools/client/themes/widgets.css            |  6 +--
 .../shared/css/generated/properties-db.js     | 41 +++++++++++++++++++
 .../mozilla/file_discrete-animations.html     |  5 ---
 .../test/test_caretPositionFromPoint.html     |  2 +-
 dom/events/test/bug656379-1.html              |  2 +-
 dom/events/test/test_bug864040.html           |  2 +-
 .../reftests/autofocus/input-number-ref.html  |  2 +-
 dom/html/reftests/autofocus/input-number.html |  2 +-
 .../reftests/autofocus/input-time-ref.html    |  2 +-
 dom/html/reftests/autofocus/input-time.html   |  2 +-
 ...st_input_textarea_set_value_no_scroll.html |  4 +-
 .../mochitest/general/test_focusrings.xul     |  2 +-
 dom/tests/mochitest/general/test_offsets.xul  |  4 +-
 editor/libeditor/tests/test_bug1053048.html   |  2 +-
 editor/reftests/xul/input.css                 |  2 +-
 gfx/src/nsThemeConstants.h                    |  3 ++
 gfx/tests/crashtests/crashtests.list          |  6 +--
 layout/base/GeckoRestyleManager.cpp           |  6 +--
 layout/base/RestyleManager.cpp                |  2 +-
 layout/base/crashtests/crashtests.list        |  2 +-
 layout/base/nsCSSFrameConstructor.cpp         |  2 +-
 layout/base/nsLayoutUtils.cpp                 |  6 +--
 layout/base/tests/bug106855-1-ref.html        |  2 +-
 layout/base/tests/bug106855-1.html            |  2 +-
 layout/base/tests/bug106855-2.html            |  2 +-
 layout/base/tests/bug1237236-1-ref.html       |  2 +-
 layout/base/tests/bug1237236-1.html           |  2 +-
 layout/base/tests/bug1258308-1-ref.html       |  2 +-
 layout/base/tests/bug1258308-1.html           |  2 +-
 layout/base/tests/bug1259949-1-ref.html       |  2 +-
 layout/base/tests/bug1259949-1.html           |  2 +-
 layout/base/tests/bug240933-1-ref.html        |  2 +-
 layout/base/tests/bug240933-1.html            |  2 +-
 layout/base/tests/bug240933-2.html            |  2 +-
 layout/base/tests/bug585922-ref.html          |  2 +-
 layout/base/tests/bug585922.html              |  2 +-
 layout/base/tests/bug597519-1-ref.html        |  2 +-
 layout/base/tests/bug597519-1.html            |  2 +-
 layout/base/tests/bug612271-1.html            |  2 +-
 layout/base/tests/bug612271-2.html            |  2 +-
 layout/base/tests/bug612271-3.html            |  2 +-
 layout/base/tests/bug612271-ref.html          |  2 +-
 layout/base/tests/bug613807-1-ref.html        |  2 +-
 layout/base/tests/bug613807-1.html            |  2 +-
 layout/base/tests/bug634406-1-ref.html        |  2 +-
 layout/base/tests/bug634406-1.html            |  2 +-
 layout/base/tests/bug646382-1-ref.html        |  2 +-
 layout/base/tests/bug646382-1.html            |  2 +-
 layout/base/tests/bug646382-2-ref.html        |  2 +-
 layout/base/tests/bug646382-2.html            |  2 +-
 layout/base/tests/bug664087-1-ref.html        |  2 +-
 layout/base/tests/bug664087-1.html            |  2 +-
 layout/base/tests/bug664087-2-ref.html        |  2 +-
 layout/base/tests/bug664087-2.html            |  2 +-
 .../chrome_content_integration_window.xul     |  2 +-
 layout/base/tests/test_bug332655-1.html       |  2 +-
 layout/base/tests/test_bug332655-2.html       |  2 +-
 layout/base/tests/test_bug499538-1.html       |  2 +-
 layout/base/tests/test_bug644768.html         |  2 +-
 layout/forms/crashtests/1102791.html          |  2 +-
 layout/forms/crashtests/crashtests.list       |  4 +-
 layout/forms/nsButtonFrameRenderer.cpp        |  4 +-
 layout/forms/nsComboboxControlFrame.cpp       |  6 +--
 layout/forms/nsFormControlFrame.cpp           |  8 ++--
 layout/forms/nsMeterFrame.cpp                 |  4 +-
 layout/forms/nsNumberControlFrame.cpp         |  6 +--
 layout/forms/nsProgressFrame.cpp              |  4 +-
 layout/forms/nsRangeFrame.cpp                 |  4 +-
 layout/forms/test/bug665540_window.xul        |  2 +-
 layout/forms/test/test_bug476308.html         |  2 +-
 layout/forms/test/test_textarea_resize.html   |  2 +-
 layout/generic/ReflowInput.cpp                |  4 +-
 layout/generic/crashtests/crashtests.list     | 10 ++---
 layout/generic/nsFlexContainerFrame.cpp       |  2 +-
 layout/generic/nsFrame.cpp                    | 18 ++++----
 layout/generic/nsIFrame.h                     |  6 +--
 .../test/test_selection_preventDefault.html   |  2 +-
 layout/painting/nsCSSRendering.cpp            | 26 ++++++------
 layout/painting/nsDisplayList.cpp             | 14 +++----
 layout/reftests/abs-pos/button-1.html         |  2 +-
 layout/reftests/abs-pos/button-2.html         |  2 +-
 .../box-shadow/boxshadow-button-ref.html      |  2 +-
 .../reftests/box-shadow/boxshadow-button.html |  2 +-
 layout/reftests/bugs/180085-1-ref.html        |  2 +-
 layout/reftests/bugs/180085-1.html            |  2 +-
 layout/reftests/bugs/180085-2-ref.html        |  2 +-
 layout/reftests/bugs/180085-2.html            |  2 +-
 layout/reftests/bugs/363858-2-ref.html        |  2 +-
 layout/reftests/bugs/363858-2.html            |  2 +-
 layout/reftests/bugs/363858-4-ref.html        |  2 +-
 layout/reftests/bugs/363858-4.html            |  2 +-
 layout/reftests/bugs/363858-6-ref.html        |  2 +-
 layout/reftests/bugs/363858-6a.html           |  2 +-
 layout/reftests/bugs/363858-6b.html           |  2 +-
 layout/reftests/bugs/373381-2-ref.html        |  6 +--
 layout/reftests/bugs/373381-2.html            |  6 +--
 layout/reftests/bugs/373381-4-ref.html        |  6 +--
 layout/reftests/bugs/373381-4.html            |  6 +--
 layout/reftests/bugs/423599-1-ref.html        |  2 +-
 layout/reftests/bugs/423599-1.html            |  2 +-
 layout/reftests/bugs/468473-1-ref.xul         |  2 +-
 layout/reftests/bugs/468473-1.xul             |  2 +-
 layout/reftests/bugs/474336-1-ref.xul         |  4 +-
 layout/reftests/bugs/474336-1.xul             |  4 +-
 layout/reftests/bugs/491180-1-ref.html        |  2 +-
 layout/reftests/bugs/491180-1.html            |  2 +-
 layout/reftests/bugs/491180-2-ref.html        |  2 +-
 layout/reftests/bugs/491180-2.html            |  2 +-
 layout/reftests/bugs/491323-1-ref.xul         |  2 +-
 layout/reftests/bugs/491323-1.xul             |  2 +-
 layout/reftests/bugs/542116-1-ref.html        |  2 +-
 layout/reftests/bugs/542116-1.html            |  2 +-
 layout/reftests/bugs/542116-2-ref.html        |  2 +-
 layout/reftests/bugs/542116-2.html            |  2 +-
 layout/reftests/bugs/664127-1.css             |  2 +-
 layout/reftests/bugs/668319-1.xul             |  2 +-
 layout/reftests/bugs/966992-1-ref.html        |  4 +-
 layout/reftests/bugs/966992-1.html            |  4 +-
 layout/reftests/css-enabled/select/style.css  |  2 +-
 layout/reftests/css-invalid/input/style.css   |  2 +-
 .../css-placeholder/input/style-shown.css     |  4 +-
 .../css-placeholder/textarea/style-shown.css  |  4 +-
 layout/reftests/flexbox/reftest.list          |  2 +-
 .../forms/button/percent-height-child.html    |  2 +-
 .../forms/button/percent-width-child.html     |  2 +-
 layout/reftests/forms/button/reftest.list     |  2 +-
 .../forms/button/vertical-centering.html      |  2 +-
 .../forms/button/width-auto-size-em-ltr.html  |  2 +-
 .../forms/button/width-auto-size-em-rtl.html  |  2 +-
 .../forms/button/width-auto-size-ltr.html     |  2 +-
 .../forms/button/width-auto-size-rtl.html     |  2 +-
 .../width-erode-all-focuspadding-rtl.html     |  2 +-
 .../forms/button/width-exact-fit-ltr.html     |  2 +-
 .../forms/button/width-exact-fit-rtl.html     |  2 +-
 .../input/checkbox/checkbox-baseline.html     |  2 +-
 .../checkbox/checked-appearance-none.html     |  2 +-
 .../indeterminate-checked-notref.html         |  2 +-
 .../input/checkbox/indeterminate-checked.html |  2 +-
 .../indeterminate-unchecked-notref.html       |  2 +-
 .../checkbox/indeterminate-unchecked.html     |  2 +-
 .../checkbox/unchecked-appearance-none.html   |  2 +-
 .../reftests/forms/input/color/reftest.list   |  2 +-
 .../from-time-to-other-type-unthemed-ref.html |  2 +-
 .../from-time-to-other-type-unthemed.html     |  2 +-
 .../datetime/time-simple-unthemed-ref.html    |  2 +-
 .../input/datetime/time-simple-unthemed.html  |  2 +-
 .../to-time-from-other-type-unthemed.html     |  2 +-
 layout/reftests/forms/input/file/style.css    |  2 +-
 .../input/number/focus-handling-ref.html      |  4 +-
 .../forms/input/number/focus-handling.html    |  4 +-
 ...m-number-to-other-type-unthemed-1-ref.html |  2 +-
 .../from-number-to-other-type-unthemed-1.html |  2 +-
 .../number/not-other-type-unthemed-1.html     |  2 +-
 .../not-other-type-unthemed-1a-notref.html    |  2 +-
 .../not-other-type-unthemed-1b-notref.html    |  2 +-
 .../input/number/number-auto-width-1-ref.html |  2 +-
 .../input/number/number-auto-width-1.html     |  2 +-
 .../input/number/number-disabled-ref.html     |  2 +-
 .../forms/input/number/number-disabled.html   |  2 +-
 .../number/number-pseudo-elements-ref.html    |  2 +-
 .../input/number/number-pseudo-elements.html  |  2 +-
 .../number-same-as-text-unthemed-ref.html     |  2 +-
 .../number/number-same-as-text-unthemed.html  |  2 +-
 .../number-similar-to-text-unthemed-ref.html  |  2 +-
 ...mber-similar-to-text-unthemed-rtl-ref.html |  2 +-
 .../number-similar-to-text-unthemed-rtl.html  |  2 +-
 ...ilar-to-text-unthemed-vertical-lr-ref.html |  2 +-
 ...-similar-to-text-unthemed-vertical-lr.html |  2 +-
 ...ilar-to-text-unthemed-vertical-rl-ref.html |  2 +-
 ...-similar-to-text-unthemed-vertical-rl.html |  2 +-
 .../number-similar-to-text-unthemed.html      |  2 +-
 .../reftests/forms/input/number/reftest.list  | 10 ++---
 .../forms/input/number/show-value-ref.html    |  2 +-
 .../forms/input/number/show-value.html        |  2 +-
 ...number-from-other-type-unthemed-1-ref.html |  2 +-
 .../to-number-from-other-type-unthemed-1.html |  2 +-
 .../input/radio/checked-appearance-none.html  |  2 +-
 .../radio/unchecked-appearance-none.html      |  2 +-
 .../range/75pct-unthemed-common-ref.html      |  2 +-
 ...t-fraction-of-range-unthemed-1-notref.html |  2 +-
 ...ifferent-fraction-of-range-unthemed-1.html |  2 +-
 .../input/range/direction-unthemed-1-ref.html |  2 +-
 .../input/range/direction-unthemed-1.html     |  2 +-
 ...om-range-to-other-type-unthemed-1-ref.html |  2 +-
 .../from-range-to-other-type-unthemed-1.html  |  2 +-
 .../range/not-other-type-unthemed-1.html      |  2 +-
 .../not-other-type-unthemed-1a-notref.html    |  2 +-
 .../not-other-type-unthemed-1b-notref.html    |  2 +-
 .../not-other-type-unthemed-1c-notref.html    |  2 +-
 ...same-fraction-of-range-unthemed-1-ref.html |  2 +-
 .../same-fraction-of-range-unthemed-1.html    |  2 +-
 .../forms/input/range/stepDown-unthemed.html  |  2 +-
 .../forms/input/range/stepUp-unthemed.html    |  2 +-
 ...-range-from-other-type-unthemed-1-ref.html |  2 +-
 .../to-range-from-other-type-unthemed-1.html  |  2 +-
 .../input/range/value-prop-unthemed.html      |  2 +-
 .../range/valueAsNumber-prop-unthemed.html    |  2 +-
 .../forms/meter/default-style/style.css       |  2 +-
 layout/reftests/forms/meter/style.css         |  2 +-
 layout/reftests/forms/progress/reftest.list   |  3 ++
 layout/reftests/forms/progress/style.css      |  6 +--
 .../forms/select/focusring-1-ref.html         |  2 +-
 layout/reftests/forms/select/focusring-1.html |  2 +-
 .../forms/select/focusring-2-ref.html         |  2 +-
 layout/reftests/forms/select/focusring-2.html |  2 +-
 .../forms/select/focusring-3-ref.html         |  2 +-
 layout/reftests/forms/select/focusring-3.html |  2 +-
 .../forms/select/vertical-centering-ref.html  |  2 +-
 .../forms/select/vertical-centering.html      |  2 +-
 .../reftests/forms/textarea/resize-ref.html   |  2 +-
 layout/reftests/forms/textarea/resize.html    |  2 +-
 .../setvalue-framereconstruction-1.html       |  2 +-
 .../setvalue-framereconstruction-ref.html     |  2 +-
 .../forms/textbox/accesskey-1-notref.xul      |  2 +-
 layout/reftests/forms/textbox/accesskey-1.xul |  2 +-
 .../forms/textbox/accesskey-2-ref.xul         |  2 +-
 layout/reftests/forms/textbox/accesskey-2.xul |  2 +-
 .../forms/textbox/accesskey-3-notref.xul      |  2 +-
 .../forms/textbox/accesskey-3-ref.xul         |  2 +-
 layout/reftests/forms/textbox/accesskey-3.xul |  2 +-
 .../forms/textbox/accesskey-4-notref.xul      |  2 +-
 .../forms/textbox/accesskey-4-ref.xul         |  2 +-
 layout/reftests/forms/textbox/accesskey-4.xul |  2 +-
 .../forms/textbox/align-baseline-1-ref.xul    |  2 +-
 .../forms/textbox/align-baseline-1.xul        |  2 +-
 layout/reftests/forms/textbox/reftest.list    |  2 +-
 .../button-nonnative-when-styled-ref.html     | 22 +++++-----
 .../native-theme/button-nonnative.html        |  2 +-
 .../native-theme/checkbox-nonnative.html      |  2 +-
 .../combobox-nonnative-when-styled-ref.html   | 22 +++++-----
 .../native-theme/combobox-nonnative.html      |  2 +-
 .../listbox-nonnative-when-styled-ref.html    | 22 +++++-----
 .../native-theme/listbox-nonnative.html       |  2 +-
 ...ive-theme-disabled-cascade-levels-ref.html |  8 ++--
 .../native-theme/radio-nonnative.html         |  2 +-
 layout/reftests/native-theme/reftest.list     |  8 ++--
 .../text-input-nonnative-when-styled-ref.html | 34 +++++++--------
 .../native-theme/text-input-nonnative.html    |  2 +-
 .../textarea-nonnative-when-styled-ref.html   | 22 +++++-----
 .../native-theme/textarea-nonnative.html      |  2 +-
 .../svg/foreignObject-form-no-theme.svg       |  4 +-
 layout/reftests/svg/reftest.list              |  2 +-
 ...erline-block-propagation-2-quirks-ref.html |  2 +-
 .../underline-block-propagation-2-quirks.html |  2 +-
 ...ine-block-propagation-2-standards-ref.html |  2 +-
 ...derline-block-propagation-2-standards.html |  2 +-
 .../text-overflow/combobox-zoom-ref.html      |  2 +-
 .../reftests/text-overflow/combobox-zoom.html |  2 +-
 .../text/control-chars-01-notref.html         |  2 +-
 layout/reftests/text/control-chars-01a.html   |  2 +-
 layout/reftests/text/control-chars-01b.html   |  2 +-
 layout/reftests/text/control-chars-01c.html   |  2 +-
 layout/reftests/text/control-chars-01d.html   |  2 +-
 .../unicode/unicode-attribute-selector.html   |  2 +-
 .../unicode/unicode-element-selector.html     |  2 +-
 layout/reftests/unicode/unicode-lang.html     |  2 +-
 .../unicode/unicode-pseudo-selector.html      |  2 +-
 layout/reftests/unicode/unicode-ref.html      |  2 +-
 ...38356-1-button-contents-alignment-ref.html |  2 +-
 .../1138356-1-button-contents-alignment.html  |  2 +-
 ...56-2-button-contents-alignment-notref.html |  2 +-
 .../1138356-2-button-contents-alignment.html  |  2 +-
 layout/reftests/writing-mode/reftest.list     |  2 +-
 .../writing-mode/ua-style-sheet-button-1.html |  2 +-
 .../ua-style-sheet-button-1a-ref.html         |  2 +-
 .../ua-style-sheet-button-1b-ref.html         |  2 +-
 .../ua-style-sheet-input-color-1-ref.html     |  2 +-
 .../ua-style-sheet-input-color-1.html         |  2 +-
 layout/style/nsCSSPropAliasList.h             |  5 +++
 layout/style/nsCSSPropList.h                  | 18 ++++++--
 layout/style/nsCSSProps.cpp                   |  6 +++
 layout/style/nsCSSProps.h                     |  1 +
 layout/style/nsComputedDOMStyle.cpp           |  8 ++++
 layout/style/nsComputedDOMStyle.h             |  1 +
 layout/style/nsComputedDOMStylePropertyList.h |  3 +-
 layout/style/nsRuleNode.cpp                   | 11 ++++-
 layout/style/nsStyleStruct.cpp                | 13 +++---
 layout/style/nsStyleStruct.h                  | 14 +++++++
 layout/style/res/forms.css                    |  2 +-
 layout/style/test/property_database.js        | 39 ++++++++++++++----
 .../style/test/test_pseudoelement_state.html  | 14 +++----
 layout/svg/crashtests/crashtests.list         |  4 +-
 layout/tables/nsTableCellFrame.cpp            |  2 +-
 layout/tables/nsTableFrame.cpp                |  2 +-
 layout/xul/crashtests/189814-1.xul            |  2 +-
 layout/xul/nsBox.cpp                          | 18 ++++----
 layout/xul/nsBoxFrame.cpp                     |  2 +-
 layout/xul/nsImageBoxFrame.cpp                |  6 +--
 layout/xul/nsMenuPopupFrame.cpp               |  2 +-
 layout/xul/reftest/reftest.list               |  4 +-
 layout/xul/test/test_bug563416.html           |  2 +-
 layout/xul/test/test_windowminmaxsize.xul     |  8 ++--
 layout/xul/tree/nsTreeBodyFrame.cpp           | 20 ++++-----
 modules/libpref/init/all.js                   |  4 ++
 .../tests/chrome/test_contextmenu_list.xul    |  2 +-
 .../content/tests/chrome/test_position.xul    |  6 +--
 toolkit/content/tests/chrome/window_panel.xul |  4 +-
 .../tests/chrome/window_popup_anchor.xul      |  2 +-
 .../content/tests/chrome/window_tooltip.xul   |  6 +--
 toolkit/content/tests/reftests/reftest.list   |  2 +-
 toolkit/themes/osx/reftests/baseline.xul      |  2 +-
 toolkit/themes/osx/reftests/reftest.list      |  6 +--
 view/crashtests/crashtests.list               |  2 +-
 widget/cocoa/crashtests/crashtests.list       |  8 ++--
 widget/cocoa/nsNativeThemeCocoa.mm            | 18 ++++----
 widget/crashtests/crashtests.list             |  2 +-
 widget/gtk/crashtests/crashtests.list         |  2 +-
 widget/nsNativeTheme.cpp                      |  4 +-
 .../meter-fallback-default-style-ref.html     |  4 +-
 .../meter-fallback-default-style.html         |  4 +-
 ...rogressbar-fallback-default-style-ref.html |  8 ++--
 .../progressbar-fallback-default-style.html   |  4 +-
 widget/reftests/reftest.list                  |  8 ++--
 widget/windows/nsNativeThemeWin.cpp           |  2 +-
 336 files changed, 695 insertions(+), 574 deletions(-)

diff --git a/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul b/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
index d11709942ac0..cd33d58ac9fd 100644
--- a/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
+++ b/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
@@ -91,8 +91,8 @@ function createPanel(attrs)
   button.label = "OK";
   button.width = 120;
   button.height = 40;
-  button.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
-  panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  button.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
+  panel.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
 
diff --git a/browser/base/content/test/static/browser_parsable_css.js b/browser/base/content/test/static/browser_parsable_css.js
index e24a8ee62fb0..44b024b72ed1 100644
--- a/browser/base/content/test/static/browser_parsable_css.js
+++ b/browser/base/content/test/static/browser_parsable_css.js
@@ -20,10 +20,6 @@ let whitelist = [
   {sourceName: /web\/viewer\.css$/i,
    errorMessage: /Unknown pseudo-class.*(fullscreen|selection)/i,
    isFromDevTools: false},
-  // PDFjs rules needed for compat with other UAs.
-  {sourceName: /web\/viewer\.css$/i,
-   errorMessage: /Unknown property.*appearance/i,
-   isFromDevTools: false},
   // Tracked in bug 1004428.
   {sourceName: /aboutaccounts\/(main|normalize)\.css$/i,
    isFromDevTools: false},
diff --git a/devtools/client/responsive.html/index.css b/devtools/client/responsive.html/index.css
index 12966cd3a6d4..26884948a06d 100644
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -80,7 +80,7 @@ body,
 }
 
 select {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   -moz-context-properties: fill;
diff --git a/devtools/client/sourceeditor/test/browser_css_getInfo.js b/devtools/client/sourceeditor/test/browser_css_getInfo.js
index 9028d8fea189..7fdf80e8e2d8 100644
--- a/devtools/client/sourceeditor/test/browser_css_getInfo.js
+++ b/devtools/client/sourceeditor/test/browser_css_getInfo.js
@@ -9,14 +9,14 @@ const CSSCompleter =
 
 const source = [
   ".devtools-toolbar {",
-  "  -moz-appearance: none;",
+  "  -moz-appearance: none; appearance: none;",
   "           padding:4px 3px;border-bottom-width: 1px;",
   "  border-bottom-style: solid;",
   "}",
   "",
   "#devtools-menu.devtools-menulist,",
   ".devtools-toolbarbutton#devtools-menu {",
-  "  -moz-appearance: none;",
+  "  -moz-appearance: none; appearance: none;",
   "  -moz-box-align: center;",
   "  min-width: 78px;",
   "  min-height: 22px;",
diff --git a/devtools/client/sourceeditor/test/css_statemachine_testcases.css b/devtools/client/sourceeditor/test/css_statemachine_testcases.css
index b3149030fd3b..c7a7429b34f8 100644
--- a/devtools/client/sourceeditor/test/css_statemachine_testcases.css
+++ b/devtools/client/sourceeditor/test/css_statemachine_testcases.css
@@ -3,14 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .devtools-toolbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
            padding:4px 3px;border-bottom-width: 1px;
   border-bottom-style: solid;
 }
 
 #devtools-menu.devtools-menulist,
 .devtools-toolbarbutton#devtools-menu {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
@@ -64,7 +64,7 @@
 }
 
 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 
 .devtools-sidebar-tabs > tabs > tab:first-of-type {
diff --git a/devtools/client/sourceeditor/test/css_statemachine_tests.json b/devtools/client/sourceeditor/test/css_statemachine_tests.json
index abe69f19e97e..66c819cb9162 100644
--- a/devtools/client/sourceeditor/test/css_statemachine_tests.json
+++ b/devtools/client/sourceeditor/test/css_statemachine_tests.json
@@ -19,8 +19,6 @@
   "tests": [
     [[0, 10], ["null", "", "", ""]],
     [[4,  3], ["selector", "class", "de", ".de"]],
-    [[5,  8], ["property", "null", "-moz-a"]],
-    [[5, 21], ["value", "null", "no", "-moz-appearance"]],
     [[6, 18], ["property", "null", "padding"]],
     [[6, 24], ["value", "null", "3", "padding"]],
     [[6, 29], ["property", "null", "bo"]],
@@ -31,7 +29,6 @@
     [[10, 17], ["selector", "class", "de", "#devtools-menu.de"]],
     [[11,  5], ["selector", "class", "devt", ".devt"]],
     [[11, 30], ["selector", "id", "devtoo", ".devtools-toolbarbutton#devtoo"]],
-    [[12, 10], ["property", "null", "-moz-app"]],
     [[16, 27], ["value", "null", "hsl", "text-shadow"]],
     [[19, 24], ["value", "null", "linear-gra", "background"]],
     [[19, 55], ["value", "null", "hsl", "background"]],
diff --git a/devtools/client/themes/animationinspector.css b/devtools/client/themes/animationinspector.css
index d767dff12154..7e4f8863ca4a 100644
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -214,7 +214,7 @@ body {
 }
 
 #timeline-rate select.devtools-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   text-align: center;
   font-family: inherit;
   color: var(--theme-body-color);
diff --git a/devtools/client/themes/commandline-browser.css b/devtools/client/themes/commandline-browser.css
index 110b24fa9b39..17664332cb72 100644
--- a/devtools/client/themes/commandline-browser.css
+++ b/devtools/client/themes/commandline-browser.css
@@ -34,7 +34,7 @@
 }
 
 #developer-toolbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   padding: 0;
   min-height: 32px;
   background-color: var(--gcli-background-color);
@@ -42,7 +42,7 @@
 }
 
 #developer-toolbar > toolbarbutton {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: none;
   background-color: transparent;
   margin: 0;
@@ -123,6 +123,7 @@ html|*#gcli-output-frame {
   border-width: 0;
   background-color: transparent;
   -moz-appearance: none;
+  appearance: none;
 
   /* We always wanted this to be a percentage of the viewport size but width: x% does not
    * work. vw is the obvious solution.
@@ -145,7 +146,7 @@ html|*#gcli-output-frame {
 }
 
 .gclitoolbar-input-node {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: var(--gcli-input-color);
   background-color: var(--gcli-input-background);
   background-repeat: no-repeat;
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
index 3ce90000ab84..8f9550156532 100644
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -70,7 +70,7 @@ html|button, html|select {
 }
 
 .devtools-autocomplete-listbox {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   background-color: transparent;
   border-width: 0px !important;
   margin: 0;
@@ -229,7 +229,7 @@ checkbox:-moz-focusring {
 .devtools-menulist,
 .devtools-toolbarbutton,
 .devtools-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   border: 1px solid var(--toolbarbutton-border-color);
   border-radius: 2px;
@@ -383,7 +383,7 @@ checkbox:-moz-focusring {
 .devtools-textinput,
 .devtools-searchinput,
 .devtools-filterinput {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   margin: 1px 3px;
   border: 1px solid;
   border-radius: 2px;
diff --git a/devtools/client/themes/debugger.css b/devtools/client/themes/debugger.css
index 3f2d49a0fa05..572299345272 100644
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -62,7 +62,7 @@
 /* Firebug theme uses breakpoint icon istead of a checkbox */
 
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: none;
   background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%;
 }
@@ -327,7 +327,7 @@
 }
 
 .dbg-expression-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: none;
   background: none;
   text-decoration: underline;
diff --git a/devtools/client/themes/devtools-browser.css b/devtools/client/themes/devtools-browser.css
index 59712e0c7814..68af7bfa0d80 100644
--- a/devtools/client/themes/devtools-browser.css
+++ b/devtools/client/themes/devtools-browser.css
@@ -20,7 +20,7 @@
 
 .devtools-eyedropper-panel {
   pointer-events: none;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   width: 156px;
   height: 120px;
   background-color: transparent;
diff --git a/devtools/client/themes/floating-scrollbars-dark-theme.css b/devtools/client/themes/floating-scrollbars-dark-theme.css
index 042fe28cc299..a77e0af03819 100644
--- a/devtools/client/themes/floating-scrollbars-dark-theme.css
+++ b/devtools/client/themes/floating-scrollbars-dark-theme.css
@@ -7,7 +7,7 @@
    well as any overflow: scroll elements within the page, while excluding
    <select>. */
 *|*:not(html|select) > scrollbar {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
@@ -37,14 +37,14 @@
 
 *|*:not(html|select) > scrollbar thumb {
   background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   border-width: 0px !important;
   border-radius: 3px !important;
 }
 
 *|*:root[platform="mac"] > scrollbar slider,
 *|*:root[platform="mac"] *|*:not(html|select) > scrollbar slider {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
 }
 
 *|*:root[platform="win"] > scrollbar scrollbarbutton,
diff --git a/devtools/client/themes/floating-scrollbars-responsive-design.css b/devtools/client/themes/floating-scrollbars-responsive-design.css
index 7709bdd34c65..5839a3ab180c 100644
--- a/devtools/client/themes/floating-scrollbars-responsive-design.css
+++ b/devtools/client/themes/floating-scrollbars-responsive-design.css
@@ -7,7 +7,7 @@
    well as any overflow: scroll elements within the page, while excluding
    <select>. */
 *|*:not(html|select) > scrollbar {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
@@ -31,11 +31,11 @@
 }
 
 *|*:not(html|select) > scrollbar slider {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
 }
 
 *|*:not(html|select) > scrollbar thumb {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   background-color: rgba(0,0,0,0.2);
   border-width: 0px !important;
   border-radius: 3px !important;
diff --git a/devtools/client/themes/new-webconsole.css b/devtools/client/themes/new-webconsole.css
index 19099b23ec22..548c956fbc95 100644
--- a/devtools/client/themes/new-webconsole.css
+++ b/devtools/client/themes/new-webconsole.css
@@ -460,7 +460,7 @@ body {
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: transparent;
 }
 
diff --git a/devtools/client/themes/responsivedesign.css b/devtools/client/themes/responsivedesign.css
index 16b9c8600e1e..8c20774d94fe 100644
--- a/devtools/client/themes/responsivedesign.css
+++ b/devtools/client/themes/responsivedesign.css
@@ -16,7 +16,7 @@
 }
 
 .devtools-responsiveui-toolbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   /* text color is textColor from dark theme, since no theme is applied to
    * the responsive toolbar.
@@ -29,7 +29,7 @@
 }
 
 .devtools-responsiveui-textinput {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: #333;
   color: #fff;
   border: 1px solid #111;
@@ -46,7 +46,7 @@
 
 .devtools-responsiveui-menulist,
 .devtools-responsiveui-toolbarbutton {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   -moz-box-align: center;
   min-width: 32px;
   min-height: 22px;
@@ -60,12 +60,12 @@
 }
 
 .devtools-responsiveui-menulist .menulist-editable-box {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: transparent;
 }
 
 .devtools-responsiveui-menulist html|*.menulist-editable-input {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: inherit;
   text-align: center;
 }
@@ -124,7 +124,7 @@
 }
 
 .devtools-responsiveui-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   display: -moz-box;
   background-color: transparent;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
@@ -134,7 +134,7 @@
 }
 
 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: inherit;
   border-width: 0;
   border-inline-end: 1px solid hsla(210,8%,5%,.45);
@@ -152,7 +152,7 @@
 
 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
   -moz-box-align: center;
   padding: 0 3px;
@@ -266,7 +266,7 @@
 }
 
 .devtools-responsiveui-hardware-buttons {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   padding: 20px;
 
   border: 1px solid #FFFFFF;
@@ -288,7 +288,7 @@
 
 .devtools-responsiveui-sleep-button {
   -moz-user-focus: ignore;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   /* compensate browserStack top padding */
   margin-top: -67px;
   margin-right: 10px;
@@ -316,7 +316,7 @@
 .devtools-responsiveui-volume-up-button,
 .devtools-responsiveui-volume-down-button {
   -moz-user-focus: ignore;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: 1px solid red;
   min-width: 8px;
   height: 40px;
diff --git a/devtools/client/themes/shadereditor.css b/devtools/client/themes/shadereditor.css
index 53ef94235a37..42f986aaeed6 100644
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -28,7 +28,7 @@
 }
 
 .side-menu-widget-item-checkbox {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   opacity: 0;
   transition: opacity .15s ease-out 0s;
 }
@@ -43,7 +43,7 @@
 }
 
 .side-menu-widget-item-checkbox .checkbox-check {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-image: url(images/item-toggle.svg);
   background-color: transparent;
   width: 16px;
diff --git a/devtools/client/themes/splitters.css b/devtools/client/themes/splitters.css
index aa6f505dcd37..1f19f6ad961b 100644
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -31,7 +31,7 @@
 
 .devtools-horizontal-splitter,
 .devtools-side-splitter {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-image: none;
   border: 0;
   border-style: solid;
diff --git a/devtools/client/themes/toolbars.css b/devtools/client/themes/toolbars.css
index d606e61b543c..532fbf476238 100644
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -90,13 +90,13 @@
 
 /* In-tools sidebar */
 .devtools-sidebar-tabs {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   margin: 0;
   height: 100%;
 }
 
 .devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   padding: 0;
   border: 0;
@@ -115,7 +115,7 @@
 }
 
 .devtools-sidebar-alltabs {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   height: 24px;
   line-height: 24px;
   padding: 0 4px;
@@ -135,7 +135,7 @@
 }
 
 .devtools-sidebar-tabs tabs > tab {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   /* We want to match the height of a toolbar with a toolbarbutton
    * First, we need to replicated the padding of toolbar (4px),
    * then we need to take the border of the buttons into account (1px).
diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css
index 458bf6319443..41371ea39189 100644
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -42,7 +42,7 @@
 /* Toolbox tabbar */
 
 .devtools-tabbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   min-height: 24px;
   border: 0px solid;
   border-bottom-width: 1px;
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css
index 4e37c3a3155f..b8f2f5648348 100644
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -109,7 +109,7 @@
 }
 
 .tooltip-xul-wrapper {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   overflow: visible;
   border-style: none;
diff --git a/devtools/client/themes/webaudioeditor.css b/devtools/client/themes/webaudioeditor.css
index 3ba9dad88c28..e28f54ed0cdb 100644
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -125,7 +125,7 @@ text {
 .web-audio-inspector .error {
   background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   opacity: 0;
   transition: opacity .5s ease-out 0s;
 }
diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
index 79352703451f..be5458e6b443 100644
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -424,7 +424,7 @@ a {
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: transparent;
 }
 
diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css
index c46ff2c2e4cc..091bba9ce0b8 100644
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -123,7 +123,7 @@
 
 .scrollbutton-up,
 .scrollbutton-down {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   box-shadow: none;
   border: none;
@@ -134,7 +134,7 @@
 
 .scrollbutton-up > .toolbarbutton-icon,
 .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   width: 7px;
   height: 16px;
   background-size: 14px 16px;
@@ -197,7 +197,7 @@
 
 .breadcrumbs-widget-item {
   background-color: transparent;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   min-height: 24px;
   min-width: 65px;
   margin: 0;
diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js
index 2bd29374f93e..8da8d7417aff 100644
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -1746,6 +1746,20 @@ exports.CSS_PROPERTIES = {
       "unset"
     ]
   },
+  "-webkit-appearance": {
+    "isInherited": false,
+    "subproperties": [
+      "appearance"
+    ],
+    "supports": [],
+    "values": [
+      "auto",
+      "inherit",
+      "initial",
+      "none",
+      "unset"
+    ]
+  },
   "-webkit-backface-visibility": {
     "isInherited": false,
     "subproperties": [
@@ -2858,6 +2872,7 @@ exports.CSS_PROPERTIES = {
       "animation-play-state",
       "animation-timing-function",
       "-moz-appearance",
+      "appearance",
       "backface-visibility",
       "background-attachment",
       "background-blend-mode",
@@ -3889,6 +3904,20 @@ exports.CSS_PROPERTIES = {
       "unset"
     ]
   },
+  "appearance": {
+    "isInherited": false,
+    "subproperties": [
+      "appearance"
+    ],
+    "supports": [],
+    "values": [
+      "auto",
+      "inherit",
+      "initial",
+      "none",
+      "unset"
+    ]
+  },
   "backface-visibility": {
     "isInherited": false,
     "subproperties": [
@@ -9792,6 +9821,14 @@ exports.PREFERENCES = [
     "all",
     "layout.css.all-shorthand.enabled"
   ],
+  [
+    "-moz-appearance",
+    "layout.css.moz-appearance.enabled"
+  ],
+  [
+    "appearance",
+    "layout.css.appearance.enabled"
+  ],
   [
     "background-blend-mode",
     "layout.css.background-blend-mode.enabled"
@@ -10116,6 +10153,10 @@ exports.PREFERENCES = [
     "-webkit-animation-timing-function",
     "layout.css.prefixes.webkit"
   ],
+  [
+    "-webkit-appearance",
+    "layout.css.appearance.enabled"
+  ],
   [
     "-webkit-filter",
     "layout.css.prefixes.webkit"
diff --git a/dom/animation/test/mozilla/file_discrete-animations.html b/dom/animation/test/mozilla/file_discrete-animations.html
index 8820365a727c..f183b1873bd1 100644
--- a/dom/animation/test/mozilla/file_discrete-animations.html
+++ b/dom/animation/test/mozilla/file_discrete-animations.html
@@ -9,11 +9,6 @@
 "use strict";
 
 const gMozillaSpecificProperties = {
-  "-moz-appearance": {
-    // https://drafts.csswg.org/css-align/#propdef-align-content
-    from: "button",
-    to: "none"
-  },
   "-moz-border-bottom-colors": {
     from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
     to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
diff --git a/dom/base/test/test_caretPositionFromPoint.html b/dom/base/test/test_caretPositionFromPoint.html
index 50f12b1ef67f..d13ffd175ca4 100644
--- a/dom/base/test/test_caretPositionFromPoint.html
+++ b/dom/base/test/test_caretPositionFromPoint.html
@@ -27,7 +27,7 @@
     }
 
     textarea, input {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
     }
   </style>
 <script>
diff --git a/dom/events/test/bug656379-1.html b/dom/events/test/bug656379-1.html
index 32bffa3bab8c..902522408f25 100644
--- a/dom/events/test/bug656379-1.html
+++ b/dom/events/test/bug656379-1.html
@@ -14,7 +14,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=656379
       display: none;
     }
     input[type=button] {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       padding: 0;
       border: none;
       color: black;
diff --git a/dom/events/test/test_bug864040.html b/dom/events/test/test_bug864040.html
index 774e1e3ca259..17c6befb251f 100644
--- a/dom/events/test/test_bug864040.html
+++ b/dom/events/test/test_bug864040.html
@@ -14,7 +14,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=864040
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=864040">Mozilla Bug 864040</a>
 <div id="display">
-  <textarea id="ta" rows="5" cols="20" style="-moz-appearance:none"></textarea>
+  <textarea id="ta" rows="5" cols="20" style="-moz-appearance:none; appearance: none"></textarea>
   <div id="ce" contentEditable="true" style="height: 5em;"></div>
 </div>
 <div id="content" style="display: none">
diff --git a/dom/html/reftests/autofocus/input-number-ref.html b/dom/html/reftests/autofocus/input-number-ref.html
index 384915edb871..20fc58f5f9a6 100644
--- a/dom/html/reftests/autofocus/input-number-ref.html
+++ b/dom/html/reftests/autofocus/input-number-ref.html
@@ -9,7 +9,7 @@
   </head>
   <body onload="document.getElementsByTagName('input')[0].focus();">
     <input onfocus="document.documentElement.removeAttribute('class');"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/dom/html/reftests/autofocus/input-number.html b/dom/html/reftests/autofocus/input-number.html
index 7816ee9bd9d5..a55e79ec51b9 100644
--- a/dom/html/reftests/autofocus/input-number.html
+++ b/dom/html/reftests/autofocus/input-number.html
@@ -18,7 +18,7 @@ function focusHandler() {
   </head>
   <body>
     <input type="number" autofocus onfocus="focusHandler();"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/dom/html/reftests/autofocus/input-time-ref.html b/dom/html/reftests/autofocus/input-time-ref.html
index abaa6feeac27..111ffecd0a88 100644
--- a/dom/html/reftests/autofocus/input-time-ref.html
+++ b/dom/html/reftests/autofocus/input-time-ref.html
@@ -15,7 +15,7 @@
   </head>
   <body onload="document.getElementById('t').focus();">
     <input type="time" id="t" onfocus="focusHandler();"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
   </body>
 </html>
 
diff --git a/dom/html/reftests/autofocus/input-time.html b/dom/html/reftests/autofocus/input-time.html
index a86a91bbfcd0..4d9a21bd3975 100644
--- a/dom/html/reftests/autofocus/input-time.html
+++ b/dom/html/reftests/autofocus/input-time.html
@@ -15,7 +15,7 @@
   </head>
   <body>
     <input type="time" autofocus onfocus="focusHandler();"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
   </body>
 </html>
 
diff --git a/dom/html/test/forms/test_input_textarea_set_value_no_scroll.html b/dom/html/test/forms/test_input_textarea_set_value_no_scroll.html
index 433c07f1e16c..380781972a92 100644
--- a/dom/html/test/forms/test_input_textarea_set_value_no_scroll.html
+++ b/dom/html/test/forms/test_input_textarea_set_value_no_scroll.html
@@ -112,8 +112,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=829606
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=829606">Mozilla Bug 829606</a>
 <p id="display"></p>
 <div id="content">
-  <textarea rows='1' cols='5' style='-moz-appearance:none;'>this is a \n long text</textarea>
-  <input size='5' value="this is a very long text" style='-moz-appearance:none;'>
+  <textarea rows='1' cols='5' style='-moz-appearance:none; appearance: none;'>this is a \n long text</textarea>
+  <input size='5' value="this is a very long text" style='-moz-appearance:none; appearance: none;'>
 </div>
 <pre id="test">
 </pre>
diff --git a/dom/tests/mochitest/general/test_focusrings.xul b/dom/tests/mochitest/general/test_focusrings.xul
index 1833b9393eb7..0e683f13dfbb 100644
--- a/dom/tests/mochitest/general/test_focusrings.xul
+++ b/dom/tests/mochitest/general/test_focusrings.xul
@@ -168,7 +168,7 @@ SimpleTest.waitForFocus(runTest);
 <button id="b2" label="Button"/>
 <button id="b3" label="Button"/>
 
-<iframe id="child" src="data:text/html,&lt;html&gt;&lt;style&gt;* { outline: none; -moz-appearance: none; min-width:10px; min-height:10px; } %23elem:focus { outline: 2px solid red; } %23elem:-moz-focusring { outline: 1px solid blue; }&lt;/style&gt;&lt;div id='container'&gt;&lt;/html&gt;"/>
+<iframe id="child" src="data:text/html,&lt;html&gt;&lt;style&gt;* { outline: none; -moz-appearance: none; appearance: none; min-width:10px; min-height:10px; } %23elem:focus { outline: 2px solid red; } %23elem:-moz-focusring { outline: 1px solid blue; }&lt;/style&gt;&lt;div id='container'&gt;&lt;/html&gt;"/>
 
 <body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
 
diff --git a/dom/tests/mochitest/general/test_offsets.xul b/dom/tests/mochitest/general/test_offsets.xul
index ff054dbca2a4..e9c09efd4e34 100644
--- a/dom/tests/mochitest/general/test_offsets.xul
+++ b/dom/tests/mochitest/general/test_offsets.xul
@@ -47,8 +47,8 @@
              onpopupshown="this.firstChild.open = true"
              onpopuphidden="if (event.target == this) SimpleTest.finish();">
     <menu id="innermenu" label="Open"
-          style="margin: 0; padding: 0; border: 2px black solid; -moz-appearance: none;">
-      <menupopup style="margin: 0; padding: 0; border: 1px black solid; -moz-appearance: none;"
+          style="margin: 0; padding: 0; border: 2px black solid; -moz-appearance: none; appearance: none;">
+      <menupopup style="margin: 0; padding: 0; border: 1px black solid; -moz-appearance: none; appearance: none;"
                  onpopupshown="testElements('outermenu', doneTests)">
         <menuitem label="Document"/>
         <menuitem id="innermenuitem" style="margin: 2px; padding: 3px;" label="Page"/>
diff --git a/editor/libeditor/tests/test_bug1053048.html b/editor/libeditor/tests/test_bug1053048.html
index 4032d32c2c8f..026037c2ce8e 100644
--- a/editor/libeditor/tests/test_bug1053048.html
+++ b/editor/libeditor/tests/test_bug1053048.html
@@ -63,7 +63,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1053048
 </div>
 
 <textarea id="textarea"
-          style="height: 100px; width: 300px; -moz-appearance: none"
+          style="height: 100px; width: 300px; -moz-appearance: none; appearance: none"
           spellcheck="false"
           onkeydown="this.style.display='block'; this.style.height='200px';">foo</textarea>
 
diff --git a/editor/reftests/xul/input.css b/editor/reftests/xul/input.css
index 2104b16d2655..4ca8c4ec2553 100644
--- a/editor/reftests/xul/input.css
+++ b/editor/reftests/xul/input.css
@@ -24,7 +24,7 @@
 
 textbox[multiline="true"], html|textarea {
   border: none !important;
-  -moz-appearance: none !important;
+  -moz-appearance: none; appearance: none !important;
   background-color: white !important;
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
diff --git a/gfx/src/nsThemeConstants.h b/gfx/src/nsThemeConstants.h
index 7825b9c6f6ba..49b718cc521f 100644
--- a/gfx/src/nsThemeConstants.h
+++ b/gfx/src/nsThemeConstants.h
@@ -14,6 +14,9 @@
 // A checkbox element. 
 #define NS_THEME_CHECKBOX                                  3
 
+// appearance:auto (only used in the style system, not in layout)
+#define NS_THEME_AUTO                                      4
+
 // A rectangular button that contains complex content
 // like images (e.g. HTML <button> elements)
 #define NS_THEME_BUTTON_BEVEL                              7
diff --git a/gfx/tests/crashtests/crashtests.list b/gfx/tests/crashtests/crashtests.list
index 38b38c2ed193..a402e62b8409 100644
--- a/gfx/tests/crashtests/crashtests.list
+++ b/gfx/tests/crashtests/crashtests.list
@@ -86,10 +86,10 @@ load 580100-1.html
 load 580212-1.html
 load 580233-1.html
 load 580719-1.html
-load 593526.html
-load 593526.xul
+pref(layout.css.moz-appearance.enabled,true) load 593526.html
+pref(layout.css.moz-appearance.enabled,true) load 593526.xul
 load 594654-1.xhtml
-load 595042-1.html
+pref(layout.css.moz-appearance.enabled,true) load 595042-1.html
 load 595727-1.html
 load 624198.xhtml
 load 633322-1.html
diff --git a/layout/base/GeckoRestyleManager.cpp b/layout/base/GeckoRestyleManager.cpp
index 6dbf4cac2488..77620a0342ef 100644
--- a/layout/base/GeckoRestyleManager.cpp
+++ b/layout/base/GeckoRestyleManager.cpp
@@ -299,11 +299,11 @@ GeckoRestyleManager::AttributeChanged(Element* aElement,
   if (primaryFrame) {
     // See if we have appearance information for a theme.
     const nsStyleDisplay* disp = primaryFrame->StyleDisplay();
-    if (disp->mAppearance) {
+    if (disp->UsedAppearance()) {
       nsITheme* theme = PresContext()->GetTheme();
-      if (theme && theme->ThemeSupportsWidget(PresContext(), primaryFrame, disp->mAppearance)) {
+      if (theme && theme->ThemeSupportsWidget(PresContext(), primaryFrame, disp->UsedAppearance())) {
         bool repaint = false;
-        theme->WidgetStateChanged(primaryFrame, disp->mAppearance, aAttribute,
+        theme->WidgetStateChanged(primaryFrame, disp->UsedAppearance(), aAttribute,
             &repaint, aOldValue);
         if (repaint)
           hint |= nsChangeHint_RepaintFrame;
diff --git a/layout/base/RestyleManager.cpp b/layout/base/RestyleManager.cpp
index 3327321b2930..2f60c4dcca78 100644
--- a/layout/base/RestyleManager.cpp
+++ b/layout/base/RestyleManager.cpp
@@ -360,7 +360,7 @@ RestyleManager::ContentStateChangedInternal(Element* aElement,
                                          NS_EVENT_STATE_LOADING)) {
       *aOutChangeHint = nsChangeHint_ReconstructFrame;
     } else {
-      uint8_t app = primaryFrame->StyleDisplay()->mAppearance;
+      uint8_t app = primaryFrame->StyleDisplay()->UsedAppearance();
       if (app) {
         nsITheme* theme = PresContext()->GetTheme();
         if (theme &&
diff --git a/layout/base/crashtests/crashtests.list b/layout/base/crashtests/crashtests.list
index ae983901559a..39cdfaab3648 100644
--- a/layout/base/crashtests/crashtests.list
+++ b/layout/base/crashtests/crashtests.list
@@ -431,7 +431,7 @@ load 812665.html
 load 813372-1.html
 load 817219.html
 load 818454.html
-load 822865.html
+pref(layout.css.moz-appearance.enabled,true) load 822865.html
 load 824300.html
 load 824862.html
 load 826163.html
diff --git a/layout/base/nsCSSFrameConstructor.cpp b/layout/base/nsCSSFrameConstructor.cpp
index ab20f703fed8..c092b79ad74d 100644
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -3773,7 +3773,7 @@ nsCSSFrameConstructor::FindInputData(Element* aElement,
   // not (respectively) NS_THEME_RADIO and NS_THEME_CHECKBOX.)
   if ((controlType == NS_FORM_INPUT_CHECKBOX ||
        controlType == NS_FORM_INPUT_RADIO) &&
-      aStyleContext->StyleDisplay()->mAppearance == NS_THEME_NONE) {
+      aStyleContext->StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     return nullptr;
   }
 #endif
diff --git a/layout/base/nsLayoutUtils.cpp b/layout/base/nsLayoutUtils.cpp
index 75f14d8b532c..31b6d9339e9d 100644
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -5143,7 +5143,7 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
     LayoutDeviceIntSize devSize;
     bool canOverride = true;
     nsPresContext* pc = aFrame->PresContext();
-    pc->GetTheme()->GetMinimumWidgetSize(pc, aFrame, disp->mAppearance,
+    pc->GetTheme()->GetMinimumWidgetSize(pc, aFrame, disp->UsedAppearance(),
                                          &devSize, &canOverride);
     nscoord themeSize =
       pc->DevPixelsToAppUnits(aAxis == eAxisVertical ? devSize.height
@@ -7070,10 +7070,10 @@ nsLayoutUtils::GetFrameTransparency(nsIFrame* aBackgroundFrame,
   if (HasNonZeroCorner(aCSSRootFrame->StyleBorder()->mBorderRadius))
     return eTransparencyTransparent;
 
-  if (aCSSRootFrame->StyleDisplay()->mAppearance == NS_THEME_WIN_GLASS)
+  if (aCSSRootFrame->StyleDisplay()->UsedAppearance() == NS_THEME_WIN_GLASS)
     return eTransparencyGlass;
 
-  if (aCSSRootFrame->StyleDisplay()->mAppearance == NS_THEME_WIN_BORDERLESS_GLASS)
+  if (aCSSRootFrame->StyleDisplay()->UsedAppearance() == NS_THEME_WIN_BORDERLESS_GLASS)
     return eTransparencyBorderlessGlass;
 
   nsITheme::Transparency transparency;
diff --git a/layout/base/tests/bug106855-1-ref.html b/layout/base/tests/bug106855-1-ref.html
index 2d3ceea40232..4ba3ca0f9f6f 100644
--- a/layout/base/tests/bug106855-1-ref.html
+++ b/layout/base/tests/bug106855-1-ref.html
@@ -3,7 +3,7 @@
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
 A
 
 
diff --git a/layout/base/tests/bug106855-1.html b/layout/base/tests/bug106855-1.html
index 6c0934211760..77f6aed55531 100644
--- a/layout/base/tests/bug106855-1.html
+++ b/layout/base/tests/bug106855-1.html
@@ -3,7 +3,7 @@
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
 A
 
 
diff --git a/layout/base/tests/bug106855-2.html b/layout/base/tests/bug106855-2.html
index 34c50fafdd17..63fa6b575160 100644
--- a/layout/base/tests/bug106855-2.html
+++ b/layout/base/tests/bug106855-2.html
@@ -3,7 +3,7 @@
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
 A
 
 
diff --git a/layout/base/tests/bug1237236-1-ref.html b/layout/base/tests/bug1237236-1-ref.html
index d8bca78b7ba9..f7c2634c8e39 100644
--- a/layout/base/tests/bug1237236-1-ref.html
+++ b/layout/base/tests/bug1237236-1-ref.html
@@ -20,7 +20,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def</textarea>
 
 <script>
diff --git a/layout/base/tests/bug1237236-1.html b/layout/base/tests/bug1237236-1.html
index 6ed32fea3a2f..5262b55b9d51 100644
--- a/layout/base/tests/bug1237236-1.html
+++ b/layout/base/tests/bug1237236-1.html
@@ -21,7 +21,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def</textarea>
 
 <script>
diff --git a/layout/base/tests/bug1258308-1-ref.html b/layout/base/tests/bug1258308-1-ref.html
index 3c975569c5fe..2801259e02d4 100644
--- a/layout/base/tests/bug1258308-1-ref.html
+++ b/layout/base/tests/bug1258308-1-ref.html
@@ -21,7 +21,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def
 ghi</textarea>
 
diff --git a/layout/base/tests/bug1258308-1.html b/layout/base/tests/bug1258308-1.html
index 3f6c2554076b..261f663e334a 100644
--- a/layout/base/tests/bug1258308-1.html
+++ b/layout/base/tests/bug1258308-1.html
@@ -29,7 +29,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def
 ghi</textarea>
 
diff --git a/layout/base/tests/bug1259949-1-ref.html b/layout/base/tests/bug1259949-1-ref.html
index 26b58f6049ae..fdae004f45ff 100644
--- a/layout/base/tests/bug1259949-1-ref.html
+++ b/layout/base/tests/bug1259949-1-ref.html
@@ -20,7 +20,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abcdef
 </textarea>
 
 <script>
diff --git a/layout/base/tests/bug1259949-1.html b/layout/base/tests/bug1259949-1.html
index 52304b4272c6..3c9d55e30730 100644
--- a/layout/base/tests/bug1259949-1.html
+++ b/layout/base/tests/bug1259949-1.html
@@ -24,7 +24,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abcdef
 </textarea>
 
 <script>
diff --git a/layout/base/tests/bug240933-1-ref.html b/layout/base/tests/bug240933-1-ref.html
index 778a0647b8a6..260983eaf17c 100644
--- a/layout/base/tests/bug240933-1-ref.html
+++ b/layout/base/tests/bug240933-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML><html>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none">
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none">
 
 </textarea>
 <script>
diff --git a/layout/base/tests/bug240933-1.html b/layout/base/tests/bug240933-1.html
index ce96d4d09089..ba1011ded152 100644
--- a/layout/base/tests/bug240933-1.html
+++ b/layout/base/tests/bug240933-1.html
@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var area = document.getElementById('t');
   area.focus();
diff --git a/layout/base/tests/bug240933-2.html b/layout/base/tests/bug240933-2.html
index 6b95cf1a97b2..19d6942e0cf2 100644
--- a/layout/base/tests/bug240933-2.html
+++ b/layout/base/tests/bug240933-2.html
@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var area = document.getElementById('t');
   area.focus();
diff --git a/layout/base/tests/bug585922-ref.html b/layout/base/tests/bug585922-ref.html
index 76827f20252b..624d73442ee2 100644
--- a/layout/base/tests/bug585922-ref.html
+++ b/layout/base/tests/bug585922-ref.html
@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="doTest()">
-    <input type=text style="-moz-appearance: none">
+    <input type=text style="-moz-appearance: none; appearance: none">
     <script>
       function doTest() {
         var d = document.querySelector("input");
diff --git a/layout/base/tests/bug585922.html b/layout/base/tests/bug585922.html
index e929d671021f..57d834ac0f3e 100644
--- a/layout/base/tests/bug585922.html
+++ b/layout/base/tests/bug585922.html
@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="doTest()">
-    <input type=text style="-moz-appearance: none">
+    <input type=text style="-moz-appearance: none; appearance: none">
     <script>
       function doTest() {
         function enableCaret(aEnable) {
diff --git a/layout/base/tests/bug597519-1-ref.html b/layout/base/tests/bug597519-1-ref.html
index e11eb0c967dc..7e0b91ebd2bd 100644
--- a/layout/base/tests/bug597519-1-ref.html
+++ b/layout/base/tests/bug597519-1-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML><html><head>
 </head>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none">ab
+<textarea spellcheck="false" style="-moz-appearance: none; appearance: none">ab
 </textarea>
 <script>
   var t = document.querySelector("textarea");
diff --git a/layout/base/tests/bug597519-1.html b/layout/base/tests/bug597519-1.html
index a33084f153d6..02167b8cb722 100644
--- a/layout/base/tests/bug597519-1.html
+++ b/layout/base/tests/bug597519-1.html
@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea maxlength="3" spellcheck="false" style="-moz-appearance: none"></textarea>
+<textarea maxlength="3" spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
diff --git a/layout/base/tests/bug612271-1.html b/layout/base/tests/bug612271-1.html
index 4c511b31e2c3..6ceff9c3810c 100644
--- a/layout/base/tests/bug612271-1.html
+++ b/layout/base/tests/bug612271-1.html
@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
- <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
+ <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeydown="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
diff --git a/layout/base/tests/bug612271-2.html b/layout/base/tests/bug612271-2.html
index 5c3754794608..298c8e293e24 100644
--- a/layout/base/tests/bug612271-2.html
+++ b/layout/base/tests/bug612271-2.html
@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-  <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeypress="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
diff --git a/layout/base/tests/bug612271-3.html b/layout/base/tests/bug612271-3.html
index 29be02693e20..54a238ba76d6 100644
--- a/layout/base/tests/bug612271-3.html
+++ b/layout/base/tests/bug612271-3.html
@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-  <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeyup="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
diff --git a/layout/base/tests/bug612271-ref.html b/layout/base/tests/bug612271-ref.html
index e1472c8c451b..2e5e1d5bb66a 100644
--- a/layout/base/tests/bug612271-ref.html
+++ b/layout/base/tests/bug612271-ref.html
@@ -9,7 +9,7 @@
   </script>
 </head>
 <body onload="loaded()">
-  <textarea style="height: 200px; display: block; -moz-appearance: none" spellcheck="false"
+  <textarea style="height: 200px; display: block; -moz-appearance: none; appearance: none" spellcheck="false"
     >foo
 </textarea>
   4 - 4
diff --git a/layout/base/tests/bug613807-1-ref.html b/layout/base/tests/bug613807-1-ref.html
index b47a572ea70b..eb7e96a1f5d1 100644
--- a/layout/base/tests/bug613807-1-ref.html
+++ b/layout/base/tests/bug613807-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <body onload="document.querySelector('textarea').focus()">
-<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
 </body>
 </html>
diff --git a/layout/base/tests/bug613807-1.html b/layout/base/tests/bug613807-1.html
index 145ea5603ca1..463654e2cfdb 100644
--- a/layout/base/tests/bug613807-1.html
+++ b/layout/base/tests/bug613807-1.html
@@ -4,7 +4,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   if (typeof(addLoadEvent) == 'undefined') {
     _newCallStack = function(path) {
diff --git a/layout/base/tests/bug634406-1-ref.html b/layout/base/tests/bug634406-1-ref.html
index 87b42a9edeb3..16e61e1c3343 100644
--- a/layout/base/tests/bug634406-1-ref.html
+++ b/layout/base/tests/bug634406-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML><html>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none">ab</textarea>
+<textarea spellcheck="false" style="-moz-appearance: none; appearance: none">ab</textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
diff --git a/layout/base/tests/bug634406-1.html b/layout/base/tests/bug634406-1.html
index 141198b59ef4..ba84cc4258fd 100644
--- a/layout/base/tests/bug634406-1.html
+++ b/layout/base/tests/bug634406-1.html
@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none"></textarea>
+<textarea spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
diff --git a/layout/base/tests/bug646382-1-ref.html b/layout/base/tests/bug646382-1-ref.html
index e9d37339e448..6223a65f3adc 100644
--- a/layout/base/tests/bug646382-1-ref.html
+++ b/layout/base/tests/bug646382-1-ref.html
@@ -4,7 +4,7 @@
   </head>
   <body onload="start()">
     <textarea onfocus="done()"
-              style="-moz-appearance: none;
+              style="-moz-appearance: none; appearance: none;
                      unicode-bidi: bidi-override;">س</textarea>
     <script>
       var textarea = document.querySelector("textarea");
diff --git a/layout/base/tests/bug646382-1.html b/layout/base/tests/bug646382-1.html
index 06335befab1c..9e0d9f52c213 100644
--- a/layout/base/tests/bug646382-1.html
+++ b/layout/base/tests/bug646382-1.html
@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea onfocus="typeIntoMe()" style="-moz-appearance: none"></textarea>
+    <textarea onfocus="typeIntoMe()" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
diff --git a/layout/base/tests/bug646382-2-ref.html b/layout/base/tests/bug646382-2-ref.html
index 22aa1b7d1d4b..29fa1f1e4e25 100644
--- a/layout/base/tests/bug646382-2-ref.html
+++ b/layout/base/tests/bug646382-2-ref.html
@@ -1,7 +1,7 @@
 <html class="reftest-wait">
   <body onload="start()">
     <textarea dir="rtl" onfocus="done()"
-              style="-moz-appearance: none;
+              style="-moz-appearance: none; appearance: none;
               unicode-bidi: bidi-override;">s</textarea>
     <script>
       var textarea = document.querySelector("textarea");
diff --git a/layout/base/tests/bug646382-2.html b/layout/base/tests/bug646382-2.html
index 4852b85632d5..9387a4913a63 100644
--- a/layout/base/tests/bug646382-2.html
+++ b/layout/base/tests/bug646382-2.html
@@ -3,7 +3,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea dir="rtl" onfocus="typeIntoMe()" style="-moz-appearance: none"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
diff --git a/layout/base/tests/bug664087-1-ref.html b/layout/base/tests/bug664087-1-ref.html
index 77de000b03e4..cd8e4da21820 100644
--- a/layout/base/tests/bug664087-1-ref.html
+++ b/layout/base/tests/bug664087-1-ref.html
@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea rows="3" onfocus="done()" spellcheck="false" style="-moz-appearance: none">אב
+    <textarea rows="3" onfocus="done()" spellcheck="false" style="-moz-appearance: none; appearance: none">אב
 ג</textarea>
     <script>
       var textarea = document.querySelector("textarea");
diff --git a/layout/base/tests/bug664087-1.html b/layout/base/tests/bug664087-1.html
index ea12bcaadf16..405cadfc806d 100644
--- a/layout/base/tests/bug664087-1.html
+++ b/layout/base/tests/bug664087-1.html
@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea rows="3" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none"></textarea>
+    <textarea rows="3" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
diff --git a/layout/base/tests/bug664087-2-ref.html b/layout/base/tests/bug664087-2-ref.html
index 52749fe44505..6e96f8d94c52 100644
--- a/layout/base/tests/bug664087-2-ref.html
+++ b/layout/base/tests/bug664087-2-ref.html
@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea dir="rtl" onfocus="done()" spellcheck="false" style="-moz-appearance: none">ab
+    <textarea dir="rtl" onfocus="done()" spellcheck="false" style="-moz-appearance: none; appearance: none">ab
 c</textarea>
     <script>
       var textarea = document.querySelector("textarea");
diff --git a/layout/base/tests/bug664087-2.html b/layout/base/tests/bug664087-2.html
index 3baf2b165b05..15d029a9299d 100644
--- a/layout/base/tests/bug664087-2.html
+++ b/layout/base/tests/bug664087-2.html
@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea dir="rtl" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
diff --git a/layout/base/tests/chrome/chrome_content_integration_window.xul b/layout/base/tests/chrome/chrome_content_integration_window.xul
index 23cd21e6e6cc..0b162c81f678 100644
--- a/layout/base/tests/chrome/chrome_content_integration_window.xul
+++ b/layout/base/tests/chrome/chrome_content_integration_window.xul
@@ -3,7 +3,7 @@
 <window title="Content/chrome integration subwindow"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         onload="runTests()"
-        style="background:black; -moz-appearance:none;">
+        style="background:black; -moz-appearance:none; appearance: none;">
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script>
 
   <stack style="height:300px; width:200px;">
diff --git a/layout/base/tests/test_bug332655-1.html b/layout/base/tests/test_bug332655-1.html
index 8110cbfd3646..d2634d035cc0 100644
--- a/layout/base/tests/test_bug332655-1.html
+++ b/layout/base/tests/test_bug332655-1.html
@@ -15,7 +15,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=332655
 <p id="display"></p>
 <div id="content">
 <input type="text" id="testInput"
-       style="-moz-appearance: none"> <!-- bug 1204897 workaround -->
+       style="-moz-appearance: none; appearance: none"> <!-- bug 1204897 workaround -->
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
diff --git a/layout/base/tests/test_bug332655-2.html b/layout/base/tests/test_bug332655-2.html
index b4dac3691b9c..badeddce84d4 100644
--- a/layout/base/tests/test_bug332655-2.html
+++ b/layout/base/tests/test_bug332655-2.html
@@ -15,7 +15,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=332655
 <p id="display"></p>
 <div id="content">
 <input type="text" id="testInput"
-       style="-moz-appearance: none"> <!-- bug 1234659 workaround -->
+       style="-moz-appearance: none; appearance: none"> <!-- bug 1234659 workaround -->
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
diff --git a/layout/base/tests/test_bug499538-1.html b/layout/base/tests/test_bug499538-1.html
index 054ce726ee2b..7a9c33b04494 100644
--- a/layout/base/tests/test_bug499538-1.html
+++ b/layout/base/tests/test_bug499538-1.html
@@ -14,7 +14,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=499538
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=499538">Mozilla Bug 499538</a>
 <p id="display"></p>
 <div id="content">
-<input type="text" id="testInput" style="-moz-appearance:none">
+<input type="text" id="testInput" style="-moz-appearance:none; appearance: none">
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
diff --git a/layout/base/tests/test_bug644768.html b/layout/base/tests/test_bug644768.html
index 297cd1c3b85f..941f002bffdb 100644
--- a/layout/base/tests/test_bug644768.html
+++ b/layout/base/tests/test_bug644768.html
@@ -22,7 +22,7 @@
            == زادروزها ==
            * [[۱۳۰۷]]
          -->
-      <textarea id="testInput" dir="rtl" cols="80" rows="25" style="-moz-appearance:none">
+      <textarea id="testInput" dir="rtl" cols="80" rows="25" style="-moz-appearance:none; appearance: none">
 
 == &#x0632;&#x0627;&#x062F;&#x0631;&#x0648;&#x0632;&#x0647;&#x0627; ==
 * [[&#x06F1;&#x06F3;&#x06F0;&#x06F7;]]</textarea>
diff --git a/layout/forms/crashtests/1102791.html b/layout/forms/crashtests/1102791.html
index 5bcdd80a660a..db3244c44078 100644
--- a/layout/forms/crashtests/1102791.html
+++ b/layout/forms/crashtests/1102791.html
@@ -10,7 +10,7 @@ html,body {
 
 button {
   position: absolute;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   padding: 0;
   border-style:none;
diff --git a/layout/forms/crashtests/crashtests.list b/layout/forms/crashtests/crashtests.list
index b8fe122233b3..092f0747a0ff 100644
--- a/layout/forms/crashtests/crashtests.list
+++ b/layout/forms/crashtests/crashtests.list
@@ -26,7 +26,7 @@ load 378369.html
 load 378413-1.xhtml
 load 380116-1.xhtml
 load 382212-1.xhtml
-load 382610-1.html
+pref(layout.css.moz-appearance.enabled,true) load 382610-1.html
 load 383887-1.html
 load 386554-1.html
 load 388374-1.xhtml
@@ -62,7 +62,7 @@ load 959311.html
 load 960277-2.html
 load 997709-1.html
 load 1102791.html
-skip-if(stylo) load 1140216.html # bug 1323693, bug 1341973
+pref(layout.css.moz-appearance.enabled,true) skip-if(stylo) load 1140216.html # bug 1323693, bug 1341973
 load 1182414.html
 load 1212688.html
 load 1228670.xhtml
diff --git a/layout/forms/nsButtonFrameRenderer.cpp b/layout/forms/nsButtonFrameRenderer.cpp
index e2214c494061..2eeae58132ed 100644
--- a/layout/forms/nsButtonFrameRenderer.cpp
+++ b/layout/forms/nsButtonFrameRenderer.cpp
@@ -328,7 +328,7 @@ void nsDisplayButtonForeground::Paint(nsDisplayListBuilder* aBuilder,
   nsPresContext *presContext = mFrame->PresContext();
   const nsStyleDisplay *disp = mFrame->StyleDisplay();
   if (!mFrame->IsThemed(disp) ||
-      !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
+      !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
     nsRect r = nsRect(ToReferenceFrame(), mFrame->GetSize());
 
     // Draw the -moz-focus-inner border
@@ -350,7 +350,7 @@ nsDisplayButtonForeground::GetLayerState(nsDisplayListBuilder* aBuilder,
     nsPresContext *presContext = mFrame->PresContext();
     const nsStyleDisplay *disp = mFrame->StyleDisplay();
     if (!mFrame->IsThemed(disp) ||
-        !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
+        !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
       nsRect r = nsRect(ToReferenceFrame(), mFrame->GetSize());
       br = mBFR->CreateInnerFocusBorderRenderer(aBuilder, presContext, nullptr, mVisibleRect, r);
     }
diff --git a/layout/forms/nsComboboxControlFrame.cpp b/layout/forms/nsComboboxControlFrame.cpp
index 3e43cc590585..6ca8e0a3146d 100644
--- a/layout/forms/nsComboboxControlFrame.cpp
+++ b/layout/forms/nsComboboxControlFrame.cpp
@@ -782,7 +782,7 @@ nsComboboxControlFrame::GetIntrinsicISize(nsRenderingContext* aRenderingContext,
   const nsStyleDisplay* disp = StyleDisplay();
   if ((!IsThemed(disp) ||
        presContext->GetTheme()->ThemeNeedsComboboxDropmarker()) &&
-      disp->mAppearance != NS_THEME_NONE) {
+      disp->UsedAppearance() != NS_THEME_NONE) {
     displayISize += scrollbarWidth;
   }
 
@@ -855,7 +855,7 @@ nsComboboxControlFrame::Reflow(nsPresContext*          aPresContext,
   nscoord buttonISize;
   const nsStyleDisplay *disp = StyleDisplay();
   if ((IsThemed(disp) && !aPresContext->GetTheme()->ThemeNeedsComboboxDropmarker()) ||
-      StyleDisplay()->mAppearance == NS_THEME_NONE) {
+      StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     buttonISize = 0;
   }
   else {
@@ -1578,7 +1578,7 @@ nsComboboxControlFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
       nsPresContext *presContext = PresContext();
       const nsStyleDisplay *disp = StyleDisplay();
       if ((!IsThemed(disp) ||
-           !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) &&
+           !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) &&
           mDisplayFrame && IsVisibleForPainting(aBuilder)) {
         aLists.Content()->AppendNewToTop(
           new (aBuilder) nsDisplayComboboxFocus(aBuilder, this));
diff --git a/layout/forms/nsFormControlFrame.cpp b/layout/forms/nsFormControlFrame.cpp
index 46be54becd76..e16f5b13a314 100644
--- a/layout/forms/nsFormControlFrame.cpp
+++ b/layout/forms/nsFormControlFrame.cpp
@@ -44,7 +44,7 @@ nsFormControlFrame::GetMinISize(nsRenderingContext *aRenderingContext)
   nscoord result;
   DISPLAY_MIN_WIDTH(this, result);
 #if !defined(MOZ_WIDGET_ANDROID)
-  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
+  result = StyleDisplay()->UsedAppearance() == NS_THEME_NONE ? 0 : DefaultSize();
 #else
   result = DefaultSize();
 #endif
@@ -57,7 +57,7 @@ nsFormControlFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
   nscoord result;
   DISPLAY_PREF_WIDTH(this, result);
 #if !defined(MOZ_WIDGET_ANDROID)
-  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
+  result = StyleDisplay()->UsedAppearance() == NS_THEME_NONE ? 0 : DefaultSize();
 #else
   result = DefaultSize();
 #endif
@@ -77,7 +77,7 @@ nsFormControlFrame::ComputeAutoSize(nsRenderingContext* aRC,
 {
   LogicalSize size(aWM, 0, 0);
 #if !defined(MOZ_WIDGET_ANDROID)
-  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
+  if (StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     return size;
   }
 #endif
@@ -101,7 +101,7 @@ nsFormControlFrame::GetLogicalBaseline(WritingMode aWritingMode) const
 #if !defined(MOZ_WIDGET_ANDROID)
   // For appearance:none we use a standard CSS baseline, i.e. synthesized from
   // our margin-box.
-  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
+  if (StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     return nsAtomicContainerFrame::GetLogicalBaseline(aWritingMode);
   }
 #endif
diff --git a/layout/forms/nsMeterFrame.cpp b/layout/forms/nsMeterFrame.cpp
index 27387a274537..bbafb48af589 100644
--- a/layout/forms/nsMeterFrame.cpp
+++ b/layout/forms/nsMeterFrame.cpp
@@ -266,11 +266,11 @@ nsMeterFrame::ShouldUseNativeStyle() const
   // - both frames use the native appearance;
   // - neither frame has author specified rules setting the border or the
   //   background.
-  return StyleDisplay()->mAppearance == NS_THEME_METERBAR &&
+  return StyleDisplay()->UsedAppearance() == NS_THEME_METERBAR &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND) &&
          barFrame &&
-         barFrame->StyleDisplay()->mAppearance == NS_THEME_METERCHUNK &&
+         barFrame->StyleDisplay()->UsedAppearance() == NS_THEME_METERCHUNK &&
          !PresContext()->HasAuthorSpecifiedRules(barFrame,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND);
 }
diff --git a/layout/forms/nsNumberControlFrame.cpp b/layout/forms/nsNumberControlFrame.cpp
index e17642410dc5..79c380d6cc0f 100644
--- a/layout/forms/nsNumberControlFrame.cpp
+++ b/layout/forms/nsNumberControlFrame.cpp
@@ -416,7 +416,7 @@ nsNumberControlFrame::CreateAnonymousContent(nsTArray<ContentInfo>& aElements)
     nsContentUtils::AddScriptRunner(focusJob);
   }
 
-  if (StyleDisplay()->mAppearance == NS_THEME_TEXTFIELD) {
+  if (StyleDisplay()->UsedAppearance() == NS_THEME_TEXTFIELD) {
     // The author has elected to hide the spinner by setting this
     // -moz-appearance. We will reframe if it changes.
     return rv;
@@ -615,11 +615,11 @@ nsNumberControlFrame::ShouldUseNativeStyleForSpinner() const
   nsIFrame* spinDownFrame = mSpinDown->GetPrimaryFrame();
 
   return spinUpFrame &&
-    spinUpFrame->StyleDisplay()->mAppearance == NS_THEME_SPINNER_UPBUTTON &&
+    spinUpFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SPINNER_UPBUTTON &&
     !PresContext()->HasAuthorSpecifiedRules(spinUpFrame,
                                             STYLES_DISABLING_NATIVE_THEMING) &&
     spinDownFrame &&
-    spinDownFrame->StyleDisplay()->mAppearance == NS_THEME_SPINNER_DOWNBUTTON &&
+    spinDownFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SPINNER_DOWNBUTTON &&
     !PresContext()->HasAuthorSpecifiedRules(spinDownFrame,
                                             STYLES_DISABLING_NATIVE_THEMING);
 }
diff --git a/layout/forms/nsProgressFrame.cpp b/layout/forms/nsProgressFrame.cpp
index e07e988639de..5f8135745b26 100644
--- a/layout/forms/nsProgressFrame.cpp
+++ b/layout/forms/nsProgressFrame.cpp
@@ -279,11 +279,11 @@ nsProgressFrame::ShouldUseNativeStyle() const
   // - both frames use the native appearance;
   // - neither frame has author specified rules setting the border or the
   //   background.
-  return StyleDisplay()->mAppearance == NS_THEME_PROGRESSBAR &&
+  return StyleDisplay()->UsedAppearance() == NS_THEME_PROGRESSBAR &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND) &&
          barFrame &&
-         barFrame->StyleDisplay()->mAppearance == NS_THEME_PROGRESSCHUNK &&
+         barFrame->StyleDisplay()->UsedAppearance() == NS_THEME_PROGRESSCHUNK &&
          !PresContext()->HasAuthorSpecifiedRules(barFrame,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND);
 }
diff --git a/layout/forms/nsRangeFrame.cpp b/layout/forms/nsRangeFrame.cpp
index 25991be34d75..4c257a9c4064 100644
--- a/layout/forms/nsRangeFrame.cpp
+++ b/layout/forms/nsRangeFrame.cpp
@@ -300,7 +300,7 @@ nsRangeFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
   }
 
   if (IsThemed(disp) &&
-      PresContext()->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
+      PresContext()->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
     return; // the native theme displays its own visual indication of focus
   }
 
@@ -878,7 +878,7 @@ nsRangeFrame::ShouldUseNativeStyle() const
   nsIFrame* progressFrame = mProgressDiv->GetPrimaryFrame();
   nsIFrame* thumbFrame = mThumbDiv->GetPrimaryFrame();
 
-  return (StyleDisplay()->mAppearance == NS_THEME_RANGE) &&
+  return (StyleDisplay()->UsedAppearance() == NS_THEME_RANGE) &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  (NS_AUTHOR_SPECIFIED_BORDER |
                                                   NS_AUTHOR_SPECIFIED_BACKGROUND)) &&
diff --git a/layout/forms/test/bug665540_window.xul b/layout/forms/test/bug665540_window.xul
index f0225ef9363b..089b436a70b8 100644
--- a/layout/forms/test/bug665540_window.xul
+++ b/layout/forms/test/bug665540_window.xul
@@ -10,7 +10,7 @@
   </script>
 
   <body xmlns="http://www.w3.org/1999/xhtml">
-    <select id="select" style="-moz-appearance:none">
+    <select id="select" style="-moz-appearance:none; appearance: none">
       <option id="optiona">a</option>
       <option>b</option>
     </select>
diff --git a/layout/forms/test/test_bug476308.html b/layout/forms/test/test_bug476308.html
index d8f572803553..4160890d100a 100644
--- a/layout/forms/test/test_bug476308.html
+++ b/layout/forms/test/test_bug476308.html
@@ -11,7 +11,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=476308
 </head>
 <body>
 
-<button style="-moz-appearance: none; width: 100px; height: 60px; background-color: red; border: 2px solid green; box-shadow: 30px 0px 3.5px black; position: absolute; top: 300px; left: 20px;"
+<button style="-moz-appearance: none; appearance: none; width: 100px; height: 60px; background-color: red; border: 2px solid green; box-shadow: 30px 0px 3.5px black; position: absolute; top: 300px; left: 20px;"
         id="button1">1</button>
 
 <br />
diff --git a/layout/forms/test/test_textarea_resize.html b/layout/forms/test/test_textarea_resize.html
index c71f554e0dd0..6b2d7aeed250 100644
--- a/layout/forms/test/test_textarea_resize.html
+++ b/layout/forms/test/test_textarea_resize.html
@@ -10,7 +10,7 @@
 <div id="content" style="display: none">
 </div>
 
-<textarea id="textarea" style="-moz-appearance: none; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea>
+<textarea id="textarea" style="-moz-appearance: none; appearance: none; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea>
 
 <pre id="test">
 <script type="application/javascript">
diff --git a/layout/generic/ReflowInput.cpp b/layout/generic/ReflowInput.cpp
index 9f6ee5473c00..a51e14aac244 100644
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -2536,7 +2536,7 @@ SizeComputationInput::InitOffsets(WritingMode aWM,
   nsIntMargin widget;
   if (isThemed &&
       presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
-                                                mFrame, disp->mAppearance,
+                                                mFrame, disp->UsedAppearance(),
                                                 &widget)) {
     ComputedPhysicalPadding().top = presContext->DevPixelsToAppUnits(widget.top);
     ComputedPhysicalPadding().right = presContext->DevPixelsToAppUnits(widget.right);
@@ -2587,7 +2587,7 @@ SizeComputationInput::InitOffsets(WritingMode aWM,
   if (isThemed) {
     nsIntMargin widget;
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             mFrame, disp->mAppearance,
+                                             mFrame, disp->UsedAppearance(),
                                              &widget);
     ComputedPhysicalBorderPadding().top =
       presContext->DevPixelsToAppUnits(widget.top);
diff --git a/layout/generic/crashtests/crashtests.list b/layout/generic/crashtests/crashtests.list
index 887f07d3a002..a77d2aae13dc 100644
--- a/layout/generic/crashtests/crashtests.list
+++ b/layout/generic/crashtests/crashtests.list
@@ -110,7 +110,7 @@ load 379917-1.xhtml
 load 380012-1.html
 load 381152-1.html
 load 381786-1.html
-load 382129-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 382129-1.xhtml
 load 382131-1.html
 load 382199-1.html
 load 382208-1.xhtml
@@ -119,7 +119,7 @@ load 382396-1.xhtml
 load 382745-1.xhtml
 load 383089-1.html
 load 385265-1.xhtml
-load 385295-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 385295-1.xhtml
 load 385344-1.html
 load 385344-2.html
 load 385414-1.html
@@ -185,7 +185,7 @@ load 400078-1.html
 load 400190.html
 load 400223-1.html # bug 1323652
 load 400232-1.html
-load 400244-1.html
+pref(layout.css.moz-appearance.enabled,true) load 400244-1.html
 load 400768-1.xhtml
 load 400768-2.xhtml
 load 401042-1.xhtml
@@ -490,9 +490,9 @@ load 762764-1.html
 load 762902.html
 load 765409.html
 asserts(0-200) load 765621.html # bug 703550
-asserts(0-200) load 767765.html # bug 407550, bug 871758, and various nscoord_MAX related asserts
+pref(layout.css.moz-appearance.enabled,true) asserts(0-200) load 767765.html # bug 407550, bug 871758, and various nscoord_MAX related asserts
 load 769120.html
-asserts(0-2) load 769303-1.html # bug 1123979
+pref(layout.css.moz-appearance.enabled,true) asserts(0-2) load 769303-1.html # bug 1123979
 load 769303-2.html
 load 777838.html
 load 783228.html
diff --git a/layout/generic/nsFlexContainerFrame.cpp b/layout/generic/nsFlexContainerFrame.cpp
index 607043bd724c..0a719a103c32 100644
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -1226,7 +1226,7 @@ nsFlexContainerFrame::GenerateFlexItemForChild(
     bool canOverride = true;
     aPresContext->GetTheme()->
       GetMinimumWidgetSize(aPresContext, aChildFrame,
-                           disp->mAppearance,
+                           disp->UsedAppearance(),
                            &widgetMinSize, &canOverride);
 
     nscoord widgetMainMinSize =
diff --git a/layout/generic/nsFrame.cpp b/layout/generic/nsFrame.cpp
index b48149bc90cf..16f7bf329b97 100644
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -1155,7 +1155,7 @@ nsIFrame::GetUsedBorder() const
     nsIntMargin result;
     nsPresContext *presContext = PresContext();
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             mutable_this, disp->mAppearance,
+                                             mutable_this, disp->UsedAppearance(),
                                              &result);
     border.left = presContext->DevPixelsToAppUnits(result.left);
     border.top = presContext->DevPixelsToAppUnits(result.top);
@@ -1191,7 +1191,7 @@ nsIFrame::GetUsedPadding() const
     nsIntMargin widget;
     if (presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
                                                   mutable_this,
-                                                  disp->mAppearance,
+                                                  disp->UsedAppearance(),
                                                   &widget)) {
       padding.top = presContext->DevPixelsToAppUnits(widget.top);
       padding.right = presContext->DevPixelsToAppUnits(widget.right);
@@ -2077,7 +2077,7 @@ nsFrame::DisplayBackgroundUnconditional(nsDisplayListBuilder* aBuilder,
   // receive a propagated background should just set aForceBackground to
   // true.
   if (aBuilder->IsForEventDelivery() || aForceBackground ||
-      !StyleBackground()->IsTransparent(this) || StyleDisplay()->mAppearance) {
+      !StyleBackground()->IsTransparent(this) || StyleDisplay()->UsedAppearance()) {
     return nsDisplayBackgroundImage::AppendBackgroundItemsToTop(
         aBuilder, this, GetRectRelativeToSelf(), aLists.BorderBackground());
   }
@@ -3069,7 +3069,7 @@ nsIFrame::BuildDisplayListForChild(nsDisplayListBuilder*   aBuilder,
   // REVIEW: Taken from nsBoxFrame::Paint
   // Don't paint our children if the theme object is a leaf.
   if (IsThemed(ourDisp) &&
-      !PresContext()->GetTheme()->WidgetIsContainer(ourDisp->mAppearance))
+      !PresContext()->GetTheme()->WidgetIsContainer(ourDisp->UsedAppearance()))
     return;
 
   // Since we're now sure that we're adding this frame to the display list
@@ -4983,7 +4983,7 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
 
     nsIntMargin border;
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             aFrame, disp->mAppearance,
+                                             aFrame, disp->UsedAppearance(),
                                              &border);
     result.hBorder =
       presContext->DevPixelsToAppUnits(verticalAxis ? border.TopBottom()
@@ -4991,7 +4991,7 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
 
     nsIntMargin padding;
     if (presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
-                                                  aFrame, disp->mAppearance,
+                                                  aFrame, disp->UsedAppearance(),
                                                   &padding)) {
       result.hPadding =
         presContext->DevPixelsToAppUnits(verticalAxis ? padding.TopBottom()
@@ -5262,7 +5262,7 @@ nsFrame::ComputeSize(nsRenderingContext* aRenderingContext,
     bool canOverride = true;
     nsPresContext *presContext = PresContext();
     presContext->GetTheme()->
-      GetMinimumWidgetSize(presContext, this, disp->mAppearance,
+      GetMinimumWidgetSize(presContext, this, disp->UsedAppearance(),
                            &widget, &canOverride);
 
     // Convert themed widget's physical dimensions to logical coords
@@ -5721,7 +5721,7 @@ nsFrame::ComputeSimpleTightBounds(DrawTarget* aDrawTarget) const
 {
   if (StyleOutline()->ShouldPaintOutline() || StyleBorder()->HasBorder() ||
       !StyleBackground()->IsTransparent(this) ||
-      StyleDisplay()->mAppearance) {
+      StyleDisplay()->UsedAppearance()) {
     // Not necessarily tight, due to clipping, negative
     // outline-offset, and lots of other issues, but that's OK
     return GetVisualOverflowRect();
@@ -9056,7 +9056,7 @@ nsIFrame::FinishAndStoreOverflow(nsOverflowAreas& aOverflowAreas,
     nsPresContext *presContext = PresContext();
     if (presContext->GetTheme()->
           GetWidgetOverflow(presContext->DeviceContext(), this,
-                            disp->mAppearance, &r)) {
+                            disp->UsedAppearance(), &r)) {
       nsRect& vo = aOverflowAreas.VisualOverflow();
       vo.UnionRectEdges(vo, r);
     }
diff --git a/layout/generic/nsIFrame.h b/layout/generic/nsIFrame.h
index 6346c8761e63..4c2e4fd84b7f 100644
--- a/layout/generic/nsIFrame.h
+++ b/layout/generic/nsIFrame.h
@@ -1614,16 +1614,16 @@ public:
   bool IsThemed(const nsStyleDisplay* aDisp,
                   nsITheme::Transparency* aTransparencyState = nullptr) const {
     nsIFrame* mutable_this = const_cast<nsIFrame*>(this);
-    if (!aDisp->mAppearance)
+    if (!aDisp->UsedAppearance())
       return false;
     nsPresContext* pc = PresContext();
     nsITheme *theme = pc->GetTheme();
     if(!theme ||
-       !theme->ThemeSupportsWidget(pc, mutable_this, aDisp->mAppearance))
+       !theme->ThemeSupportsWidget(pc, mutable_this, aDisp->UsedAppearance()))
       return false;
     if (aTransparencyState) {
       *aTransparencyState =
-        theme->GetWidgetTransparency(mutable_this, aDisp->mAppearance);
+        theme->GetWidgetTransparency(mutable_this, aDisp->UsedAppearance());
     }
     return true;
   }
diff --git a/layout/generic/test/test_selection_preventDefault.html b/layout/generic/test/test_selection_preventDefault.html
index add460a632b7..7a2fb999b706 100644
--- a/layout/generic/test/test_selection_preventDefault.html
+++ b/layout/generic/test/test_selection_preventDefault.html
@@ -20,7 +20,7 @@
     width: 80px;
     margin: 0;
     padding: 0;
-    -moz-appearance: none;
+    -moz-appearance: none; appearance: none;
   }
 </style>
 
diff --git a/layout/painting/nsCSSRendering.cpp b/layout/painting/nsCSSRendering.cpp
index 818e56986084..840e0b2cfd8d 100644
--- a/layout/painting/nsCSSRendering.cpp
+++ b/layout/painting/nsCSSRendering.cpp
@@ -812,11 +812,11 @@ nsCSSRendering::PaintBorderWithStyleBorder(nsPresContext* aPresContext,
   // renderer draw the border.  DO not get the data from aForFrame, since the passed in style context
   // may be different!  Always use |aStyleContext|!
   const nsStyleDisplay* displayData = aStyleContext->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aPresContext->GetTheme();
     if (theme &&
         theme->ThemeSupportsWidget(aPresContext, aForFrame,
-                                   displayData->mAppearance)) {
+                                   displayData->UsedAppearance())) {
       return DrawResult::SUCCESS; // Let the theme handle it.
     }
   }
@@ -900,11 +900,11 @@ nsCSSRendering::CreateBorderRendererWithStyleBorder(nsPresContext* aPresContext,
                                                     Sides aSkipSides)
 {
   const nsStyleDisplay* displayData = aStyleContext->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aPresContext->GetTheme();
     if (theme &&
         theme->ThemeSupportsWidget(aPresContext, aForFrame,
-                                   displayData->mAppearance)) {
+                                   displayData->UsedAppearance())) {
       return Nothing();
     }
   }
@@ -1584,7 +1584,7 @@ nsCSSRendering::PaintBoxShadowOuter(nsPresContext* aPresContext,
       nativeRect.IntersectRect(frameRect, nativeRect);
       nsRenderingContext wrapperCtx(shadowContext);
       aPresContext->GetTheme()->DrawWidgetBackground(&wrapperCtx, aForFrame,
-          styleDisplay->mAppearance, aFrameArea, nativeRect);
+          styleDisplay->UsedAppearance(), aFrameArea, nativeRect);
 
       blurringArea.DoPaint();
       renderContext->Restore();
@@ -1928,7 +1928,7 @@ nsCSSRendering::PaintStyleImageLayer(const PaintBGParams& aParams,
     // a root, otherwise keep going in order to let the theme stuff
     // draw the background. The canvas really should be drawing the
     // bg, but there's no way to hook that up via css.
-    if (!aParams.frame->StyleDisplay()->mAppearance) {
+    if (!aParams.frame->StyleDisplay()->UsedAppearance()) {
       return DrawResult::SUCCESS;
     }
 
@@ -1960,11 +1960,11 @@ nsCSSRendering::CanBuildWebRenderDisplayItemsForStyleImageLayer(LayerManager* aM
 
   // We cannot draw native themed backgrounds
   const nsStyleDisplay* displayData = aFrame->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aPresCtx.GetTheme();
     if (theme && theme->ThemeSupportsWidget(&aPresCtx,
                                             aFrame,
-                                            displayData->mAppearance)) {
+                                            displayData->UsedAppearance())) {
       return false;
     }
   }
@@ -2005,7 +2005,7 @@ nsCSSRendering::BuildWebRenderDisplayItemsForStyleImageLayer(const PaintBGParams
     // a root, otherwise keep going in order to let the theme stuff
     // draw the background. The canvas really should be drawing the
     // bg, but there's no way to hook that up via css.
-    if (!aParams.frame->StyleDisplay()->mAppearance) {
+    if (!aParams.frame->StyleDisplay()->UsedAppearance()) {
       return DrawResult::SUCCESS;
     }
 
@@ -2513,18 +2513,18 @@ nsCSSRendering::PaintStyleImageLayerWithSC(const PaintBGParams& aParams,
   // renderer draw the background and bail out.
   // XXXzw this ignores aParams.bgClipRect.
   const nsStyleDisplay* displayData = aParams.frame->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aParams.presCtx.GetTheme();
     if (theme && theme->ThemeSupportsWidget(&aParams.presCtx,
                                             aParams.frame,
-                                            displayData->mAppearance)) {
+                                            displayData->UsedAppearance())) {
       nsRect drawing(aParams.borderArea);
       theme->GetWidgetOverflow(aParams.presCtx.DeviceContext(),
-                               aParams.frame, displayData->mAppearance,
+                               aParams.frame, displayData->UsedAppearance(),
                                &drawing);
       drawing.IntersectRect(drawing, aParams.dirtyRect);
       theme->DrawWidgetBackground(&aRenderingCtx, aParams.frame,
-                                  displayData->mAppearance, aParams.borderArea,
+                                  displayData->UsedAppearance(), aParams.borderArea,
                                   drawing);
       return DrawResult::SUCCESS;
     }
diff --git a/layout/painting/nsDisplayList.cpp b/layout/painting/nsDisplayList.cpp
index 25d0db4599ef..71a515a29a77 100644
--- a/layout/painting/nsDisplayList.cpp
+++ b/layout/painting/nsDisplayList.cpp
@@ -3014,7 +3014,7 @@ static nsStyleContext* GetBackgroundStyleContext(nsIFrame* aFrame)
     // a root, other wise keep going in order to let the theme stuff
     // draw the background. The canvas really should be drawing the
     // bg, but there's no way to hook that up via css.
-    if (!aFrame->StyleDisplay()->mAppearance) {
+    if (!aFrame->StyleDisplay()->UsedAppearance()) {
       return nullptr;
     }
 
@@ -3174,7 +3174,7 @@ nsDisplayBackgroundImage::AppendBackgroundItemsToTop(nsDisplayListBuilder* aBuil
 
   if (isThemed) {
     nsITheme* theme = presContext->GetTheme();
-    if (theme->NeedToClearBackgroundBehindWidget(aFrame, aFrame->StyleDisplay()->mAppearance) &&
+    if (theme->NeedToClearBackgroundBehindWidget(aFrame, aFrame->StyleDisplay()->UsedAppearance()) &&
         aBuilder->IsInChromeDocumentOrPopup() && !aBuilder->IsInTransform()) {
       bgItemList.AppendNewToTop(
         new (aBuilder) nsDisplayClearBackground(aBuilder, aFrame));
@@ -3801,19 +3801,19 @@ nsDisplayThemedBackground::nsDisplayThemedBackground(nsDisplayListBuilder* aBuil
   MOZ_COUNT_CTOR(nsDisplayThemedBackground);
 
   const nsStyleDisplay* disp = mFrame->StyleDisplay();
-  mAppearance = disp->mAppearance;
+  mAppearance = disp->UsedAppearance();
   mFrame->IsThemed(disp, &mThemeTransparency);
 
   // Perform necessary RegisterThemeGeometry
   nsITheme* theme = mFrame->PresContext()->GetTheme();
   nsITheme::ThemeGeometryType type =
-    theme->ThemeGeometryTypeForWidget(mFrame, disp->mAppearance);
+    theme->ThemeGeometryTypeForWidget(mFrame, disp->UsedAppearance());
   if (type != nsITheme::eThemeGeometryTypeUnknown) {
     RegisterThemeGeometry(aBuilder, aFrame, type);
   }
 
-  if (disp->mAppearance == NS_THEME_WIN_BORDERLESS_GLASS ||
-      disp->mAppearance == NS_THEME_WIN_GLASS) {
+  if (disp->UsedAppearance() == NS_THEME_WIN_BORDERLESS_GLASS ||
+      disp->UsedAppearance() == NS_THEME_WIN_GLASS) {
     aBuilder->SetGlassDisplayItem(this);
   }
 
@@ -3947,7 +3947,7 @@ nsDisplayThemedBackground::GetBoundsInternal() {
   nsRect r = mBackgroundRect - ToReferenceFrame();
   presContext->GetTheme()->
       GetWidgetOverflow(presContext->DeviceContext(), mFrame,
-                        mFrame->StyleDisplay()->mAppearance, &r);
+                        mFrame->StyleDisplay()->UsedAppearance(), &r);
   return r + ToReferenceFrame();
 }
 
diff --git a/layout/reftests/abs-pos/button-1.html b/layout/reftests/abs-pos/button-1.html
index 2dc248946a48..9d9f55db7d27 100644
--- a/layout/reftests/abs-pos/button-1.html
+++ b/layout/reftests/abs-pos/button-1.html
@@ -11,7 +11,7 @@ width:
 height:100px;
 border:none;
 background:#00ff00;
--moz-appearance: none;
+-moz-appearance: none; appearance: none;
 border-radius: 0 !important;
 }
 div {
diff --git a/layout/reftests/abs-pos/button-2.html b/layout/reftests/abs-pos/button-2.html
index a4ec462a32bc..5dc5cc3082e0 100644
--- a/layout/reftests/abs-pos/button-2.html
+++ b/layout/reftests/abs-pos/button-2.html
@@ -11,7 +11,7 @@ height: 100px;
 border:none;
 text-align: left;
 font: 12px serif;
--moz-appearance: none;
+-moz-appearance: none; appearance: none;
 border-radius: 0 !important;
 }
 button span {
diff --git a/layout/reftests/box-shadow/boxshadow-button-ref.html b/layout/reftests/box-shadow/boxshadow-button-ref.html
index 9d026129d454..eca92a87b47c 100644
--- a/layout/reftests/box-shadow/boxshadow-button-ref.html
+++ b/layout/reftests/box-shadow/boxshadow-button-ref.html
@@ -4,7 +4,7 @@
   width: 100px;
   height: 100px;
   background-color: grey;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   box-shadow: 4px 4px 3px black;
   border: none !important;
   position: absolute;
diff --git a/layout/reftests/box-shadow/boxshadow-button.html b/layout/reftests/box-shadow/boxshadow-button.html
index f1522536db77..9482d95d6a97 100644
--- a/layout/reftests/box-shadow/boxshadow-button.html
+++ b/layout/reftests/box-shadow/boxshadow-button.html
@@ -4,7 +4,7 @@
   width: 100px;
   height: 100px;
   background-color: grey;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   box-shadow: 4px 4px 3px black;
   border: none !important;
   position: absolute;
diff --git a/layout/reftests/bugs/180085-1-ref.html b/layout/reftests/bugs/180085-1-ref.html
index d07a67f7f183..465281ba10b8 100644
--- a/layout/reftests/bugs/180085-1-ref.html
+++ b/layout/reftests/bugs/180085-1-ref.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; }
+ .none { -moz-appearance: none; appearance: none; }
  input, button { width: 1.5em; padding: 0; font-size: 14px; }
 </style>
 </head>
diff --git a/layout/reftests/bugs/180085-1.html b/layout/reftests/bugs/180085-1.html
index 1c22030a5ba7..2feddbd9e469 100644
--- a/layout/reftests/bugs/180085-1.html
+++ b/layout/reftests/bugs/180085-1.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; }
+ .none { -moz-appearance: none; appearance: none; }
  input, button { width: 1.5em; padding-top: 0; padding-bottom: 0; font-size: 14px; }
 </style>
 </head>
diff --git a/layout/reftests/bugs/180085-2-ref.html b/layout/reftests/bugs/180085-2-ref.html
index 48e106b089dd..0ab647b73949 100644
--- a/layout/reftests/bugs/180085-2-ref.html
+++ b/layout/reftests/bugs/180085-2-ref.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; }
+ .none { -moz-appearance: none; appearance: none; }
  input, button { width: 1.5em; padding: 0; font-size: 12px }
 </style>
 </head>
diff --git a/layout/reftests/bugs/180085-2.html b/layout/reftests/bugs/180085-2.html
index 66d3be296af1..cc5aefdb7d18 100644
--- a/layout/reftests/bugs/180085-2.html
+++ b/layout/reftests/bugs/180085-2.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; }
+ .none { -moz-appearance: none; appearance: none; }
  input, button { width: 1.5em; padding-top: 0; padding-bottom: 0; font-size: 12px }
 </style>
 </head>
diff --git a/layout/reftests/bugs/363858-2-ref.html b/layout/reftests/bugs/363858-2-ref.html
index 4642dc7de94f..b81bf05c6b2a 100644
--- a/layout/reftests/bugs/363858-2-ref.html
+++ b/layout/reftests/bugs/363858-2-ref.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style>
-* { -moz-appearance: none }
+* { -moz-appearance: none; appearance: none }
 </style>
 </head>
 <body>
diff --git a/layout/reftests/bugs/363858-2.html b/layout/reftests/bugs/363858-2.html
index 4c6300c42d73..2956173fc59d 100644
--- a/layout/reftests/bugs/363858-2.html
+++ b/layout/reftests/bugs/363858-2.html
@@ -4,7 +4,7 @@
 <style>
 div { width: 0 }
 option { white-space: normal }
-* { -moz-appearance: none }
+* { -moz-appearance: none; appearance: none }
 </style>
 </head>
 <body>
diff --git a/layout/reftests/bugs/363858-4-ref.html b/layout/reftests/bugs/363858-4-ref.html
index 6e7a904aef3e..235c0f62893f 100644
--- a/layout/reftests/bugs/363858-4-ref.html
+++ b/layout/reftests/bugs/363858-4-ref.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style>
-* { -moz-appearance: none }
+* { -moz-appearance: none; appearance: none }
 </style>
 </head>
 <body>
diff --git a/layout/reftests/bugs/363858-4.html b/layout/reftests/bugs/363858-4.html
index 6a7bef2dd0ed..1685e1558200 100644
--- a/layout/reftests/bugs/363858-4.html
+++ b/layout/reftests/bugs/363858-4.html
@@ -5,7 +5,7 @@
 div { width: 0 }
 option { white-space: normal }
 optgroup { white-space: normal }
-* { -moz-appearance: none }
+* { -moz-appearance: none; appearance: none }
 </style>
 </head>
 <body>
diff --git a/layout/reftests/bugs/363858-6-ref.html b/layout/reftests/bugs/363858-6-ref.html
index 7a583c79e129..e06df79b45eb 100644
--- a/layout/reftests/bugs/363858-6-ref.html
+++ b/layout/reftests/bugs/363858-6-ref.html
@@ -3,7 +3,7 @@
 <head>
 <style>
 select { width: 100%; box-sizing: border-box }
-* { -moz-appearance: none; }
+* { -moz-appearance: none; appearance: none; }
 </style>
 </head>
 <body>
diff --git a/layout/reftests/bugs/363858-6a.html b/layout/reftests/bugs/363858-6a.html
index f2cb14a9995d..b74855bebedf 100644
--- a/layout/reftests/bugs/363858-6a.html
+++ b/layout/reftests/bugs/363858-6a.html
@@ -3,7 +3,7 @@
 <head>
 <style>
 option { padding-left: 100%; }
-* { -moz-appearance: none; }
+* { -moz-appearance: none; appearance: none; }
 </style>
 </head>
 <body>
diff --git a/layout/reftests/bugs/363858-6b.html b/layout/reftests/bugs/363858-6b.html
index 661a4c3e60fc..361012a853eb 100644
--- a/layout/reftests/bugs/363858-6b.html
+++ b/layout/reftests/bugs/363858-6b.html
@@ -3,7 +3,7 @@
 <head>
 <style>
 select { width: -moz-available; }
-* { -moz-appearance: none; }
+* { -moz-appearance: none; appearance: none; }
 </style>
 </head>
 <body>
diff --git a/layout/reftests/bugs/373381-2-ref.html b/layout/reftests/bugs/373381-2-ref.html
index d3051d4697fd..5ed8faf7ff05 100644
--- a/layout/reftests/bugs/373381-2-ref.html
+++ b/layout/reftests/bugs/373381-2-ref.html
@@ -1,3 +1,3 @@
-<input type="radio" style="-moz-appearance:none">
-<input type="radio" style="-moz-appearance:none">
-<input type="radio" style="-moz-appearance:none">
+<input type="radio" style="-moz-appearance:none; appearance: none">
+<input type="radio" style="-moz-appearance:none; appearance: none">
+<input type="radio" style="-moz-appearance:none; appearance: none">
diff --git a/layout/reftests/bugs/373381-2.html b/layout/reftests/bugs/373381-2.html
index 356578ae5032..9ba9db90ae37 100644
--- a/layout/reftests/bugs/373381-2.html
+++ b/layout/reftests/bugs/373381-2.html
@@ -1,3 +1,3 @@
-<input type="radio" style="width: auto; -moz-appearance: none">
-<input type="radio" style="height: auto; -moz-appearance: none">
-<input type="radio" style="height: auto; width: auto; -moz-appearance: none">
+<input type="radio" style="width: auto; -moz-appearance: none; appearance: none">
+<input type="radio" style="height: auto; -moz-appearance: none; appearance: none">
+<input type="radio" style="height: auto; width: auto; -moz-appearance: none; appearance: none">
diff --git a/layout/reftests/bugs/373381-4-ref.html b/layout/reftests/bugs/373381-4-ref.html
index 1fee977b80fa..0e4fb1d76aa4 100644
--- a/layout/reftests/bugs/373381-4-ref.html
+++ b/layout/reftests/bugs/373381-4-ref.html
@@ -1,3 +1,3 @@
-<input type="checkbox" style="-moz-appearance:none">
-<input type="checkbox" style="-moz-appearance:none">
-<input type="checkbox" style="-moz-appearance:none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
diff --git a/layout/reftests/bugs/373381-4.html b/layout/reftests/bugs/373381-4.html
index 20a84245fb3a..945e05a53570 100644
--- a/layout/reftests/bugs/373381-4.html
+++ b/layout/reftests/bugs/373381-4.html
@@ -1,3 +1,3 @@
-<input type="checkbox" style="width: auto; -moz-appearance: none">
-<input type="checkbox" style="height: auto; -moz-appearance: none">
-<input type="checkbox" style="height: auto; width: auto; -moz-appearance: none">
+<input type="checkbox" style="width: auto; -moz-appearance: none; appearance: none">
+<input type="checkbox" style="height: auto; -moz-appearance: none; appearance: none">
+<input type="checkbox" style="height: auto; width: auto; -moz-appearance: none; appearance: none">
diff --git a/layout/reftests/bugs/423599-1-ref.html b/layout/reftests/bugs/423599-1-ref.html
index 5b6258334b0d..938ce5de7e74 100644
--- a/layout/reftests/bugs/423599-1-ref.html
+++ b/layout/reftests/bugs/423599-1-ref.html
@@ -1,7 +1,7 @@
 <html>
   <head><style>
     select          { visibility: hidden; }
-    select.unthemed { -moz-appearance: none; margin: 2px 0 2px 0}
+    select.unthemed { -moz-appearance: none; appearance: none; margin: 2px 0 2px 0}
   </style></head>
   <body>
     <div style="background: lightblue">
diff --git a/layout/reftests/bugs/423599-1.html b/layout/reftests/bugs/423599-1.html
index 5023878964b3..dafa184ee1ab 100644
--- a/layout/reftests/bugs/423599-1.html
+++ b/layout/reftests/bugs/423599-1.html
@@ -1,7 +1,7 @@
 <html>
   <head><style>
     select          { visibility: hidden; }
-    select.unthemed { -moz-appearance: none; margin: 2px 0 2px 0}
+    select.unthemed { -moz-appearance: none; appearance: none; margin: 2px 0 2px 0}
   </style></head>
   <body>
     <div style="background: lightblue">
diff --git a/layout/reftests/bugs/468473-1-ref.xul b/layout/reftests/bugs/468473-1-ref.xul
index 5969b67aa02d..82efb39a860b 100644
--- a/layout/reftests/bugs/468473-1-ref.xul
+++ b/layout/reftests/bugs/468473-1-ref.xul
@@ -3,7 +3,7 @@
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <hbox>
-<button label="Button" style="min-width: 0; -moz-appearance: none; border: medium solid; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px;"/>
+<button label="Button" style="min-width: 0; -moz-appearance: none; appearance: none; border: medium solid; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px;"/>
 <box flex="1" style="background: green" />
 </hbox>
 
diff --git a/layout/reftests/bugs/468473-1.xul b/layout/reftests/bugs/468473-1.xul
index 6646a7c83d39..f8fc5a9544e5 100644
--- a/layout/reftests/bugs/468473-1.xul
+++ b/layout/reftests/bugs/468473-1.xul
@@ -3,7 +3,7 @@
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <hbox>
-<button label="Button" style="min-width: 0; -moz-appearance: none; border-width: 0; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px; border-style: solid; border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 fill;"/>
+<button label="Button" style="min-width: 0; -moz-appearance: none; appearance: none; border-width: 0; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px; border-style: solid; border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 fill;"/>
 <box flex="1" style="background: green" />
 </hbox>
 
diff --git a/layout/reftests/bugs/474336-1-ref.xul b/layout/reftests/bugs/474336-1-ref.xul
index 6d11e409231f..df31e37745da 100644
--- a/layout/reftests/bugs/474336-1-ref.xul
+++ b/layout/reftests/bugs/474336-1-ref.xul
@@ -6,11 +6,11 @@
 
 <html:style>
     #prog {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         background-color: blue;
     }
     #prog .progress-bar {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         border-radius: 3px 3px;
         background-color: red;
     }
diff --git a/layout/reftests/bugs/474336-1.xul b/layout/reftests/bugs/474336-1.xul
index 958d6c49832d..70f141293bd9 100644
--- a/layout/reftests/bugs/474336-1.xul
+++ b/layout/reftests/bugs/474336-1.xul
@@ -6,11 +6,11 @@
 
 <html:style>
     #prog {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         background-color: blue;
     }
     #prog .progress-bar {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         border-radius: 3px 3px;
         background-color: red;
     }
diff --git a/layout/reftests/bugs/491180-1-ref.html b/layout/reftests/bugs/491180-1-ref.html
index e9dcf7cc569c..26734e862175 100644
--- a/layout/reftests/bugs/491180-1-ref.html
+++ b/layout/reftests/bugs/491180-1-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <html>
-  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; padding: 0">
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 0; height: 0; font: inherit; padding: 0">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </div>
diff --git a/layout/reftests/bugs/491180-1.html b/layout/reftests/bugs/491180-1.html
index c82712220f6d..bd6f228469ca 100644
--- a/layout/reftests/bugs/491180-1.html
+++ b/layout/reftests/bugs/491180-1.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <html>
-  <button style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; color: black">
+  <button style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 0; height: 0; font: inherit; color: black">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </button>
diff --git a/layout/reftests/bugs/491180-2-ref.html b/layout/reftests/bugs/491180-2-ref.html
index 7ab4aa58c5c6..aa65d649ab91 100644
--- a/layout/reftests/bugs/491180-2-ref.html
+++ b/layout/reftests/bugs/491180-2-ref.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
 <html>
-  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; padding: 0; white-space: pre; overflow: hidden">Some text</div>
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 20px; font: inherit; padding: 0; white-space: pre; overflow: hidden">Some text</div>
   </div>
diff --git a/layout/reftests/bugs/491180-2.html b/layout/reftests/bugs/491180-2.html
index c5f6b4cb73a5..25a62ac2739f 100644
--- a/layout/reftests/bugs/491180-2.html
+++ b/layout/reftests/bugs/491180-2.html
@@ -1,3 +1,3 @@
 <!DOCTYPE html>
 <html>
-  <input type="button" style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; color: black" value="Some text">
+  <input type="button" style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 20px; font: inherit; color: black" value="Some text">
diff --git a/layout/reftests/bugs/491323-1-ref.xul b/layout/reftests/bugs/491323-1-ref.xul
index bcfd636da22f..0443c242f2a2 100644
--- a/layout/reftests/bugs/491323-1-ref.xul
+++ b/layout/reftests/bugs/491323-1-ref.xul
@@ -6,7 +6,7 @@
     /* Make sure our splitter's background doesn't depend on its hover styles */
     splitter {
       background-color: yellow;
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
     }
   </html:style>
   <splitter collapse="before" resizeafter="farthest" width="200" id="s">
diff --git a/layout/reftests/bugs/491323-1.xul b/layout/reftests/bugs/491323-1.xul
index e255d1d4d344..f35bc648e766 100644
--- a/layout/reftests/bugs/491323-1.xul
+++ b/layout/reftests/bugs/491323-1.xul
@@ -7,7 +7,7 @@
     /* Make sure our splitter's background doesn't depend on its hover styles */
     splitter {
       background-color: yellow;
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
     }
   </html:style>
   <script>
diff --git a/layout/reftests/bugs/542116-1-ref.html b/layout/reftests/bugs/542116-1-ref.html
index 1b0852b297f3..13c42d712fe2 100644
--- a/layout/reftests/bugs/542116-1-ref.html
+++ b/layout/reftests/bugs/542116-1-ref.html
@@ -3,7 +3,7 @@
   <head>
     <style>
       input {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 20px;
diff --git a/layout/reftests/bugs/542116-1.html b/layout/reftests/bugs/542116-1.html
index 02cf77b01362..9529426d5a73 100644
--- a/layout/reftests/bugs/542116-1.html
+++ b/layout/reftests/bugs/542116-1.html
@@ -3,7 +3,7 @@
   <head>
     <style>
       input {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 40px;
diff --git a/layout/reftests/bugs/542116-2-ref.html b/layout/reftests/bugs/542116-2-ref.html
index 3475b140587f..527e353573f0 100644
--- a/layout/reftests/bugs/542116-2-ref.html
+++ b/layout/reftests/bugs/542116-2-ref.html
@@ -3,7 +3,7 @@
   <head>
     <style>
       input {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 20px;
diff --git a/layout/reftests/bugs/542116-2.html b/layout/reftests/bugs/542116-2.html
index e4c247fb5317..14f2373726fe 100644
--- a/layout/reftests/bugs/542116-2.html
+++ b/layout/reftests/bugs/542116-2.html
@@ -3,7 +3,7 @@
   <head>
     <style>
       input {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 40px;
diff --git a/layout/reftests/bugs/664127-1.css b/layout/reftests/bugs/664127-1.css
index 9541a2b241e2..2b85e127e40f 100644
--- a/layout/reftests/bugs/664127-1.css
+++ b/layout/reftests/bugs/664127-1.css
@@ -1,7 +1,7 @@
 /* This external stylesheet is needed to be able to use a cached image
    (solidblue.png) through a relative path */
 tree {
-  height: 100px; -moz-appearance: none; border: none; background-color: transparent;
+  height: 100px; -moz-appearance: none; appearance: none; border: none; background-color: transparent;
 }
 treecol, treecolpicker {
   visibility: hidden;
diff --git a/layout/reftests/bugs/668319-1.xul b/layout/reftests/bugs/668319-1.xul
index e583bd8ea86c..656f420269de 100644
--- a/layout/reftests/bugs/668319-1.xul
+++ b/layout/reftests/bugs/668319-1.xul
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?xml-stylesheet type="text/css" href="data:text/css,
-tree { height: 100px; -moz-appearance: none; border: none; background-color: transparent; }
+tree { height: 100px; -moz-appearance: none; appearance: none; border: none; background-color: transparent; }
 treecol, treecolpicker { visibility: hidden; }
 treechildren::-moz-tree-cell-text { opacity: 0; }
 "?>
diff --git a/layout/reftests/bugs/966992-1-ref.html b/layout/reftests/bugs/966992-1-ref.html
index 889c021948c7..5beaef6448f6 100644
--- a/layout/reftests/bugs/966992-1-ref.html
+++ b/layout/reftests/bugs/966992-1-ref.html
@@ -13,12 +13,12 @@ font-face {
         }
 
     input {
-      width: 100px; padding:50px; -moz-appearance:none; overflow-clip-box:padding-box;
+      width: 100px; padding:50px; -moz-appearance:none; appearance: none; overflow-clip-box:padding-box;
       border: 3px solid black;
       background-color: white;
     }
     textarea, #textarea {
-      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:padding-box;
+      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; appearance: none; overflow-clip-box:padding-box;
       border: 3px solid black;
     }
     #textarea { word-break: break-all; font:14px DejaVuSansMono!important; }
diff --git a/layout/reftests/bugs/966992-1.html b/layout/reftests/bugs/966992-1.html
index 10e7960fc76a..a57389f65667 100644
--- a/layout/reftests/bugs/966992-1.html
+++ b/layout/reftests/bugs/966992-1.html
@@ -13,12 +13,12 @@ font-face {
         }
 
     input {
-      width: 100px; padding:50px; -moz-appearance:none; overflow-clip-box:content-box;
+      width: 100px; padding:50px; -moz-appearance:none; appearance: none; overflow-clip-box:content-box;
       border: 3px solid black;
       background-color: white;
     }
     textarea {
-      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:content-box;
+      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; appearance: none; overflow-clip-box:content-box;
       border: 3px solid black;font:14px DejaVuSansMono!important;
     }
 
diff --git a/layout/reftests/css-enabled/select/style.css b/layout/reftests/css-enabled/select/style.css
index b79686e37f88..e0772767c2ba 100644
--- a/layout/reftests/css-enabled/select/style.css
+++ b/layout/reftests/css-enabled/select/style.css
@@ -1,5 +1,5 @@
 select {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 
 .ref {
diff --git a/layout/reftests/css-invalid/input/style.css b/layout/reftests/css-invalid/input/style.css
index e3e221a26fe3..56ffe967b08c 100644
--- a/layout/reftests/css-invalid/input/style.css
+++ b/layout/reftests/css-invalid/input/style.css
@@ -1,6 +1,6 @@
 /* Override default style */
 input {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: none;
 }
 input:invalid {
diff --git a/layout/reftests/css-placeholder/input/style-shown.css b/layout/reftests/css-placeholder/input/style-shown.css
index d3e296f91b49..a38d3fb01214 100644
--- a/layout/reftests/css-placeholder/input/style-shown.css
+++ b/layout/reftests/css-placeholder/input/style-shown.css
@@ -4,14 +4,14 @@ input::placeholder {
 }
 
 input:placeholder-shown {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: -moz-FieldText;
   background-color: red;
 }
 
 input:placeholder-shown.shown,
 input.shown-ref {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: green;
   background-color: #c7c7c7;
   font-style: italic;
diff --git a/layout/reftests/css-placeholder/textarea/style-shown.css b/layout/reftests/css-placeholder/textarea/style-shown.css
index 58caece40cc4..d9456d3aa066 100644
--- a/layout/reftests/css-placeholder/textarea/style-shown.css
+++ b/layout/reftests/css-placeholder/textarea/style-shown.css
@@ -4,14 +4,14 @@ textarea::placeholder {
 }
 
 textarea:placeholder-shown {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: -moz-FieldText;
   background-color: red;
 }
 
 textarea:placeholder-shown.shown,
 textarea.shown-ref {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: green;
   background-color: #c7c7c7;
   font-style: italic;
diff --git a/layout/reftests/flexbox/reftest.list b/layout/reftests/flexbox/reftest.list
index 1a0f1c253b7e..a70780c4aaf9 100644
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -13,7 +13,7 @@
 include pagination/reftest.list
 
 # Tests for cross-axis alignment (align-self / align-items properties)
-fails fails-if(stylo) == flexbox-align-self-baseline-horiz-2.xhtml  flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
+pref(layout.css.moz-appearance.enabled,true) fails fails-if(stylo) == flexbox-align-self-baseline-horiz-2.xhtml  flexbox-align-self-baseline-horiz-2-ref.xhtml # bug 793456, and possibly others
 # This one fails on windows R (but not Ru, strangely) and GTK.
 # On Windows R and GTK, the single-line <label> flex item has a different
 # background size in test vs. ref
diff --git a/layout/reftests/forms/button/percent-height-child.html b/layout/reftests/forms/button/percent-height-child.html
index c676715c238c..9707404f1b48 100644
--- a/layout/reftests/forms/button/percent-height-child.html
+++ b/layout/reftests/forms/button/percent-height-child.html
@@ -19,7 +19,7 @@ button {
 
     color: black;
     background: gray;
-    -moz-appearance: none;
+    -moz-appearance: none; appearance: none;
 }
 button::-moz-focus-inner {
     padding: 0;
diff --git a/layout/reftests/forms/button/percent-width-child.html b/layout/reftests/forms/button/percent-width-child.html
index fdd2b49236fb..83868d0625f6 100644
--- a/layout/reftests/forms/button/percent-width-child.html
+++ b/layout/reftests/forms/button/percent-width-child.html
@@ -18,7 +18,7 @@ button {
 
     color: black;
     background: gray;
-    -moz-appearance: none;
+    -moz-appearance: none; appearance: none;
 }
 button::-moz-focus-inner {
     padding: 0;
diff --git a/layout/reftests/forms/button/reftest.list b/layout/reftests/forms/button/reftest.list
index 376124975b01..6ebb59f279ef 100644
--- a/layout/reftests/forms/button/reftest.list
+++ b/layout/reftests/forms/button/reftest.list
@@ -9,7 +9,7 @@
 fuzzy-if(Android,1,16) == overflow-areas-1.html overflow-areas-1-ref.html
 
 # The buttons in these tests have some fancy shading applied to their corners
-# on Android, despite their "-moz-appearance: none; background: gray", so they
+# on Android, despite their "-moz-appearance: none; appearance: none; background: gray", so they
 # don't quite match the reference case's normal <div>. That's why they're fuzzy.
 fuzzy-if(Android,125,20) == percent-height-child.html percent-height-child-ref.html
 fuzzy-if(Android,125,20) == percent-width-child.html  percent-width-child-ref.html
diff --git a/layout/reftests/forms/button/vertical-centering.html b/layout/reftests/forms/button/vertical-centering.html
index 08ca38519187..c4858f2758cc 100644
--- a/layout/reftests/forms/button/vertical-centering.html
+++ b/layout/reftests/forms/button/vertical-centering.html
@@ -14,7 +14,7 @@ input, div {
     color: black;
 }
 input {
-    -moz-appearance: none;
+    -moz-appearance: none; appearance: none;
 }
 input::-moz-focus-inner {
     padding: 0;
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr.html b/layout/reftests/forms/button/width-auto-size-em-ltr.html
index 3285c3e9551e..e05d00f72742 100644
--- a/layout/reftests/forms/button/width-auto-size-em-ltr.html
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html
@@ -2,7 +2,7 @@
 <style>
 
 button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl.html b/layout/reftests/forms/button/width-auto-size-em-rtl.html
index fb72ef97e9ab..460d8a9d5873 100644
--- a/layout/reftests/forms/button/width-auto-size-em-rtl.html
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html
@@ -3,7 +3,7 @@
 <style>
 
 button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
diff --git a/layout/reftests/forms/button/width-auto-size-ltr.html b/layout/reftests/forms/button/width-auto-size-ltr.html
index c8f3f7d110cd..1e5d445cd670 100644
--- a/layout/reftests/forms/button/width-auto-size-ltr.html
+++ b/layout/reftests/forms/button/width-auto-size-ltr.html
@@ -2,7 +2,7 @@
 <style>
 
 button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
diff --git a/layout/reftests/forms/button/width-auto-size-rtl.html b/layout/reftests/forms/button/width-auto-size-rtl.html
index 7ae3092f94bc..fa0bcb0a527c 100644
--- a/layout/reftests/forms/button/width-auto-size-rtl.html
+++ b/layout/reftests/forms/button/width-auto-size-rtl.html
@@ -3,7 +3,7 @@
 <style>
 
 button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
index d4b028b48e93..79cd664d0415 100644
--- a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
@@ -3,7 +3,7 @@
 <style>
 
 button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html
index 4978a57e4eb8..52c4330b5e20 100644
--- a/layout/reftests/forms/button/width-exact-fit-ltr.html
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -2,7 +2,7 @@
 <style>
 
 button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
index d4b028b48e93..79cd664d0415 100644
--- a/layout/reftests/forms/button/width-exact-fit-rtl.html
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -3,7 +3,7 @@
 <style>
 
 button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
diff --git a/layout/reftests/forms/input/checkbox/checkbox-baseline.html b/layout/reftests/forms/input/checkbox/checkbox-baseline.html
index c133d703a81f..5561665d14e0 100644
--- a/layout/reftests/forms/input/checkbox/checkbox-baseline.html
+++ b/layout/reftests/forms/input/checkbox/checkbox-baseline.html
@@ -16,7 +16,7 @@ body { font: 16px/1 monospace; }
 div { border: 1px dashed blue; }
 
 .none {
-     -moz-appearance: none; appearance: none;
+     -moz-appearance: none;
   -webkit-appearance: none;
       -ms-appearance: none;
           appearance: none;
diff --git a/layout/reftests/forms/input/checkbox/checked-appearance-none.html b/layout/reftests/forms/input/checkbox/checked-appearance-none.html
index b7d6511358b4..ed8b7170ae57 100644
--- a/layout/reftests/forms/input/checkbox/checked-appearance-none.html
+++ b/layout/reftests/forms/input/checkbox/checked-appearance-none.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<input type="checkbox" style="-moz-appearance:none" checked>
+<input type="checkbox" style="-moz-appearance:none; appearance: none" checked>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
index 37ea17655064..43b240ef2fe6 100644
--- a/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
@@ -1 +1 @@
-<input type="checkbox" checked style="-moz-appearance: none;">
+<input type="checkbox" checked style="-moz-appearance: none; appearance: none;">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked.html b/layout/reftests/forms/input/checkbox/indeterminate-checked.html
index 7cecf09a0486..fff7e1dccc1a 100644
--- a/layout/reftests/forms/input/checkbox/indeterminate-checked.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked.html
@@ -1 +1 @@
-<input type="checkbox" id="s" checked style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
+<input type="checkbox" id="s" checked style="-moz-appearance: none; appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
index 1055cbef1484..3edcaedf3f73 100644
--- a/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
@@ -1 +1 @@
-<input type="checkbox" style="-moz-appearance: none;">
+<input type="checkbox" style="-moz-appearance: none; appearance: none;">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
index 56a8d0955a61..597fa3339ce2 100644
--- a/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
@@ -1 +1 @@
-<input type="checkbox" id="s" style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
+<input type="checkbox" id="s" style="-moz-appearance: none; appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html b/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
index 8e5b55cfb7db..931e1e684d3f 100644
--- a/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
+++ b/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<input type="checkbox" style="-moz-appearance:none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
diff --git a/layout/reftests/forms/input/color/reftest.list b/layout/reftests/forms/input/color/reftest.list
index 33ed23a223e0..0d29dd62ccfb 100644
--- a/layout/reftests/forms/input/color/reftest.list
+++ b/layout/reftests/forms/input/color/reftest.list
@@ -10,5 +10,5 @@ fails-if(Android) == margin-padding-1.html margin-padding-1-ref.html
 == block-invalidate-1.html block-invalidate-1-ref.html
 == block-invalidate-2.html block-invalidate-2-ref.html
 fuzzy-if(gtkWidget,8,33) fuzzy-if(skiaContent,8,78) fails-if(Android) == transformations-1.html transformations-1-ref.html
-fails-if(Android) == custom-style-1.html custom-style-1-ref.html
+pref(layout.css.moz-appearance.enabled,true) fails-if(Android) == custom-style-1.html custom-style-1-ref.html
 fails-if(Android) == custom-style-2.html custom-style-2-ref.html
diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
index ffb5ffa58daf..fa9e0494ab21 100644
--- a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
+++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="checkbox" style="-moz-appearance:none;">
+    <input type="checkbox" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
index 31b804602a80..551683b45a43 100644
--- a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
+++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
@@ -11,6 +11,6 @@
     document.addEventListener("MozReftestInvalidate", setToCheckbox);
   </script>
   <body>
-    <input type="time" id="i" style="-moz-appearance:none;">
+    <input type="time" id="i" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
index 24dccffeae6a..499382312022 100644
--- a/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
+++ b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" style="-moz-appearance:none;">
+    <input type="text" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/datetime/time-simple-unthemed.html b/layout/reftests/forms/input/datetime/time-simple-unthemed.html
index 023456723306..eebb95775203 100644
--- a/layout/reftests/forms/input/datetime/time-simple-unthemed.html
+++ b/layout/reftests/forms/input/datetime/time-simple-unthemed.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="time" style="-moz-appearance:none;">
+    <input type="time" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
index 1ae398f4c32e..c12d65e6ba40 100644
--- a/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
+++ b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
@@ -10,6 +10,6 @@
     document.addEventListener("MozReftestInvalidate", setToTime);
   </script>
   <body>
-    <input type="checkbox" id="i" style="-moz-appearance:none;">
+    <input type="checkbox" id="i" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/file/style.css b/layout/reftests/forms/input/file/style.css
index 18be345bbe84..5d1171df8876 100644
--- a/layout/reftests/forms/input/file/style.css
+++ b/layout/reftests/forms/input/file/style.css
@@ -23,7 +23,7 @@ vbox, hbox {
   white-space: nowrap;
   overflow:hidden;
 
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   -moz-binding: none;
   cursor: default;
   border: none;
diff --git a/layout/reftests/forms/input/number/focus-handling-ref.html b/layout/reftests/forms/input/number/focus-handling-ref.html
index e07f83f993e8..8ed6d0f6f28a 100644
--- a/layout/reftests/forms/input/number/focus-handling-ref.html
+++ b/layout/reftests/forms/input/number/focus-handling-ref.html
@@ -17,9 +17,9 @@ function end() {
     </script>
   </head>
   <body>
-    <input style="-moz-appearance:none;"><br>
+    <input style="-moz-appearance:none; appearance: none;"><br>
     <input autofocus onfocus="end();"
-           style="-moz-appearance:none;">
+           style="-moz-appearance:none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/focus-handling.html b/layout/reftests/forms/input/number/focus-handling.html
index b54f83a56631..15358b9aaa06 100644
--- a/layout/reftests/forms/input/number/focus-handling.html
+++ b/layout/reftests/forms/input/number/focus-handling.html
@@ -22,9 +22,9 @@ function end() {
   </head>
   <body>
     <input type='number' autofocus onfocus="begin();"
-           style="-moz-appearance:none;"><br>
+           style="-moz-appearance:none; appearance: none;"><br>
     <input type='number' onfocus="end();"
-           style="-moz-appearance:none;">
+           style="-moz-appearance:none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
index ffb5ffa58daf..fa9e0494ab21 100644
--- a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
+++ b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="checkbox" style="-moz-appearance:none;">
+    <input type="checkbox" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
index 561b39bec3cd..de7b1f0b4164 100644
--- a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
+++ b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
@@ -11,6 +11,6 @@
     document.addEventListener("MozReftestInvalidate", setToCheckbox);
   </script>
   <body>
-    <input type='number' id='i' style="-moz-appearance:none;">
+    <input type='number' id='i' style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
index 7f0d427b410e..206d501b8af3 100644
--- a/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" value="1" style="-moz-appearance:none;">
+    <input type="number" value="1" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
index 7c5a4dcaca27..c4da46652c7b 100644
--- a/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" value="1" style="-moz-appearance:none;">
+    <input type="text" value="1" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
index ffb5ffa58daf..fa9e0494ab21 100644
--- a/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="checkbox" style="-moz-appearance:none;">
+    <input type="checkbox" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/number-auto-width-1-ref.html b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
index 50b7b7e04b9c..202a4449cbd8 100644
--- a/layout/reftests/forms/input/number/number-auto-width-1-ref.html
+++ b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" style="-moz-appearance:none; width:auto;">
+    <input type="text" style="-moz-appearance:none; appearance: none; width:auto;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-auto-width-1.html b/layout/reftests/forms/input/number/number-auto-width-1.html
index 5c9cc0abed76..9fc7655fbfa1 100644
--- a/layout/reftests/forms/input/number/number-auto-width-1.html
+++ b/layout/reftests/forms/input/number/number-auto-width-1.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" style="-moz-appearance:none; width:auto;">
+    <input type="number" style="-moz-appearance:none; appearance: none; width:auto;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-disabled-ref.html b/layout/reftests/forms/input/number/number-disabled-ref.html
index f3c9d4d56222..0887a7952092 100644
--- a/layout/reftests/forms/input/number/number-disabled-ref.html
+++ b/layout/reftests/forms/input/number/number-disabled-ref.html
@@ -2,7 +2,7 @@
 <html>
   <body>
     <input type="text" disabled
-           style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+           style="-moz-appearance: none; appearance: none"><!-- Workaround for bug 1223198 -->
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-disabled.html b/layout/reftests/forms/input/number/number-disabled.html
index b4acb20a754d..30b744d24bda 100644
--- a/layout/reftests/forms/input/number/number-disabled.html
+++ b/layout/reftests/forms/input/number/number-disabled.html
@@ -2,7 +2,7 @@
 <html>
   <body>
     <input type="number" disabled
-           style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+           style="-moz-appearance: none; appearance: none"><!-- Workaround for bug 1223198 -->
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements-ref.html b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
index 263aeff1f81e..3698a11e9567 100644
--- a/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
+++ b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" style="-moz-appearance:none;">
+    <input type="number" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements.html b/layout/reftests/forms/input/number/number-pseudo-elements.html
index 33cf40fcf247..7a25dec2e3e2 100644
--- a/layout/reftests/forms/input/number/number-pseudo-elements.html
+++ b/layout/reftests/forms/input/number/number-pseudo-elements.html
@@ -15,6 +15,6 @@ input[type=number]::-moz-number-spin-down {
     </style>
   </head>
   <body>
-    <input type="number" style="-moz-appearance:none;">
+    <input type="number" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
index ceaa14d85d0e..e30649d39415 100644
--- a/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
+++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" style="-moz-appearance:none; width:200px;">
+    <input type="text" style="-moz-appearance:none; appearance: none; width:200px;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
index fddcc33eb0bc..874b2c640ec4 100644
--- a/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
+++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" style="-moz-appearance:none; width:200px;">
+    <input type="number" style="-moz-appearance:none; appearance: none; width:200px;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
index abb0b240dc74..99cad67de855 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" style="-moz-appearance:none; width:200px;">
+    <input type="text" style="-moz-appearance:none; appearance: none; width:200px;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
index 79644edc8b1d..478459632256 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body style="direction: rtl">
-    <input type="text" style="-moz-appearance:none; width:200px;" value="1">
+    <input type="text" style="-moz-appearance:none; appearance: none; width:200px;" value="1">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
   </body>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
index 36ffc062993d..2eddbf9e9823 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body style="direction: rtl">
-    <input type="number" style="-moz-appearance:none; width:200px;" value="1">
+    <input type="number" style="-moz-appearance:none; appearance: none; width:200px;" value="1">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
   </body>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
index 6deed489163b..1f9c7166db48 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-lr;">
   <body>
-    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <input type="text" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
index 7a78830629d5..9483830cfc0d 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-lr;">
   <body>
-    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <input type="number" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
index 73a537387727..839f1505693a 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-rl;">
   <body>
-    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <input type="text" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
index 3bc3a388a16a..fdfc4cbd5132 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-rl;">
   <body>
-    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <input type="number" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
   </body>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
index f8c2ce65da9d..f125a3dd4cae 100644
--- a/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" style="-moz-appearance:none; width:200px;">
+    <input type="number" style="-moz-appearance:none; appearance: none; width:200px;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list
index dead812bebd6..d14b7004f0db 100644
--- a/layout/reftests/forms/input/number/reftest.list
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -27,10 +27,10 @@ fuzzy-if(skiaContent,2,13) == show-value.html show-value-ref.html
 == number-auto-width-1.html number-auto-width-1-ref.html
 
 # min-height/max-height tests:
-skip-if(Android) == number-min-height-1.html number-min-height-1-ref.html
-skip-if(Android) == number-min-height-2.html number-min-height-2-ref.html
-skip-if(Android) == number-max-height-1.html number-max-height-1-ref.html
-skip-if(Android) == number-max-height-2.html number-max-height-2-ref.html
+pref(layout.css.moz-appearance.enabled,true) skip-if(Android) == number-min-height-1.html number-min-height-1-ref.html
+pref(layout.css.moz-appearance.enabled,true) skip-if(Android) == number-min-height-2.html number-min-height-2-ref.html
+pref(layout.css.moz-appearance.enabled,true) skip-if(Android) == number-max-height-1.html number-max-height-1-ref.html
+pref(layout.css.moz-appearance.enabled,true) skip-if(Android) == number-max-height-2.html number-max-height-2-ref.html
 
 # number of significant fractional digits:
 == number-significant-fractional-digits.html number-significant-fractional-digits-ref.html
@@ -54,4 +54,4 @@ fuzzy(128,4) == number-reframe-anon-text-field.html number-reframe-anon-text-fie
 == pseudo-classes.html about:blank
 
 # Style inheritance:
-== number-style-inheritance.html number-style-inheritance-ref.html
+pref(layout.css.moz-appearance.enabled,true) == number-style-inheritance.html number-style-inheritance-ref.html
diff --git a/layout/reftests/forms/input/number/show-value-ref.html b/layout/reftests/forms/input/number/show-value-ref.html
index c3d2c5564cca..22c0700088cc 100644
--- a/layout/reftests/forms/input/number/show-value-ref.html
+++ b/layout/reftests/forms/input/number/show-value-ref.html
@@ -5,7 +5,7 @@
     <style>                                                                        
                                                                                    
 input {                                                                            
-  -moz-appearance: none;                                                           
+  -moz-appearance: none; appearance: none;                                                           
 }                                                                                  
                                                                                    
     </style>                                                                       
diff --git a/layout/reftests/forms/input/number/show-value.html b/layout/reftests/forms/input/number/show-value.html
index 5aae9922e8f8..7347d8d56d4d 100644
--- a/layout/reftests/forms/input/number/show-value.html
+++ b/layout/reftests/forms/input/number/show-value.html
@@ -5,7 +5,7 @@
     <style>
 
 input {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 
     </style>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
index 263aeff1f81e..3698a11e9567 100644
--- a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" style="-moz-appearance:none;">
+    <input type="number" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
index b0beffa56cbe..ca0b18c147e7 100644
--- a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
@@ -10,6 +10,6 @@
     document.addEventListener("MozReftestInvalidate", setToNumber);
   </script>
   <body>
-    <input type='checkbox' id='i' style="-moz-appearance:none;">
+    <input type='checkbox' id='i' style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/radio/checked-appearance-none.html b/layout/reftests/forms/input/radio/checked-appearance-none.html
index 37aed5826ea5..fdfc81cc7510 100644
--- a/layout/reftests/forms/input/radio/checked-appearance-none.html
+++ b/layout/reftests/forms/input/radio/checked-appearance-none.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<input type="radio" style="-moz-appearance:none" checked>
+<input type="radio" style="-moz-appearance:none; appearance: none" checked>
diff --git a/layout/reftests/forms/input/radio/unchecked-appearance-none.html b/layout/reftests/forms/input/radio/unchecked-appearance-none.html
index e30a1ef39610..3ef385b09cbd 100644
--- a/layout/reftests/forms/input/radio/unchecked-appearance-none.html
+++ b/layout/reftests/forms/input/radio/unchecked-appearance-none.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<input type="radio" style="-moz-appearance:none">
+<input type="radio" style="-moz-appearance:none; appearance: none">
diff --git a/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
index a4b73e23ad6b..d920086c3a8f 100644
--- a/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
+++ b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type=range value=75 style="-moz-appearance:none">
+    <input type=range value=75 style="-moz-appearance:none; appearance: none">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
index 3103fc721974..402229e0a2f7 100644
--- a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="range" style="-moz-appearance:none;">
+    <input type="range" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
index d9514542f50f..721335a9d48c 100644
--- a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
@@ -2,6 +2,6 @@
 <html>
   <!-- Test: that range with value=70 is different to the default value=50. -->
   <body>
-    <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+    <input type='range' style="-moz-appearance:none; appearance: none;" value=90 min=20 max=120>
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1-ref.html b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
index f2758db17c13..494e2d85dd76 100644
--- a/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
+++ b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type='range' value=30 style="-moz-appearance:none;">
+    <input type='range' value=30 style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1.html b/layout/reftests/forms/input/range/direction-unthemed-1.html
index 162d55504323..2f7b0abffbf6 100644
--- a/layout/reftests/forms/input/range/direction-unthemed-1.html
+++ b/layout/reftests/forms/input/range/direction-unthemed-1.html
@@ -2,6 +2,6 @@
 <html>
   <!-- Test: that direction:rtl behaves correctly -->
   <body>
-    <input type='range' value=70 style="-moz-appearance:none; direction:rtl;">
+    <input type='range' value=70 style="-moz-appearance:none; appearance: none; direction:rtl;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
index ffb5ffa58daf..fa9e0494ab21 100644
--- a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="checkbox" style="-moz-appearance:none;">
+    <input type="checkbox" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
index 0e1fffaf1478..7108badbd961 100644
--- a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
@@ -11,6 +11,6 @@
     document.addEventListener("MozReftestInvalidate", setToCheckbox);
   </script>
   <body>
-    <input type='range' id='i' style="-moz-appearance:none;">
+    <input type='range' id='i' style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
index 3103fc721974..402229e0a2f7 100644
--- a/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="range" style="-moz-appearance:none;">
+    <input type="range" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
index 24dccffeae6a..499382312022 100644
--- a/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" style="-moz-appearance:none;">
+    <input type="text" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
index 8bf48f7e981e..78c4e4ff49c3 100644
--- a/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" value="50" style="-moz-appearance:none;">
+    <input type="text" value="50" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
index ffb5ffa58daf..fa9e0494ab21 100644
--- a/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="checkbox" style="-moz-appearance:none;">
+    <input type="checkbox" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
index 6aefd17bca29..ec7287594f65 100644
--- a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="range" value=70 style="-moz-appearance:none;">
+    <input type="range" value=70 style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
index 3c9f0e7ce3e5..26b539a7480b 100644
--- a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
@@ -4,6 +4,6 @@
        with value=70 (also tests that it doesn't look like type=text, since the
        text displayed would be different in the type=text case). -->
   <body>
-    <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+    <input type='range' style="-moz-appearance:none; appearance: none;" value=90 min=20 max=120>
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/stepDown-unthemed.html b/layout/reftests/forms/input/range/stepDown-unthemed.html
index 6d4d6708a5e4..1ade9086ab77 100644
--- a/layout/reftests/forms/input/range/stepDown-unthemed.html
+++ b/layout/reftests/forms/input/range/stepDown-unthemed.html
@@ -11,6 +11,6 @@
     document.addEventListener("MozReftestInvalidate", setValue);
   </script>
   <body>
-    <input type=range id='i' value=100 step=25 style='-moz-appearance:none'>
+    <input type=range id='i' value=100 step=25 style='-moz-appearance:none; appearance: none'>
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/stepUp-unthemed.html b/layout/reftests/forms/input/range/stepUp-unthemed.html
index 1e4198cc66bb..685d6eb0bd99 100644
--- a/layout/reftests/forms/input/range/stepUp-unthemed.html
+++ b/layout/reftests/forms/input/range/stepUp-unthemed.html
@@ -11,6 +11,6 @@
     document.addEventListener("MozReftestInvalidate", setValue);
   </script>
   <body>
-    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none; appearance: none'>
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
index 3103fc721974..402229e0a2f7 100644
--- a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="range" style="-moz-appearance:none;">
+    <input type="range" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
index 86ff0c521487..fc47acc4f674 100644
--- a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
@@ -10,6 +10,6 @@
     document.addEventListener("MozReftestInvalidate", setToRange);
   </script>
   <body>
-    <input type='checkbox' id='i' style="-moz-appearance:none;">
+    <input type='checkbox' id='i' style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/value-prop-unthemed.html b/layout/reftests/forms/input/range/value-prop-unthemed.html
index 46387af2ea81..412ac993aa60 100644
--- a/layout/reftests/forms/input/range/value-prop-unthemed.html
+++ b/layout/reftests/forms/input/range/value-prop-unthemed.html
@@ -12,6 +12,6 @@
     setTimeout(setValue, 2000); // useful when not running under reftest suite
   </script>
   <body>
-    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none; appearance: none'>
   </body>
 </html>
diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
index a2a6eb6cce75..24918604a4ee 100644
--- a/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
@@ -12,6 +12,6 @@
     setTimeout(setValue, 2000); // useful when not running under reftest suite
   </script>
   <body>
-    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none; appearance: none'>
   </body>
 </html>
diff --git a/layout/reftests/forms/meter/default-style/style.css b/layout/reftests/forms/meter/default-style/style.css
index 2d42337e9ae9..6da618501346 100644
--- a/layout/reftests/forms/meter/default-style/style.css
+++ b/layout/reftests/forms/meter/default-style/style.css
@@ -50,5 +50,5 @@ div.meter-sub-sub-optimum {
 }
 
 meter, meter::-moz-meter-bar, div.meter-element, div.meter-optimum, div.meter-sub-optimum, div.meter-sub-sub-optimum {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
diff --git a/layout/reftests/forms/meter/style.css b/layout/reftests/forms/meter/style.css
index 8370c5c33ace..f18572e4a603 100644
--- a/layout/reftests/forms/meter/style.css
+++ b/layout/reftests/forms/meter/style.css
@@ -26,7 +26,7 @@ div.meter-bar {
 }
 
 meter, meter::-moz-meter-bar, div.meter-element, div.meter-bar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 
 meter {
diff --git a/layout/reftests/forms/progress/reftest.list b/layout/reftests/forms/progress/reftest.list
index 54bccda7bab3..34818352d8db 100644
--- a/layout/reftests/forms/progress/reftest.list
+++ b/layout/reftests/forms/progress/reftest.list
@@ -1,3 +1,6 @@
+# This enables '-moz-appearance' for author sheets:
+default-preferences pref(layout.css.moz-appearance.enabled,true)
+
 == values.html values-ref.html
 == values-rtl.html values-rtl-ref.html
 == margin-padding.html margin-padding-ref.html
diff --git a/layout/reftests/forms/progress/style.css b/layout/reftests/forms/progress/style.css
index 025bde8f8611..82ecd14e500c 100644
--- a/layout/reftests/forms/progress/style.css
+++ b/layout/reftests/forms/progress/style.css
@@ -5,7 +5,7 @@ div.progress-element {
   width: 10em;
   vertical-align: -0.2em;
 
-  /* Default style in case of there is -moz-appearance: none; */
+  /* Default style in case of there is -moz-appearance: none; appearance: none; */
   border: 2px solid;
   -moz-border-top-colors: ThreeDShadow #e6e6e6;
   -moz-border-right-colors: ThreeDHighlight #e6e6e6;
@@ -30,10 +30,10 @@ div.progress-bar {
 
   box-sizing: border-box;
 
-  /* Default style in case of there is -moz-appearance: none; */
+  /* Default style in case of there is -moz-appearance: none; appearance: none; */
   background-color: #0064b4;
 }
 
 progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
diff --git a/layout/reftests/forms/select/focusring-1-ref.html b/layout/reftests/forms/select/focusring-1-ref.html
index 9f01908fd59d..f5fd58e6f87b 100644
--- a/layout/reftests/forms/select/focusring-1-ref.html
+++ b/layout/reftests/forms/select/focusring-1-ref.html
@@ -4,7 +4,7 @@
     <title>Testcase #1 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; }
+* { -moz-appearance:none; appearance: none; }
 :focus {
   border:2px solid black;
 }
diff --git a/layout/reftests/forms/select/focusring-1.html b/layout/reftests/forms/select/focusring-1.html
index e384bd40974b..049591d64bb8 100644
--- a/layout/reftests/forms/select/focusring-1.html
+++ b/layout/reftests/forms/select/focusring-1.html
@@ -4,7 +4,7 @@
     <title>Testcase #1 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; }
+* { -moz-appearance:none; appearance: none; }
 :focus {
   border:2px solid black;
 }
diff --git a/layout/reftests/forms/select/focusring-2-ref.html b/layout/reftests/forms/select/focusring-2-ref.html
index c7c16a5e5e73..8ae50c8df6ed 100644
--- a/layout/reftests/forms/select/focusring-2-ref.html
+++ b/layout/reftests/forms/select/focusring-2-ref.html
@@ -4,7 +4,7 @@
     <title>Testcase #2 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; }
+* { -moz-appearance:none; appearance: none; }
 :focus {
   border:2px solid black;
 }
diff --git a/layout/reftests/forms/select/focusring-2.html b/layout/reftests/forms/select/focusring-2.html
index e2656b2485c0..78a7b0ee09fa 100644
--- a/layout/reftests/forms/select/focusring-2.html
+++ b/layout/reftests/forms/select/focusring-2.html
@@ -4,7 +4,7 @@
     <title>Testcase #2 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; }
+* { -moz-appearance:none; appearance: none; }
 :focus {
   border:2px solid black;
 }
diff --git a/layout/reftests/forms/select/focusring-3-ref.html b/layout/reftests/forms/select/focusring-3-ref.html
index 76757cdaf1ad..a9b9d4734275 100644
--- a/layout/reftests/forms/select/focusring-3-ref.html
+++ b/layout/reftests/forms/select/focusring-3-ref.html
@@ -4,7 +4,7 @@
     <title>Testcase #3 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; }
+* { -moz-appearance:none; appearance: none; }
 :focus {
   border:2px solid black;
 }
diff --git a/layout/reftests/forms/select/focusring-3.html b/layout/reftests/forms/select/focusring-3.html
index a76668f2b5f9..b564c3256dee 100644
--- a/layout/reftests/forms/select/focusring-3.html
+++ b/layout/reftests/forms/select/focusring-3.html
@@ -4,7 +4,7 @@
     <title>Testcase #3 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; }
+* { -moz-appearance:none; appearance: none; }
 :focus {
   border:2px solid black;
 }
diff --git a/layout/reftests/forms/select/vertical-centering-ref.html b/layout/reftests/forms/select/vertical-centering-ref.html
index f5d85545639d..0d1137110bbc 100644
--- a/layout/reftests/forms/select/vertical-centering-ref.html
+++ b/layout/reftests/forms/select/vertical-centering-ref.html
@@ -5,7 +5,7 @@
     src: url(../../fonts/Ahem.ttf);
   }
   select {
-    -moz-appearance: none;
+    -moz-appearance: none; appearance: none;
     border: none;
     font-family: Ahem;
     font-size: 20px;
diff --git a/layout/reftests/forms/select/vertical-centering.html b/layout/reftests/forms/select/vertical-centering.html
index 6a2daa9e7bed..8482125812d8 100644
--- a/layout/reftests/forms/select/vertical-centering.html
+++ b/layout/reftests/forms/select/vertical-centering.html
@@ -5,7 +5,7 @@
     src: url(../../fonts/Ahem.ttf);
   }
   select {
-    -moz-appearance: none;
+    -moz-appearance: none; appearance: none;
     border: none;
     font-family: Ahem;
     font-size: 20px;
diff --git a/layout/reftests/forms/textarea/resize-ref.html b/layout/reftests/forms/textarea/resize-ref.html
index 5d3334889d02..8d8255986fdd 100644
--- a/layout/reftests/forms/textarea/resize-ref.html
+++ b/layout/reftests/forms/textarea/resize-ref.html
@@ -1,3 +1,3 @@
 <html><body>
-<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
 </body></html>
diff --git a/layout/reftests/forms/textarea/resize.html b/layout/reftests/forms/textarea/resize.html
index f513b4634f1a..83d47f461802 100644
--- a/layout/reftests/forms/textarea/resize.html
+++ b/layout/reftests/forms/textarea/resize.html
@@ -1,3 +1,3 @@
 <html><body>
-<textarea style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+<textarea style="-moz-appearance: none; appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
 </body></html>
diff --git a/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html b/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
index 03b3a4929032..2c963203857c 100644
--- a/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
+++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
@@ -41,7 +41,7 @@ window.addEventListener("MozReftestInvalidate", boom);
   <textarea rows="3" cols="5" id="textarea">x</textarea>
 </div>
 
-<select style="-moz-appearance:none">
+<select style="-moz-appearance:none; appearance: none">
   <option id="opt1">opt1</option>
 </select>
 
diff --git a/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html b/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
index 3f51088156ef..442913d27906 100644
--- a/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
+++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
@@ -8,7 +8,7 @@
   <textarea rows="3" cols="5" id="textarea">x y</textarea>
 </div>
 
-<select style="-moz-appearance:none">
+<select style="-moz-appearance:none; appearance: none">
   <option id="opt1"></option>
 </select>
 
diff --git a/layout/reftests/forms/textbox/accesskey-1-notref.xul b/layout/reftests/forms/textbox/accesskey-1-notref.xul
index 697d10879370..9996224c3bf5 100644
--- a/layout/reftests/forms/textbox/accesskey-1-notref.xul
+++ b/layout/reftests/forms/textbox/accesskey-1-notref.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-1.xul b/layout/reftests/forms/textbox/accesskey-1.xul
index 39ad15b2dd47..1919344060ff 100644
--- a/layout/reftests/forms/textbox/accesskey-1.xul
+++ b/layout/reftests/forms/textbox/accesskey-1.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-2-ref.xul b/layout/reftests/forms/textbox/accesskey-2-ref.xul
index ce6ed1ebc9bd..ebffe05db67a 100644
--- a/layout/reftests/forms/textbox/accesskey-2-ref.xul
+++ b/layout/reftests/forms/textbox/accesskey-2-ref.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-2.xul b/layout/reftests/forms/textbox/accesskey-2.xul
index 98b2c272b45f..8479643f09b9 100644
--- a/layout/reftests/forms/textbox/accesskey-2.xul
+++ b/layout/reftests/forms/textbox/accesskey-2.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-3-notref.xul b/layout/reftests/forms/textbox/accesskey-3-notref.xul
index 1a81e28116c4..633159761740 100644
--- a/layout/reftests/forms/textbox/accesskey-3-notref.xul
+++ b/layout/reftests/forms/textbox/accesskey-3-notref.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-3-ref.xul b/layout/reftests/forms/textbox/accesskey-3-ref.xul
index b7907e9a6aa5..07f1a18f12a0 100644
--- a/layout/reftests/forms/textbox/accesskey-3-ref.xul
+++ b/layout/reftests/forms/textbox/accesskey-3-ref.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-3.xul b/layout/reftests/forms/textbox/accesskey-3.xul
index 97e2c6fbc469..5f72b728b6b4 100644
--- a/layout/reftests/forms/textbox/accesskey-3.xul
+++ b/layout/reftests/forms/textbox/accesskey-3.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-4-notref.xul b/layout/reftests/forms/textbox/accesskey-4-notref.xul
index 1a81e28116c4..633159761740 100644
--- a/layout/reftests/forms/textbox/accesskey-4-notref.xul
+++ b/layout/reftests/forms/textbox/accesskey-4-notref.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-4-ref.xul b/layout/reftests/forms/textbox/accesskey-4-ref.xul
index df787415fed7..6ada9301d2df 100644
--- a/layout/reftests/forms/textbox/accesskey-4-ref.xul
+++ b/layout/reftests/forms/textbox/accesskey-4-ref.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/accesskey-4.xul b/layout/reftests/forms/textbox/accesskey-4.xul
index d63bafbc58b1..1f5057c14b72 100644
--- a/layout/reftests/forms/textbox/accesskey-4.xul
+++ b/layout/reftests/forms/textbox/accesskey-4.xul
@@ -10,7 +10,7 @@
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/align-baseline-1-ref.xul b/layout/reftests/forms/textbox/align-baseline-1-ref.xul
index 646e412de3b1..7a0811eabf8b 100644
--- a/layout/reftests/forms/textbox/align-baseline-1-ref.xul
+++ b/layout/reftests/forms/textbox/align-baseline-1-ref.xul
@@ -9,7 +9,7 @@
       padding-top: 8px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
       margin-top: 0px;
diff --git a/layout/reftests/forms/textbox/align-baseline-1.xul b/layout/reftests/forms/textbox/align-baseline-1.xul
index 711e1858acf0..a0512f62f337 100644
--- a/layout/reftests/forms/textbox/align-baseline-1.xul
+++ b/layout/reftests/forms/textbox/align-baseline-1.xul
@@ -9,7 +9,7 @@
       padding-top: 0px;
     }
     label, textbox {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
diff --git a/layout/reftests/forms/textbox/reftest.list b/layout/reftests/forms/textbox/reftest.list
index 212b7d754e31..07d4cdeba7bd 100644
--- a/layout/reftests/forms/textbox/reftest.list
+++ b/layout/reftests/forms/textbox/reftest.list
@@ -8,4 +8,4 @@ skip-if(cocoaWidget||Android) != accesskey-3.xul accesskey-3-notref.xul
 skip-if(cocoaWidget||Android) == accesskey-4.xul accesskey-4-ref.xul
 skip-if(cocoaWidget||Android) != accesskey-4.xul accesskey-4-notref.xul
 skip-if(Android) == align-baseline-1.xul align-baseline-1-ref.xul # test for bug 494901
-skip-if(Android) == setsize.xul setsize-ref.xul
+pref(layout.css.moz-appearance.enabled,true) skip-if(Android) == setsize.xul setsize-ref.xul
diff --git a/layout/reftests/native-theme/button-nonnative-when-styled-ref.html b/layout/reftests/native-theme/button-nonnative-when-styled-ref.html
index a3d4271c041d..f7a2fb276c03 100644
--- a/layout/reftests/native-theme/button-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/button-nonnative-when-styled-ref.html
@@ -1,16 +1,16 @@
 <!DOCTYPE HTML>
 <!-- these should make the input non-native -->
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 0">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 1px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 2px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 3px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 4px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 5px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 6px">
-<input type="button" value="Button" style="-moz-appearance: none; border-style: dotted">
-<input type="button" value="Button" style="-moz-appearance: none; border-color: green">
-<input type="button" value="Button" style="-moz-appearance: none; background-color: transparent">
-<input type="button" value="Button" style="-moz-appearance: none; background-color: white">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 0">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 1px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 2px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 3px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 4px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 5px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 6px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-style: dotted">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-color: green">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; background-color: transparent">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; background-color: white">
 
 <!-- these should let it stay native -->
 <input type="button" value="">
diff --git a/layout/reftests/native-theme/button-nonnative.html b/layout/reftests/native-theme/button-nonnative.html
index fde9523b4bfd..ffd5eaeec049 100644
--- a/layout/reftests/native-theme/button-nonnative.html
+++ b/layout/reftests/native-theme/button-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<input type="button" value="Button" style="-moz-appearance: none">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none">
diff --git a/layout/reftests/native-theme/checkbox-nonnative.html b/layout/reftests/native-theme/checkbox-nonnative.html
index 3c0c11455a29..aeb54b9ebf71 100644
--- a/layout/reftests/native-theme/checkbox-nonnative.html
+++ b/layout/reftests/native-theme/checkbox-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<input type="checkbox" style="-moz-appearance: none">
+<input type="checkbox" style="-moz-appearance: none; appearance: none">
diff --git a/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html b/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
index d2f3124de52b..eeea67c1bf11 100644
--- a/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
@@ -3,17 +3,17 @@
 <!-- mask the dropdown button -->
 <div style="position:absolute; width:50px; left:7px; top:0; bottom:0; background:black;"></div>
 <!-- these should make the select non-native -->
-<select size="1" style="-moz-appearance: none; border-width: 0"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 1px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 2px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 3px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 4px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 5px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 6px"></select><br>
-<select size="1" style="-moz-appearance: none; border-style: dotted"></select><br>
-<select size="1" style="-moz-appearance: none; border-color: green"></select><br>
-<select size="1" style="-moz-appearance: none; background-color: transparent"></select><br>
-<select size="1" style="-moz-appearance: none; background-color: white"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 0"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 1px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 2px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 3px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 4px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 5px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 6px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-style: dotted"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-color: green"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; background-color: transparent"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; background-color: white"></select><br>
 </div>
 
 <!-- these should let it stay native -->
diff --git a/layout/reftests/native-theme/combobox-nonnative.html b/layout/reftests/native-theme/combobox-nonnative.html
index 6683cdbe075d..df8dfb3f5302 100644
--- a/layout/reftests/native-theme/combobox-nonnative.html
+++ b/layout/reftests/native-theme/combobox-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<select size="1" style="-moz-appearance: none"></select>
+<select size="1" style="-moz-appearance: none; appearance: none"></select>
diff --git a/layout/reftests/native-theme/listbox-nonnative-when-styled-ref.html b/layout/reftests/native-theme/listbox-nonnative-when-styled-ref.html
index b70a26073106..2f636f604f93 100644
--- a/layout/reftests/native-theme/listbox-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/listbox-nonnative-when-styled-ref.html
@@ -1,17 +1,17 @@
 <!DOCTYPE HTML>
 <!-- these should make the select non-native -->
 <body onload="dump('\nDEBUG-bug660226: ' + document.activeElement + '\n\n');">
-<select size="3" style="-moz-appearance: none; border-width: 0"></select>
-<select size="3" style="-moz-appearance: none; border-width: 1px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 2px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 3px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 4px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 5px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 6px"></select>
-<select size="3" style="-moz-appearance: none; border-style: dotted"></select>
-<select size="3" style="-moz-appearance: none; border-color: green"></select>
-<select size="3" style="-moz-appearance: none; background-color: transparent"></select>
-<select size="3" style="-moz-appearance: none; background-color: white"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 0"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 1px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 2px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 3px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 4px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 5px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 6px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-style: dotted"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-color: green"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; background-color: transparent"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; background-color: white"></select>
 
 <!-- these should let it stay native -->
 <select size="3" style="color: black"></select>
diff --git a/layout/reftests/native-theme/listbox-nonnative.html b/layout/reftests/native-theme/listbox-nonnative.html
index a3f0efc59d2f..5803a2e6f7df 100644
--- a/layout/reftests/native-theme/listbox-nonnative.html
+++ b/layout/reftests/native-theme/listbox-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<select size="3" style="-moz-appearance: none"></select>
+<select size="3" style="-moz-appearance: none; appearance: none"></select>
diff --git a/layout/reftests/native-theme/native-theme-disabled-cascade-levels-ref.html b/layout/reftests/native-theme/native-theme-disabled-cascade-levels-ref.html
index d6b2efccf5ce..f765c396bdd6 100644
--- a/layout/reftests/native-theme/native-theme-disabled-cascade-levels-ref.html
+++ b/layout/reftests/native-theme/native-theme-disabled-cascade-levels-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <input type="text" value="Themed">
-<input type="text" value="Not Themed" style="-moz-appearance: none">
-<input type="text" value="Not Themed" style="-moz-appearance: none">
-<input type="text" value="Not Themed" style="-moz-appearance: none">
-<input type="text" value="Not Themed" style="-moz-appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
diff --git a/layout/reftests/native-theme/radio-nonnative.html b/layout/reftests/native-theme/radio-nonnative.html
index 4c2a74b4ed39..d16e3846d823 100644
--- a/layout/reftests/native-theme/radio-nonnative.html
+++ b/layout/reftests/native-theme/radio-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<input type="radio" style="-moz-appearance: none">
+<input type="radio" style="-moz-appearance: none; appearance: none">
diff --git a/layout/reftests/native-theme/reftest.list b/layout/reftests/native-theme/reftest.list
index edb8810043fa..33aecb60b508 100644
--- a/layout/reftests/native-theme/reftest.list
+++ b/layout/reftests/native-theme/reftest.list
@@ -30,11 +30,11 @@ fails-if(!nativeThemePref) != checkbox-native.html checkbox-nonnative.html
 != 427122-1.html 427122-1-ref.html
 
 # 403458 is a Windows-only bug
-skip-if(!winWidget) != 403458-winmenu-ltr.xul 403458-winmenu-rtl.xul
+pref(layout.css.moz-appearance.enabled,true) skip-if(!winWidget) != 403458-winmenu-ltr.xul 403458-winmenu-rtl.xul
 
 == 470711-1.xul 470711-1-ref.xul
 
-== 482955-1.xul 482955-1-ref.xul
+pref(layout.css.moz-appearance.enabled,true) == 482955-1.xul 482955-1-ref.xul
 
 == 492155-1.html about:blank
 == 492155-2.html about:blank
@@ -78,7 +78,7 @@ skip-if(!winWidget) == scroll-thumb-minimum-size-notheme.html scroll-thumb-minim
 # animated progress bars.
 # Nothing shows up on Android, presumably because that appearance type is
 # not implemented.
-skip-if(cocoaWidget) skip-if(winWidget) == progress-overflow.html progress-overflow-ref.html
-fails-if(Android) skip-if(cocoaWidget) skip-if(winWidget) != progress-overflow-small.html progress-nobar.html
+pref(layout.css.moz-appearance.enabled,true) skip-if(cocoaWidget) skip-if(winWidget) == progress-overflow.html progress-overflow-ref.html
+pref(layout.css.moz-appearance.enabled,true) fails-if(Android) skip-if(cocoaWidget) skip-if(winWidget) != progress-overflow-small.html progress-nobar.html
 
 == 676387-1.xul 676387-1-ref.xul
diff --git a/layout/reftests/native-theme/text-input-nonnative-when-styled-ref.html b/layout/reftests/native-theme/text-input-nonnative-when-styled-ref.html
index b8786e0ac3e9..e964cfa3e457 100644
--- a/layout/reftests/native-theme/text-input-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/text-input-nonnative-when-styled-ref.html
@@ -1,22 +1,22 @@
 <!DOCTYPE HTML>
 <!-- these should make the input non-native -->
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 0">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 1px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 2px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 3px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 4px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 5px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 6px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-style: dotted">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-color: green">
-<input type="text" value="Text Input" style="-moz-appearance: none; background-color: transparent">
-<input type="text" value="Text Input" style="-moz-appearance: none; background-color: white">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-top-left-radius: 0px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-top-right-radius: 1px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-bottom-right-radius: 2px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-bottom-left-radius: 3px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-inline-start-width: 3px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-inline-end-width: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 0">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 1px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 2px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 4px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 5px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 6px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-style: dotted">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-color: green">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; background-color: transparent">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; background-color: white">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-top-left-radius: 0px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-top-right-radius: 1px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-bottom-right-radius: 2px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-bottom-left-radius: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-inline-start-width: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-inline-end-width: 3px">
 
 <!-- these should let it stay native -->
 <input type="text" value="">
diff --git a/layout/reftests/native-theme/text-input-nonnative.html b/layout/reftests/native-theme/text-input-nonnative.html
index a3e4335b1cb8..b8c07c587eec 100644
--- a/layout/reftests/native-theme/text-input-nonnative.html
+++ b/layout/reftests/native-theme/text-input-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<input type="text" value="" style="-moz-appearance: none">
+<input type="text" value="" style="-moz-appearance: none; appearance: none">
diff --git a/layout/reftests/native-theme/textarea-nonnative-when-styled-ref.html b/layout/reftests/native-theme/textarea-nonnative-when-styled-ref.html
index 1679479152d3..c8884ae6f434 100644
--- a/layout/reftests/native-theme/textarea-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/textarea-nonnative-when-styled-ref.html
@@ -1,16 +1,16 @@
 <!DOCTYPE HTML>
 <!-- these should make the textarea non-native -->
-<textarea style="-moz-appearance: none; border-width: 0; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 1px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 2px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 3px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 4px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 5px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 6px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-style: dotted; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-color: green; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; background-color: transparent; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; background-color: white; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 0; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 1px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 2px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 3px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 4px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 5px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 6px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-style: dotted; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-color: green; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; background-color: transparent; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; background-color: white; resize: none;">Textarea</textarea>
 
 <!-- these should let it stay native -->
 <textarea></textarea>
diff --git a/layout/reftests/native-theme/textarea-nonnative.html b/layout/reftests/native-theme/textarea-nonnative.html
index 87f3b4cdd6a4..2060ae7ebe3e 100644
--- a/layout/reftests/native-theme/textarea-nonnative.html
+++ b/layout/reftests/native-theme/textarea-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<textarea style="-moz-appearance: none"></textarea>
+<textarea style="-moz-appearance: none; appearance: none"></textarea>
diff --git a/layout/reftests/svg/foreignObject-form-no-theme.svg b/layout/reftests/svg/foreignObject-form-no-theme.svg
index 8ee6bb71d32e..78a9167b8c61 100644
--- a/layout/reftests/svg/foreignObject-form-no-theme.svg
+++ b/layout/reftests/svg/foreignObject-form-no-theme.svg
@@ -1,9 +1,9 @@
 <svg xmlns='http://www.w3.org/2000/svg' width='500' height='200'>
   <foreignObject width='500' height='500'>
     <div xmlns='http://www.w3.org/1999/xhtml'>
-      <button style='-moz-appearance:none'>this is a button inside of SVG</button>
+      <button style='-moz-appearance:none; appearance: none'>this is a button inside of SVG</button>
       <br/>
-      <select style='-moz-appearance:none'>
+      <select style='-moz-appearance:none; appearance: none'>
         <option>This is a menu inside of SVG</option>
         <option>a second menu option</option>
       </select>
diff --git a/layout/reftests/svg/reftest.list b/layout/reftests/svg/reftest.list
index b90f5929b769..ef7ab03f4b84 100644
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -216,7 +216,7 @@ fuzzy-if(skiaContent,1,800000) == filters-and-group-opacity-01.svg filters-and-g
 == foreignObject-ancestor-style-change-01.svg foreignObject-ancestor-style-change-01-ref.svg
 == foreignObject-change-transform-01.svg pass.svg
 == foreignObject-display-01.svg pass.svg
-== foreignObject-form-theme.svg foreignObject-form-theme-ref.html
+pref(layout.css.moz-appearance.enabled,true) == foreignObject-form-theme.svg foreignObject-form-theme-ref.html
 == foreignObject-img-form-theme.html foreignObject-img-form-theme-ref.html
 == foreignObject-move-repaint-01.svg pass.svg
 == foreignObject-overflow-01.svg pass.svg
diff --git a/layout/reftests/text-decoration/underline-block-propagation-2-quirks-ref.html b/layout/reftests/text-decoration/underline-block-propagation-2-quirks-ref.html
index 6f4bc8ecd2a2..9685874c6b59 100644
--- a/layout/reftests/text-decoration/underline-block-propagation-2-quirks-ref.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-quirks-ref.html
@@ -1,7 +1,7 @@
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none }
+textarea { -moz-appearance: none; appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
diff --git a/layout/reftests/text-decoration/underline-block-propagation-2-quirks.html b/layout/reftests/text-decoration/underline-block-propagation-2-quirks.html
index 7e32b7581f53..f44b36c7b1f3 100644
--- a/layout/reftests/text-decoration/underline-block-propagation-2-quirks.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-quirks.html
@@ -1,7 +1,7 @@
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none }
+textarea { -moz-appearance: none; appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
diff --git a/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html b/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
index 9795dcbe413e..69ec78935e25 100644
--- a/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
@@ -2,7 +2,7 @@
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none }
+textarea { -moz-appearance: none; appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
diff --git a/layout/reftests/text-decoration/underline-block-propagation-2-standards.html b/layout/reftests/text-decoration/underline-block-propagation-2-standards.html
index 018c147a10bd..264329f8ea37 100644
--- a/layout/reftests/text-decoration/underline-block-propagation-2-standards.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-standards.html
@@ -2,7 +2,7 @@
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none }
+textarea { -moz-appearance: none; appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
diff --git a/layout/reftests/text-overflow/combobox-zoom-ref.html b/layout/reftests/text-overflow/combobox-zoom-ref.html
index 35b97ea2474f..8aed2ccb60ad 100644
--- a/layout/reftests/text-overflow/combobox-zoom-ref.html
+++ b/layout/reftests/text-overflow/combobox-zoom-ref.html
@@ -21,7 +21,7 @@ select {
   width: 200px;
   padding-right: 8px;
 
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 </style>
 </head>
diff --git a/layout/reftests/text-overflow/combobox-zoom.html b/layout/reftests/text-overflow/combobox-zoom.html
index e45ed6d3fa7c..26617616fdbe 100644
--- a/layout/reftests/text-overflow/combobox-zoom.html
+++ b/layout/reftests/text-overflow/combobox-zoom.html
@@ -21,7 +21,7 @@ select {
   width: 200px;
   padding-right: 8px;
   text-overflow: " ";
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 </style>
 </head>
diff --git a/layout/reftests/text/control-chars-01-notref.html b/layout/reftests/text/control-chars-01-notref.html
index 3b7735d33b30..1306b36da3a1 100644
--- a/layout/reftests/text/control-chars-01-notref.html
+++ b/layout/reftests/text/control-chars-01-notref.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
 foobar
 </textarea>
 </body>
diff --git a/layout/reftests/text/control-chars-01a.html b/layout/reftests/text/control-chars-01a.html
index 1dbd34ba666a..de80694f2485 100644
--- a/layout/reftests/text/control-chars-01a.html
+++ b/layout/reftests/text/control-chars-01a.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
 foo&#x01;bar
 </textarea>
 </body>
diff --git a/layout/reftests/text/control-chars-01b.html b/layout/reftests/text/control-chars-01b.html
index 19e08552da7e..c0dfde15a1c5 100644
--- a/layout/reftests/text/control-chars-01b.html
+++ b/layout/reftests/text/control-chars-01b.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
 foo&#x1f;bar
 </textarea>
 </body>
diff --git a/layout/reftests/text/control-chars-01c.html b/layout/reftests/text/control-chars-01c.html
index 28504d4f4303..76fa3ece308b 100644
--- a/layout/reftests/text/control-chars-01c.html
+++ b/layout/reftests/text/control-chars-01c.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
 foo&#x7f;bar
 </textarea>
 </body>
diff --git a/layout/reftests/text/control-chars-01d.html b/layout/reftests/text/control-chars-01d.html
index 561489b25987..22665b21b50c 100644
--- a/layout/reftests/text/control-chars-01d.html
+++ b/layout/reftests/text/control-chars-01d.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
 foo&#x8f;bar
 </textarea>
 </body>
diff --git a/layout/reftests/unicode/unicode-attribute-selector.html b/layout/reftests/unicode/unicode-attribute-selector.html
index 8d2eab9e422b..7ceb3f686089 100644
--- a/layout/reftests/unicode/unicode-attribute-selector.html
+++ b/layout/reftests/unicode/unicode-attribute-selector.html
@@ -8,7 +8,7 @@
     input[dİsabled] {display: none;}
     /* input[dİsabled="disabled"] {display: inline;} */
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; }
+    input { -moz-appearance: none; appearance: none; }
   </style>
 </head>
 
diff --git a/layout/reftests/unicode/unicode-element-selector.html b/layout/reftests/unicode/unicode-element-selector.html
index 23d0fca513ff..1bf7aaf63ebf 100644
--- a/layout/reftests/unicode/unicode-element-selector.html
+++ b/layout/reftests/unicode/unicode-element-selector.html
@@ -5,7 +5,7 @@
   <style>
     dİv {color: red}
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; }
+    input { -moz-appearance: none; appearance: none; }
   </style>
 </head>
 
diff --git a/layout/reftests/unicode/unicode-lang.html b/layout/reftests/unicode/unicode-lang.html
index 15a9d88486e2..a819c22f59bd 100644
--- a/layout/reftests/unicode/unicode-lang.html
+++ b/layout/reftests/unicode/unicode-lang.html
@@ -6,7 +6,7 @@
     p:lang(hİ) {color: red}
     /* p[lang="hİ"] {text-indent:30px} Disabled until Bug 492431 is fixed */
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; }
+    input { -moz-appearance: none; appearance: none; }
   </style>
 </head>
 
diff --git a/layout/reftests/unicode/unicode-pseudo-selector.html b/layout/reftests/unicode/unicode-pseudo-selector.html
index dad2217617f6..db3f913f0c17 100644
--- a/layout/reftests/unicode/unicode-pseudo-selector.html
+++ b/layout/reftests/unicode/unicode-pseudo-selector.html
@@ -5,7 +5,7 @@
   <style>
     p:fİrst-letter {color: red}
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; }
+    input { -moz-appearance: none; appearance: none; }
   </style>
 </head>
 
diff --git a/layout/reftests/unicode/unicode-ref.html b/layout/reftests/unicode/unicode-ref.html
index b4e8fb319b27..fde61ff16898 100644
--- a/layout/reftests/unicode/unicode-ref.html
+++ b/layout/reftests/unicode/unicode-ref.html
@@ -4,7 +4,7 @@
   <title>Unicode tests - reference rending</title>
   <style>
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; }
+    input { -moz-appearance: none; appearance: none; }
   </style>
 </head>
 
diff --git a/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html b/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html
index dde5a0c7711c..bbec60c7ee12 100644
--- a/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html
+++ b/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html
@@ -3,7 +3,7 @@
 <style type="text/css">
 button {
   writing-mode: vertical-lr;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 #a { }
 #b { width: 50px; }
diff --git a/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html b/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html
index 545f3adc2261..af96aab9f51d 100644
--- a/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html
+++ b/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html
@@ -3,7 +3,7 @@
 <style type="text/css">
 button {
   writing-mode: vertical-rl;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 #a { }
 #b { width: 50px; }
diff --git a/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html b/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html
index 03a4a053ce14..0dc9f9c91bca 100644
--- a/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html
+++ b/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html
@@ -3,7 +3,7 @@
 <style type="text/css">
 button {
   writing-mode: vertical-lr;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   visibility: hidden;
 }
 #a { }
diff --git a/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html b/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html
index 2010b6209191..c7471232d20f 100644
--- a/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html
+++ b/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html
@@ -3,7 +3,7 @@
 <style type="text/css">
 button {
   writing-mode: vertical-rl;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   visibility: hidden;
 }
 #a { }
diff --git a/layout/reftests/writing-mode/reftest.list b/layout/reftests/writing-mode/reftest.list
index 56047c503649..b55f907290f2 100644
--- a/layout/reftests/writing-mode/reftest.list
+++ b/layout/reftests/writing-mode/reftest.list
@@ -69,7 +69,7 @@ fuzzy-if(Android,1,18) == ua-style-sheet-checkbox-radio-1.html ua-style-sheet-ch
 skip-if(Android) fuzzy-if(skiaContent&&!Android,2,6) == ua-style-sheet-button-1.html ua-style-sheet-button-1a-ref.html
 skip-if(!(Android)) == ua-style-sheet-button-1.html ua-style-sheet-button-1b-ref.html
 == ua-style-sheet-input-color-1.html ua-style-sheet-input-color-1-ref.html
-fuzzy-if(gtkWidget,1,15) == ua-style-sheet-input-number-1.html ua-style-sheet-input-number-1-ref.html
+pref(layout.css.moz-appearance.enabled,true) fuzzy-if(gtkWidget,1,15) == ua-style-sheet-input-number-1.html ua-style-sheet-input-number-1-ref.html
 
 HTTP(..) == 1127488-align-default-horizontal-tb-ltr.html 1127488-align-top-left-ref.html
 HTTP(..) == 1127488-align-start-horizontal-tb-ltr.html 1127488-align-top-left-ref.html
diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1.html b/layout/reftests/writing-mode/ua-style-sheet-button-1.html
index f1ee2792afd5..f2c599a602a7 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1.html
@@ -4,7 +4,7 @@
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; }
+.a { -moz-appearance: none; appearance: none; }
 </style>
 <div class=ltr>
   <button>one</button><br>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
index 7567da08a67d..08664518c6c0 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
@@ -4,7 +4,7 @@
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; }
+.a { -moz-appearance: none; appearance: none; }
 
 .ltr button,
 .rtl button,
diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1b-ref.html b/layout/reftests/writing-mode/ua-style-sheet-button-1b-ref.html
index a20f63223aca..0f409d6c704d 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1b-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1b-ref.html
@@ -4,7 +4,7 @@
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; }
+.a { -moz-appearance: none; appearance: none; }
 
 .ltr button,
 .rtl button,
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
index 9b6bfe1a87a8..68ff025f74f5 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
@@ -4,7 +4,7 @@
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; }
+.a { -moz-appearance: none; appearance: none; }
 
 .ltr input[type="color"]:-moz-system-metric(color-picker-available),
 .rtl input[type="color"]:-moz-system-metric(color-picker-available) {
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
index 4fef0094f169..e199ec52417c 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
@@ -4,7 +4,7 @@
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; }
+.a { -moz-appearance: none; appearance: none; }
 </style>
 <div class=ltr>
   <input type=color><br>
diff --git a/layout/style/nsCSSPropAliasList.h b/layout/style/nsCSSPropAliasList.h
index 565268d0f879..5947f131b92d 100644
--- a/layout/style/nsCSSPropAliasList.h
+++ b/layout/style/nsCSSPropAliasList.h
@@ -260,6 +260,11 @@ CSS_PROP_ALIAS(-webkit-animation-timing-function,
                WebkitAnimationTimingFunction,
                WEBKIT_PREFIX_PREF)
 
+CSS_PROP_ALIAS(-webkit-appearance,
+               appearance,
+               WebkitAppearance,
+               "layout.css.appearance.enabled") // same pref as for 'appearance' (XXX when we remove that pref we should probably make this WEBKIT_PREFIX_PREF instead)
+
 CSS_PROP_ALIAS(-webkit-filter,
                filter,
                WebkitFilter,
diff --git a/layout/style/nsCSSPropList.h b/layout/style/nsCSSPropList.h
index 4b139d1b11ba..f9aaf3c3e28b 100644
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -463,9 +463,21 @@ CSS_PROP_DISPLAY(
 CSS_PROP_DISPLAY(
     -moz-appearance,
     _moz_appearance,
-    CSS_PROP_DOMPROP_PREFIXED(Appearance),
-    CSS_PROPERTY_PARSE_VALUE,
-    "",
+    MozAppearance,
+    CSS_PROPERTY_PARSE_VALUE |
+        CSS_PROPERTY_ENABLED_IN_UA_SHEETS_AND_CHROME,
+    "layout.css.moz-appearance.enabled",
+    VARIANT_HK,
+    kMozAppearanceKTable,
+    CSS_PROP_NO_OFFSET,
+    eStyleAnimType_Discrete)
+CSS_PROP_DISPLAY(
+    appearance,
+    appearance,
+    Appearance,
+    CSS_PROPERTY_PARSE_VALUE |
+        CSS_PROPERTY_ENABLED_IN_UA_SHEETS_AND_CHROME,
+    "layout.css.appearance.enabled", // also controls -webkit-appearance
     VARIANT_HK,
     kAppearanceKTable,
     CSS_PROP_NO_OFFSET,
diff --git a/layout/style/nsCSSProps.cpp b/layout/style/nsCSSProps.cpp
index e6704a170f94..73e9c0f2c8cc 100644
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -742,6 +742,12 @@ const KTableEntry nsCSSProps::kAnimationPlayStateKTable[] = {
 };
 
 const KTableEntry nsCSSProps::kAppearanceKTable[] = {
+  { eCSSKeyword_auto,    NS_THEME_AUTO },
+  { eCSSKeyword_none,    NS_THEME_NONE },
+  { eCSSKeyword_UNKNOWN, -1 }
+};
+
+const KTableEntry nsCSSProps::kMozAppearanceKTable[] = {
   { eCSSKeyword_none,                   NS_THEME_NONE },
   { eCSSKeyword_button,                 NS_THEME_BUTTON },
   { eCSSKeyword_radio,                  NS_THEME_RADIO },
diff --git a/layout/style/nsCSSProps.h b/layout/style/nsCSSProps.h
index 65b31219051e..443dd7589623 100644
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -696,6 +696,7 @@ public:
   static const KTableEntry kAnimationPlayStateKTable[];
   static const KTableEntry kAnimationTimingFunctionKTable[];
   static const KTableEntry kAppearanceKTable[];
+  static const KTableEntry kMozAppearanceKTable[];
   static const KTableEntry kAzimuthKTable[];
   static const KTableEntry kBackfaceVisibilityKTable[];
   static const KTableEntry kTransformStyleKTable[];
diff --git a/layout/style/nsComputedDOMStyle.cpp b/layout/style/nsComputedDOMStyle.cpp
index 4cd039adece1..af81f9347482 100644
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -4378,6 +4378,14 @@ nsComputedDOMStyle::DoGetAppearance()
   return val.forget();
 }
 
+already_AddRefed<CSSValue>
+nsComputedDOMStyle::DoGetMozAppearance()
+{
+  RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
+  val->SetIdent(nsCSSProps::ValueToKeywordEnum(StyleDisplay()->mMozAppearance,
+                                               nsCSSProps::kMozAppearanceKTable));
+  return val.forget();
+}
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetBoxAlign()
diff --git a/layout/style/nsComputedDOMStyle.h b/layout/style/nsComputedDOMStyle.h
index 6e9188eaa4f7..ac29d63643c1 100644
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -256,6 +256,7 @@ private:
    */
 
   already_AddRefed<CSSValue> DoGetAppearance();
+  already_AddRefed<CSSValue> DoGetMozAppearance();
 
   /* Box properties */
   already_AddRefed<CSSValue> DoGetBoxAlign();
diff --git a/layout/style/nsComputedDOMStylePropertyList.h b/layout/style/nsComputedDOMStylePropertyList.h
index 00c324ed71a2..e068ed44fac6 100644
--- a/layout/style/nsComputedDOMStylePropertyList.h
+++ b/layout/style/nsComputedDOMStylePropertyList.h
@@ -51,6 +51,7 @@ COMPUTED_STYLE_PROP(animation_iteration_count,     AnimationIterationCount)
 COMPUTED_STYLE_PROP(animation_name,                AnimationName)
 COMPUTED_STYLE_PROP(animation_play_state,          AnimationPlayState)
 COMPUTED_STYLE_PROP(animation_timing_function,     AnimationTimingFunction)
+COMPUTED_STYLE_PROP(appearance,                    Appearance)
 COMPUTED_STYLE_PROP(backface_visibility,           BackfaceVisibility)
 //// COMPUTED_STYLE_PROP(background,               Background)
 COMPUTED_STYLE_PROP(background_attachment,         BackgroundAttachment)
@@ -274,7 +275,7 @@ COMPUTED_STYLE_PROP(z_index,                       ZIndex)
  * Implementations of -moz- styles *
 \* ******************************* */
 
-COMPUTED_STYLE_PROP(_moz_appearance,               Appearance)
+COMPUTED_STYLE_PROP(_moz_appearance,               MozAppearance)
 COMPUTED_STYLE_PROP(_moz_binding,                  Binding)
 COMPUTED_STYLE_PROP(_moz_border_bottom_colors,     BorderBottomColors)
 COMPUTED_STYLE_PROP(_moz_border_left_colors,       BorderLeftColors)
diff --git a/layout/style/nsRuleNode.cpp b/layout/style/nsRuleNode.cpp
index 1417deca2e9e..a82818d930de 100644
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -6068,12 +6068,19 @@ nsRuleNode::ComputeDisplayData(void* aStartStruct,
   // See ReflowInput::CalculateHypotheticalBox
   display->mOriginalDisplay = display->mDisplay;
 
-  // appearance: enum, inherit, initial
+  // -moz-appearance: enum, inherit, initial
+  SetValue(*aRuleData->ValueForMozAppearance(),
+           display->mMozAppearance, conditions,
+           SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
+           parentDisplay->mMozAppearance,
+           NS_THEME_NONE);
+
+  // appearance: auto | none
   SetValue(*aRuleData->ValueForAppearance(),
            display->mAppearance, conditions,
            SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
            parentDisplay->mAppearance,
-           NS_THEME_NONE);
+           NS_THEME_AUTO);
 
   // binding: url, none, inherit
   const nsCSSValue* bindingValue = aRuleData->ValueForBinding();
diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp
index 9835affb301b..6eb3d41cf0ca 100644
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -3340,7 +3340,8 @@ nsStyleDisplay::nsStyleDisplay(const nsPresContext* aContext)
   : mDisplay(StyleDisplay::Inline)
   , mOriginalDisplay(StyleDisplay::Inline)
   , mContain(NS_STYLE_CONTAIN_NONE)
-  , mAppearance(NS_THEME_NONE)
+  , mMozAppearance(NS_THEME_NONE)
+  , mAppearance(NS_THEME_AUTO)
   , mPosition(NS_STYLE_POSITION_STATIC)
   , mFloat(StyleFloat::None)
   , mOriginalFloat(StyleFloat::None)
@@ -3402,6 +3403,7 @@ nsStyleDisplay::nsStyleDisplay(const nsStyleDisplay& aSource)
   , mDisplay(aSource.mDisplay)
   , mOriginalDisplay(aSource.mOriginalDisplay)
   , mContain(aSource.mContain)
+  , mMozAppearance(aSource.mMozAppearance)
   , mAppearance(aSource.mAppearance)
   , mPosition(aSource.mPosition)
   , mFloat(aSource.mFloat)
@@ -3520,10 +3522,10 @@ nsStyleDisplay::CalcDifference(const nsStyleDisplay& aNewData) const
    * if this does become common perhaps a faster-path might be worth while.
    */
 
-  if ((mAppearance == NS_THEME_TEXTFIELD &&
-       aNewData.mAppearance != NS_THEME_TEXTFIELD) ||
-      (mAppearance != NS_THEME_TEXTFIELD &&
-       aNewData.mAppearance == NS_THEME_TEXTFIELD)) {
+  if ((mMozAppearance == NS_THEME_TEXTFIELD &&
+       aNewData.mMozAppearance != NS_THEME_TEXTFIELD) ||
+      (mMozAppearance != NS_THEME_TEXTFIELD &&
+       aNewData.mMozAppearance == NS_THEME_TEXTFIELD)) {
     // This is for <input type=number> where we allow authors to specify a
     // |-moz-appearance:textfield| to get a control without a spinner. (The
     // spinner is present for |-moz-appearance:number-input| but also other
@@ -3552,6 +3554,7 @@ nsStyleDisplay::CalcDifference(const nsStyleDisplay& aNewData) const
       || mBreakInside != aNewData.mBreakInside
       || mBreakBefore != aNewData.mBreakBefore
       || mBreakAfter != aNewData.mBreakAfter
+      || mMozAppearance != aNewData.mMozAppearance
       || mAppearance != aNewData.mAppearance
       || mOrient != aNewData.mOrient
       || mOverflowClipBox != aNewData.mOverflowClipBox) {
diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h
index 96fc8fdfc8d0..9510865831c3 100644
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -27,6 +27,7 @@
 #include "nsStyleAutoArray.h"
 #include "nsStyleCoord.h"
 #include "nsStyleConsts.h"
+#include "nsThemeConstants.h"
 #include "nsChangeHint.h"
 #include "nsPresContext.h"
 #include "nsCOMPtr.h"
@@ -2683,7 +2684,20 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleDisplay
                                            //         otherwise equal to
                                            //         mDisplay
   uint8_t mContain;             // [reset] see nsStyleConsts.h NS_STYLE_CONTAIN_*
+private:
+  friend class nsComputedDOMStyle;
+  friend class nsRuleNode;
+  uint8_t mMozAppearance;       // [reset]
   uint8_t mAppearance;          // [reset]
+public:
+  MOZ_MUST_USE uint8_t UsedAppearance() const {
+    if (mAppearance == NS_THEME_NONE) {
+      return NS_THEME_NONE;
+    }
+    MOZ_ASSERT(mAppearance == NS_THEME_AUTO);
+    return mMozAppearance; // use the -moz-appearance value
+  }
+
   uint8_t mPosition;            // [reset] see nsStyleConsts.h
 
   // [reset] See StyleFloat in nsStyleConsts.h.
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css
index 84817b2561b7..fdf32c088fa6 100644
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -600,7 +600,7 @@ input[type="checkbox"]:disabled:hover:active {
 
 %if defined(MOZ_WIDGET_ANDROID)
 /*
- * These platforms doesn't have any theming support and thus -moz-appearance:none
+ * These platforms doesn't have any theming support and thus appearance:none
  * is the same as any other appearance value.
  * XXX This is not web-compatible and should be fixed.
  */
diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index aac4d19480d6..6979ff197bf2 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -1028,14 +1028,6 @@ var gCSSProperties = {
     other_values: [ "cubic-bezier(0.25, 0.1, 0.25, 1.0)", "linear", "ease-in", "ease-out", "ease-in-out", "linear, ease-in, cubic-bezier(0.1, 0.2, 0.8, 0.9)", "cubic-bezier(0.5, 0.5, 0.5, 0.5)", "cubic-bezier(0.25, 1.5, 0.75, -0.5)", "step-start", "step-end", "steps(1)", "steps(2, start)", "steps(386)", "steps(3, end)", "frames(2)", "frames(1000)", "frames( 2 )" ],
     invalid_values: [ "none", "auto", "cubic-bezier(0.25, 0.1, 0.25)", "cubic-bezier(0.25, 0.1, 0.25, 0.25, 1.0)", "cubic-bezier(-0.5, 0.5, 0.5, 0.5)", "cubic-bezier(1.5, 0.5, 0.5, 0.5)", "cubic-bezier(0.5, 0.5, -0.5, 0.5)", "cubic-bezier(0.5, 0.5, 1.5, 0.5)", "steps(2, step-end)", "steps(0)", "steps(-2)", "steps(0, step-end, 1)", "frames(1)", "frames(-2)", "frames", "frames()", "frames(,)", "frames(a)", "frames(2.0)", "frames(2.5)", "frames(2 3)" ]
   },
-  "-moz-appearance": {
-    domProp: "MozAppearance",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "none" ],
-    other_values: [ "radio", "menulist" ],
-    invalid_values: []
-  },
   "-moz-binding": {
     domProp: "MozBinding",
     inherited: false,
@@ -7874,6 +7866,37 @@ if (IsCSSPropertyPrefEnabled("layout.css.display-flow-root.enabled")) {
   gCSSProperties["display"].other_values.push("flow-root");
 }
 
+if (IsCSSPropertyPrefEnabled("layout.css.appearance.enabled")) {
+  gCSSProperties["appearance"] = {
+    domProp: "appearance",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "auto" ],
+    other_values: [ "none" ],
+    invalid_values: [ "button" ]
+  };
+  gCSSProperties["-webkit-appearance"] = {
+    domProp: "webkitAppearance",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "appearance",
+    subproperties: [ "appearance" ],
+  };
+}
+if (IsCSSPropertyPrefEnabled("layout.css.moz-appearance.enabled")) {
+  gCSSProperties["-moz-appearance"] = {
+    domProp: "MozAppearance",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [ "none" ],
+    other_values: [ "radio", "menulist", "button", "checkbox", "textfield",
+                    "textfield-multiline", "meterbar", "progressbar", "range",
+                    "range-thumb", "spinner-upbutton", "spinner-downbutton",
+                    "number-input", "listbox", "menulist-button" ],
+    invalid_values: [ "auto" ]
+  };
+}
+
 // Copy aliased properties' fields from their alias targets.
 for (var prop in gCSSProperties) {
   var entry = gCSSProperties[prop];
diff --git a/layout/style/test/test_pseudoelement_state.html b/layout/style/test/test_pseudoelement_state.html
index ad4bf5242d42..49bc87939882 100644
--- a/layout/style/test/test_pseudoelement_state.html
+++ b/layout/style/test/test_pseudoelement_state.html
@@ -14,7 +14,7 @@ var gTests = [
   // Interact with the ::-moz-progress-bar.
   { markup:                 '<progress value="75" max="100"></progress>',
     pseudoelement:          '::-moz-progress-bar',
-    common_style:           'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
+    common_style:           'progress { -moz-appearance: none; appearance: none; } progress::-moz-progress-bar { background: black; }',
     hover_test_style:       'progress::-moz-progress-bar:hover { background: green; }',
     hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
     active_test_style:      'progress::-moz-progress-bar:active { background: lime; }',
@@ -23,7 +23,7 @@ var gTests = [
   // Interact with the part of the <progress> not covered by the ::-moz-progress-bar.
   { markup:                 '<progress value="25" max="100"></progress>',
     pseudoelement:          '::-moz-progress-bar',
-    common_style:           'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
+    common_style:           'progress { -moz-appearance: none; appearance: none; } progress::-moz-progress-bar { background: black; }',
     hover_test_style:       'progress::-moz-progress-bar { background: green; } progress::-moz-progress-bar:hover { background: red; }',
     hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
     active_test_style:      'progress::-moz-progress-bar { background: lime; } progress::-moz-progress-bar:active { background: red; }',
@@ -32,7 +32,7 @@ var gTests = [
   // Interact with the ::-moz-range-thumb.
   { markup:                 '<input type="range" value="50" min="0" max="100">',
     pseudoelement:          '::-moz-range-thumb',
-    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
+    common_style:           'input { -moz-appearance: none; appearance: none; } input::-moz-range-thumb { background: black; }',
     hover_test_style:       'input::-moz-range-thumb:hover { background: green; }',
     hover_reference_style:  'input::-moz-range-thumb { background: green; }',
     active_test_style:      'input::-moz-range-thumb:active { background: lime; }',
@@ -41,7 +41,7 @@ var gTests = [
   // Interact with the part of the <input type="range"> not covered by the ::-moz-range-thumb.
   { markup:                 '<input type="range" value="25" min="0" max="100">',
     pseudoelement:          '::-moz-range-thumb',
-    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
+    common_style:           'input { -moz-appearance: none; appearance: none; } input::-moz-range-thumb { background: black; }',
     hover_test_style:       'input::-moz-range-thumb { background: green; } input::-moz-range-thumb:hover { background: red; }',
     hover_reference_style:  'input::-moz-range-thumb { background: green; }',
     active_test_style:      'input::-moz-range-thumb { background: lime; } input::-moz-range-thumb:active { background: red; }',
@@ -50,7 +50,7 @@ var gTests = [
   // Interact with the ::-moz-meter-bar.
   { markup:                 '<meter value="75" min="0" max="100"></meter>',
     pseudoelement:          '::-moz-meter-bar',
-    common_style:           'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
+    common_style:           'meter { -moz-appearance: none; appearance: none; } meter::-moz-meter-bar { background: black; }',
     hover_test_style:       'meter::-moz-meter-bar:hover { background: green; }',
     hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
     active_test_style:      'meter::-moz-meter-bar:active { background: lime; }',
@@ -59,7 +59,7 @@ var gTests = [
   // Interact with the part of the <meter> not covered by the ::-moz-meter-bar.
   { markup:                 '<meter value="25" min="0" max="100"></meter>',
     pseudoelement:          '::-moz-meter-bar',
-    common_style:           'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
+    common_style:           'meter { -moz-appearance: none; appearance: none; } meter::-moz-meter-bar { background: black; }',
     hover_test_style:       'meter::-moz-meter-bar { background: green; } meter::-moz-meter-bar:hover { background: red; }',
     hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
     active_test_style:      'meter::-moz-meter-bar { background: lime; } meter::-moz-meter-bar:active { background: red; }',
@@ -69,7 +69,7 @@ var gTests = [
   // but with selectors that include descendant operators.
   { markup:                 '<input type="range" value="50" min="0" max="100">',
     pseudoelement:          '::-moz-range-thumb',
-    common_style:           'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
+    common_style:           'body input { -moz-appearance: none; appearance: none; } input::-moz-range-thumb { background: black; }',
     hover_test_style:       'body input::-moz-range-thumb:hover { background: green; }',
     hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
     active_test_style:      'body input::-moz-range-thumb:active { background: lime; }',
diff --git a/layout/svg/crashtests/crashtests.list b/layout/svg/crashtests/crashtests.list
index 9d2d75c55f97..a337d05a4b26 100644
--- a/layout/svg/crashtests/crashtests.list
+++ b/layout/svg/crashtests/crashtests.list
@@ -74,7 +74,7 @@ load 420697-2.svg
 load 429774-1.svg
 load 441368-1.svg
 load 453754-1.svg
-load 455314-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 455314-1.xhtml
 load 458453.html
 load 459666-1.html # bug 1323652
 load 459883.xhtml
@@ -153,7 +153,7 @@ load 789390-1.html # bug 1323652
 load 790072.svg
 load 791826-1.svg
 load 808318-1.svg
-load 803562-1.svg
+pref(layout.css.moz-appearance.enabled,true) load 803562-1.svg
 load 813420-1.svg
 load 841163-1.svg
 load 841812-1.svg
diff --git a/layout/tables/nsTableCellFrame.cpp b/layout/tables/nsTableCellFrame.cpp
index 1e94e6da430a..8084eff709ea 100644
--- a/layout/tables/nsTableCellFrame.cpp
+++ b/layout/tables/nsTableCellFrame.cpp
@@ -493,7 +493,7 @@ nsTableCellFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
     // display background if we need to.
     if (aBuilder->IsForEventDelivery() ||
         !StyleBackground()->IsTransparent(this) ||
-        StyleDisplay()->mAppearance) {
+        StyleDisplay()->UsedAppearance()) {
       nsDisplayBackgroundImage::AppendBackgroundItemsToTop(aBuilder,
           this,
           GetRectRelativeToSelf(),
diff --git a/layout/tables/nsTableFrame.cpp b/layout/tables/nsTableFrame.cpp
index 4bd33e3f26dc..4521e83eb24b 100644
--- a/layout/tables/nsTableFrame.cpp
+++ b/layout/tables/nsTableFrame.cpp
@@ -1513,7 +1513,7 @@ static inline bool FrameHasBorderOrBackground(nsTableFrame* tableFrame, nsIFrame
     return true;
   }
   if (!f->StyleBackground()->IsTransparent(f) ||
-      f->StyleDisplay()->mAppearance) {
+      f->StyleDisplay()->UsedAppearance()) {
 
     nsTableCellFrame *cellFrame = do_QueryFrame(f);
     // We could also return false here if the current frame is the root
diff --git a/layout/xul/crashtests/189814-1.xul b/layout/xul/crashtests/189814-1.xul
index 79462348c684..c025fb65cefa 100644
--- a/layout/xul/crashtests/189814-1.xul
+++ b/layout/xul/crashtests/189814-1.xul
@@ -6,7 +6,7 @@
   style="background-color: white">
 
   <label>
-  With the Classic theme, printing causes the browser to crash. adding style="-moz-appearance: none" to the
+  With the Classic theme, printing causes the browser to crash. adding style="-moz-appearance: none; appearance: none" to the
   thumb prevents the crash. The crash doesn't happen at all with Modern.
   </label>
   <spacer height="10"/>
diff --git a/layout/xul/nsBox.cpp b/layout/xul/nsBox.cpp
index 36661b060ce0..9a36e9cc87c8 100644
--- a/layout/xul/nsBox.cpp
+++ b/layout/xul/nsBox.cpp
@@ -300,13 +300,13 @@ nsBox::GetXULBorder(nsMargin& aMargin)
   aMargin.SizeTo(0,0,0,0);
     
   const nsStyleDisplay* disp = StyleDisplay();
-  if (disp->mAppearance && gTheme) {
+  if (disp->UsedAppearance() && gTheme) {
     // Go to the theme for the border.
     nsPresContext *context = PresContext();
-    if (gTheme->ThemeSupportsWidget(context, this, disp->mAppearance)) {
+    if (gTheme->ThemeSupportsWidget(context, this, disp->UsedAppearance())) {
       nsIntMargin margin(0, 0, 0, 0);
       gTheme->GetWidgetBorder(context->DeviceContext(), this,
-                              disp->mAppearance, &margin);
+                              disp->UsedAppearance(), &margin);
       aMargin.top = context->DevPixelsToAppUnits(margin.top);
       aMargin.right = context->DevPixelsToAppUnits(margin.right);
       aMargin.bottom = context->DevPixelsToAppUnits(margin.bottom);
@@ -324,15 +324,15 @@ nsresult
 nsBox::GetXULPadding(nsMargin& aMargin)
 {
   const nsStyleDisplay *disp = StyleDisplay();
-  if (disp->mAppearance && gTheme) {
+  if (disp->UsedAppearance() && gTheme) {
     // Go to the theme for the padding.
     nsPresContext *context = PresContext();
-    if (gTheme->ThemeSupportsWidget(context, this, disp->mAppearance)) {
+    if (gTheme->ThemeSupportsWidget(context, this, disp->UsedAppearance())) {
       nsIntMargin margin(0, 0, 0, 0);
       bool useThemePadding;
 
       useThemePadding = gTheme->GetWidgetPadding(context->DeviceContext(),
-                                                 this, disp->mAppearance,
+                                                 this, disp->UsedAppearance(),
                                                  &margin);
       if (useThemePadding) {
         aMargin.top = context->DevPixelsToAppUnits(margin.top);
@@ -670,12 +670,12 @@ nsIFrame::AddXULMinSize(nsBoxLayoutState& aState, nsIFrame* aBox, nsSize& aSize,
 
     // See if a native theme wants to supply a minimum size.
     const nsStyleDisplay* display = aBox->StyleDisplay();
-    if (display->mAppearance) {
+    if (display->UsedAppearance()) {
       nsITheme *theme = aState.PresContext()->GetTheme();
-      if (theme && theme->ThemeSupportsWidget(aState.PresContext(), aBox, display->mAppearance)) {
+      if (theme && theme->ThemeSupportsWidget(aState.PresContext(), aBox, display->UsedAppearance())) {
         LayoutDeviceIntSize size;
         theme->GetMinimumWidgetSize(aState.PresContext(), aBox,
-                                    display->mAppearance, &size, &canOverride);
+                                    display->UsedAppearance(), &size, &canOverride);
         if (size.width) {
           aSize.width = aState.PresContext()->DevPixelsToAppUnits(size.width);
           aWidthSet = true;
diff --git a/layout/xul/nsBoxFrame.cpp b/layout/xul/nsBoxFrame.cpp
index 95ae86266f2a..a2a2e83253fa 100644
--- a/layout/xul/nsBoxFrame.cpp
+++ b/layout/xul/nsBoxFrame.cpp
@@ -1326,7 +1326,7 @@ nsBoxFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
     // Check for frames that are marked as a part of the region used
     // in calculating glass margins on Windows.
     const nsStyleDisplay* styles = StyleDisplay();
-    if (styles && styles->mAppearance == NS_THEME_WIN_EXCLUDE_GLASS) {
+    if (styles && styles->UsedAppearance() == NS_THEME_WIN_EXCLUDE_GLASS) {
       aBuilder->AddWindowExcludeGlassRegion(
           nsRect(aBuilder->ToReferenceFrame(this), GetSize()));
     }
diff --git a/layout/xul/nsImageBoxFrame.cpp b/layout/xul/nsImageBoxFrame.cpp
index 6a7349d41ec5..f6dcd68fbabc 100644
--- a/layout/xul/nsImageBoxFrame.cpp
+++ b/layout/xul/nsImageBoxFrame.cpp
@@ -260,7 +260,7 @@ nsImageBoxFrame::UpdateImage()
   } else {
     // Only get the list-style-image if we aren't being drawn
     // by a native theme.
-    uint8_t appearance = StyleDisplay()->mAppearance;
+    uint8_t appearance = StyleDisplay()->UsedAppearance();
     if (!(appearance && nsBox::gTheme &&
           nsBox::gTheme->ThemeSupportsWidget(nullptr, this, appearance))) {
       // get the list-style-image
@@ -532,8 +532,8 @@ nsImageBoxFrame::DidSetStyleContext(nsStyleContext* aOldStyleContext)
 
   // If we're using a native theme implementation, we shouldn't draw anything.
   const nsStyleDisplay* disp = StyleDisplay();
-  if (disp->mAppearance && nsBox::gTheme &&
-      nsBox::gTheme->ThemeSupportsWidget(nullptr, this, disp->mAppearance))
+  if (disp->UsedAppearance() && nsBox::gTheme &&
+      nsBox::gTheme->ThemeSupportsWidget(nullptr, this, disp->UsedAppearance()))
     return;
 
   // If list-style-image changes, we have a new image.
diff --git a/layout/xul/nsMenuPopupFrame.cpp b/layout/xul/nsMenuPopupFrame.cpp
index bf882e03ae36..f9dd52203f47 100644
--- a/layout/xul/nsMenuPopupFrame.cpp
+++ b/layout/xul/nsMenuPopupFrame.cpp
@@ -368,7 +368,7 @@ nsMenuPopupFrame::GetShadowStyle()
   if (shadow != NS_STYLE_WINDOW_SHADOW_DEFAULT)
     return shadow;
 
-  switch (StyleDisplay()->mAppearance) {
+  switch (StyleDisplay()->UsedAppearance()) {
     case NS_THEME_TOOLTIP:
       return NS_STYLE_WINDOW_SHADOW_TOOLTIP;
     case NS_THEME_MENUPOPUP:
diff --git a/layout/xul/reftest/reftest.list b/layout/xul/reftest/reftest.list
index 39f35357747c..60aa2ee57ffd 100644
--- a/layout/xul/reftest/reftest.list
+++ b/layout/xul/reftest/reftest.list
@@ -1,5 +1,5 @@
-fails-if(Android) == textbox-multiline-noresize.xul textbox-multiline-ref.xul # reference is blank on Android (due to no native theme support?)
-!= textbox-multiline-resize.xul textbox-multiline-ref.xul
+pref(layout.css.moz-appearance.enabled,true) fails-if(Android) == textbox-multiline-noresize.xul textbox-multiline-ref.xul # reference is blank on Android (due to no native theme support?)
+pref(layout.css.moz-appearance.enabled,true) != textbox-multiline-resize.xul textbox-multiline-ref.xul
 == popup-explicit-size.xul popup-explicit-size-ref.xul
 random-if(Android) == image-size.xul image-size-ref.xul
 == image-scaling-min-height-1.xul image-scaling-min-height-1-ref.xul
diff --git a/layout/xul/test/test_bug563416.html b/layout/xul/test/test_bug563416.html
index dd245de0b05d..3a3b258e8657 100644
--- a/layout/xul/test/test_bug563416.html
+++ b/layout/xul/test/test_bug563416.html
@@ -10,7 +10,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=563416
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=563416">Mozilla Bug 563416</a>
-<p id="display"><iframe id="test" src='data:text/html,<textarea style="box-sizing:content-box; -moz-appearance:none; height: 0px; padding: 0px;" cols="20" rows="10">hsldkjvmshlkkajskdlfksdjflskdjflskdjflskdjflskdjfddddddddd</textarea>'></iframe></p>
+<p id="display"><iframe id="test" src='data:text/html,<textarea style="box-sizing:content-box; -moz-appearance:none; appearance: none; height: 0px; padding: 0px;" cols="20" rows="10">hsldkjvmshlkkajskdlfksdjflskdjflskdjflskdjflskdjfddddddddd</textarea>'></iframe></p>
 <div id="content" style="display: none">
   
 </div>
diff --git a/layout/xul/test/test_windowminmaxsize.xul b/layout/xul/test/test_windowminmaxsize.xul
index f7f17ef7b2f9..76ffaa5e563d 100644
--- a/layout/xul/test/test_windowminmaxsize.xul
+++ b/layout/xul/test/test_windowminmaxsize.xul
@@ -11,9 +11,9 @@
           src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
 
 <panel id="panel" onpopupshown="doPanelTest(this)" onpopuphidden="nextPopupTest(this)"
-       align="start" pack="start" style="-moz-appearance: none; margin: 0; border: 0; padding: 0;">
+       align="start" pack="start" style="-moz-appearance: none; appearance: none; margin: 0; border: 0; padding: 0;">
   <resizer id="popupresizer" dir="bottomright" flex="1" width="60" height="60"
-           style="-moz-appearance: none; margin: 0; border: 0; padding: 0;"/>
+           style="-moz-appearance: none; appearance: none; margin: 0; border: 0; padding: 0;"/>
 </panel>
 
 <script>
@@ -25,8 +25,8 @@ var gTestId = -1;
 
 var prefix = "data:application/vnd.mozilla.xul+xml,<?xml-stylesheet href='chrome://global/skin' type='text/css'?><window " +
              "xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' " +
-             "align='start' pack='start' style='-moz-appearance: none; margin: 0; padding: 0; border: 0; ";
-var suffix = "><resizer dir='bottomright' flex='1' width='150' height='150' style='-moz-appearance: none; margin: 0; border: 0; padding: 0;'/></window>";
+             "align='start' pack='start' style='-moz-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; ";
+var suffix = "><resizer dir='bottomright' flex='1' width='150' height='150' style='-moz-appearance: none; appearance: none; margin: 0; border: 0; padding: 0;'/></window>";
 var titledpanel = "<panel noautohide='true' titlebar='normal' minwidth='120' minheight='140'/><label value='Test'/>";
 
 // width and height in the tests below specify the expected size of the window.
diff --git a/layout/xul/tree/nsTreeBodyFrame.cpp b/layout/xul/tree/nsTreeBodyFrame.cpp
index 00a068cd779b..13e3b3a495b8 100644
--- a/layout/xul/tree/nsTreeBodyFrame.cpp
+++ b/layout/xul/tree/nsTreeBodyFrame.cpp
@@ -2083,16 +2083,16 @@ nsTreeBodyFrame::GetTwistyRect(int32_t aRowIndex,
   bool useTheme = false;
   nsITheme *theme = nullptr;
   const nsStyleDisplay* twistyDisplayData = aTwistyContext->StyleDisplay();
-  if (twistyDisplayData->mAppearance) {
+  if (twistyDisplayData->UsedAppearance()) {
     theme = aPresContext->GetTheme();
-    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, twistyDisplayData->mAppearance))
+    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, twistyDisplayData->UsedAppearance()))
       useTheme = true;
   }
 
   if (useTheme) {
     LayoutDeviceIntSize minTwistySizePx;
     bool canOverride = true;
-    theme->GetMinimumWidgetSize(aPresContext, this, twistyDisplayData->mAppearance,
+    theme->GetMinimumWidgetSize(aPresContext, this, twistyDisplayData->UsedAppearance(),
                                 &minTwistySizePx, &canOverride);
 
     // GMWS() returns size in pixels, we need to convert it back to app units
@@ -2863,7 +2863,7 @@ nsTreeBodyFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
   // geometrics for the row. In order to make the vibrancy effect to work
   // properly, we also need the tree to be themed as a source list.
   if (selection && treeFrame && theme &&
-      treeFrame->StyleDisplay()->mAppearance == NS_THEME_MAC_SOURCE_LIST) {
+      treeFrame->StyleDisplay()->UsedAppearance() == NS_THEME_MAC_SOURCE_LIST) {
     // Loop through our onscreen rows. If the row is selected and a
     // -moz-appearance is provided, RegisterThemeGeometry might be necessary.
     const auto end = std::min(mRowCount, LastVisibleRow() + 1);
@@ -2877,7 +2877,7 @@ nsTreeBodyFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
         nsTreeUtils::TokenizeProperties(properties, mScratchArray);
         nsStyleContext* rowContext =
           GetPseudoStyleContext(nsCSSAnonBoxes::moztreerow);
-        auto appearance = rowContext->StyleDisplay()->mAppearance;
+        auto appearance = rowContext->StyleDisplay()->UsedAppearance();
         if (appearance) {
           if (theme->ThemeSupportsWidget(PresContext(), this, appearance)) {
             nsITheme::ThemeGeometryType type =
@@ -3059,7 +3059,7 @@ nsTreeBodyFrame::PaintRow(int32_t               aRowIndex,
 
   // Paint our borders and background for our row rect.
   nsITheme* theme = nullptr;
-  auto appearance = rowContext->StyleDisplay()->mAppearance;
+  auto appearance = rowContext->StyleDisplay()->UsedAppearance();
   if (appearance) {
     theme = aPresContext->GetTheme();
   }
@@ -3202,9 +3202,9 @@ nsTreeBodyFrame::PaintSeparator(int32_t              aRowIndex,
   bool useTheme = false;
   nsITheme *theme = nullptr;
   const nsStyleDisplay* displayData = separatorContext->StyleDisplay();
-  if ( displayData->mAppearance ) {
+  if ( displayData->UsedAppearance() ) {
     theme = aPresContext->GetTheme();
-    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, displayData->mAppearance))
+    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, displayData->UsedAppearance()))
       useTheme = true;
   }
 
@@ -3215,7 +3215,7 @@ nsTreeBodyFrame::PaintSeparator(int32_t              aRowIndex,
     nsRect dirty;
     dirty.IntersectRect(aSeparatorRect, aDirtyRect);
     theme->DrawWidgetBackground(&aRenderingContext, this,
-                                displayData->mAppearance, aSeparatorRect, dirty); 
+                                displayData->UsedAppearance(), aSeparatorRect, dirty); 
   }
   else {
     const nsStylePosition* stylePosition = separatorContext->StylePosition();
@@ -3520,7 +3520,7 @@ nsTreeBodyFrame::PaintTwisty(int32_t              aRowIndex,
       nsRect dirty;
       dirty.IntersectRect(twistyRect, aDirtyRect);
       theme->DrawWidgetBackground(&aRenderingContext, this, 
-                                  twistyContext->StyleDisplay()->mAppearance, twistyRect, dirty);
+                                  twistyContext->StyleDisplay()->UsedAppearance(), twistyRect, dirty);
     }
     else {
       // Time to paint the twisty.
diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index 5c9794001917..9f2bbd2d1c01 100644
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2854,6 +2854,10 @@ pref("layout.css.contain.enabled", false);
 // Is support for CSS display:flow-root enabled?
 pref("layout.css.display-flow-root.enabled", true);
 
+// Is support for CSS [-moz-]appearance enabled for web content?
+pref("layout.css.appearance.enabled", true);
+pref("layout.css.moz-appearance.enabled", true);
+
 // Is support for CSS box-decoration-break enabled?
 pref("layout.css.box-decoration-break.enabled", true);
 
diff --git a/toolkit/content/tests/chrome/test_contextmenu_list.xul b/toolkit/content/tests/chrome/test_contextmenu_list.xul
index 157831a58160..20fc674ac82c 100644
--- a/toolkit/content/tests/chrome/test_contextmenu_list.xul
+++ b/toolkit/content/tests/chrome/test_contextmenu_list.xul
@@ -20,7 +20,7 @@
     <richlistitem id="item4"><checkbox label="Four"/></richlistitem>
   </richlistbox>
 
-  <tree id="tree" rows="5" flex="1" context="themenu" style="-moz-appearance: none; border: 0">
+  <tree id="tree" rows="5" flex="1" context="themenu" style="-moz-appearance: none; appearance: none; border: 0">
     <treecols>
       <treecol label="Name" flex="1"/>
       <splitter class="tree-splitter"/>
diff --git a/toolkit/content/tests/chrome/test_position.xul b/toolkit/content/tests/chrome/test_position.xul
index 695c1bf22c33..66959875d599 100644
--- a/toolkit/content/tests/chrome/test_position.xul
+++ b/toolkit/content/tests/chrome/test_position.xul
@@ -24,14 +24,14 @@
         <button id="button1" label="1" width="90" maxwidth="100"
                 minheight="25" height="35" maxheight="50"
                 style="min-width: 80px; margin: 5px; border: 4px; padding: 7px;
-                       -moz-appearance: none;"/>
+                       -moz-appearance: none; appearance: none;"/>
         <menu id="menu">
-          <menupopup id="popup" style="-moz-appearance: none; margin:0; border: 0; padding: 0;"
+          <menupopup id="popup" style="-moz-appearance: none; appearance: none; margin:0; border: 0; padding: 0;"
                                 onpopupshown="menuOpened()"
                                 onpopuphidden="if (event.target == this) SimpleTest.finish()">
             <menuitem label="One"/>
             <menu id="submenu" label="Three">
-              <menupopup id="subpopup" style="-moz-appearance: none; margin:0; border: 0; padding: 0;"
+              <menupopup id="subpopup" style="-moz-appearance: none; appearance: none; margin:0; border: 0; padding: 0;"
                          onpopupshown="submenuOpened()">
                 <menuitem label="Four"/>
               </menupopup>
diff --git a/toolkit/content/tests/chrome/window_panel.xul b/toolkit/content/tests/chrome/window_panel.xul
index b99b52dfafe4..af67d83a387e 100644
--- a/toolkit/content/tests/chrome/window_panel.xul
+++ b/toolkit/content/tests/chrome/window_panel.xul
@@ -103,8 +103,8 @@ function createPanel(attrs)
   button.label = "OK";
   button.width = 120;
   button.height = 40;
-  button.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
-  panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  button.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
+  panel.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
 
diff --git a/toolkit/content/tests/chrome/window_popup_anchor.xul b/toolkit/content/tests/chrome/window_popup_anchor.xul
index 45f5fe365aa7..acdb4fc1ff7e 100644
--- a/toolkit/content/tests/chrome/window_popup_anchor.xul
+++ b/toolkit/content/tests/chrome/window_popup_anchor.xul
@@ -14,7 +14,7 @@ window.opener.wrappedJSObject.SimpleTest.waitForFocus(runTests, window);
 </script>
 
 <spacer height="13"/>
-<button id="outerbutton" label="Button One" style="margin-left: 6px; -moz-appearance: none;"/>
+<button id="outerbutton" label="Button One" style="margin-left: 6px; -moz-appearance: none; appearance: none;"/>
 <hbox>
   <spacer width="20"/>
   <deck>
diff --git a/toolkit/content/tests/chrome/window_tooltip.xul b/toolkit/content/tests/chrome/window_tooltip.xul
index da35f0970701..039ae7d3eca4 100644
--- a/toolkit/content/tests/chrome/window_tooltip.xul
+++ b/toolkit/content/tests/chrome/window_tooltip.xul
@@ -15,12 +15,12 @@
 
 <box id="parent" tooltiptext="Box Tooltip" style="margin: 10px">
   <button id="withtext" label="Tooltip Text" tooltiptext="Button Tooltip"
-          style="-moz-appearance: none; padding: 0;"/>
-  <button id="without" label="No Tooltip" style="-moz-appearance: none; padding: 0;"/>
+          style="-moz-appearance: none; appearance: none; padding: 0;"/>
+  <button id="without" label="No Tooltip" style="-moz-appearance: none; appearance: none; padding: 0;"/>
   <!-- remove the native theme and borders to avoid some platform
        specific sizing differences -->
   <button id="withtooltip" label="Tooltip Element" tooltip="thetooltip"
-          class="plain" style="-moz-appearance: none; padding: 0;"/>
+          class="plain" style="-moz-appearance: none; appearance: none; padding: 0;"/>
   <iframe id="childframe" type="content" width="10" height="10"
           src="http://sectest2.example.org:80/chrome/toolkit/content/tests/chrome/popup_childframe_node.xul"/>
 </box>
diff --git a/toolkit/content/tests/reftests/reftest.list b/toolkit/content/tests/reftests/reftest.list
index da9f2fb3121d..c4cac7e30e5b 100644
--- a/toolkit/content/tests/reftests/reftest.list
+++ b/toolkit/content/tests/reftests/reftest.list
@@ -1,3 +1,3 @@
-random-if(cocoaWidget) == bug-442419-progressmeter-max.xul bug-442419-progressmeter-max-ref.xul # fails most of the time on Mac because progress meter animates
+pref(layout.css.moz-appearance.enabled,true) random-if(cocoaWidget) == bug-442419-progressmeter-max.xul bug-442419-progressmeter-max-ref.xul # fails most of the time on Mac because progress meter animates
 != textbox-multiline-default-value.xul textbox-multiline-empty.xul
 fails-if(stylo) == videocontrols-dynamically-add-cc.html videocontrols-dynamically-add-cc-ref.html
diff --git a/toolkit/themes/osx/reftests/baseline.xul b/toolkit/themes/osx/reftests/baseline.xul
index cbb6ef5cc51b..0a37a8a73379 100644
--- a/toolkit/themes/osx/reftests/baseline.xul
+++ b/toolkit/themes/osx/reftests/baseline.xul
@@ -46,7 +46,7 @@
 
 <html:style><![CDATA[
 window {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: white;
 }
 .regular {
diff --git a/toolkit/themes/osx/reftests/reftest.list b/toolkit/themes/osx/reftests/reftest.list
index 27034dd8629c..3307aae3764f 100644
--- a/toolkit/themes/osx/reftests/reftest.list
+++ b/toolkit/themes/osx/reftests/reftest.list
@@ -1,5 +1,5 @@
-skip-if(!cocoaWidget) == 482681.xul 482681-ref.xul
-skip-if(!cocoaWidget) == radiosize.xul radiosize-ref.xul
-skip-if(!cocoaWidget) == checkboxsize.xul checkboxsize-ref.xul
+pref(layout.css.moz-appearance.enabled,true) skip-if(!cocoaWidget) == 482681.xul 482681-ref.xul
+pref(layout.css.moz-appearance.enabled,true) skip-if(!cocoaWidget) == radiosize.xul radiosize-ref.xul
+pref(layout.css.moz-appearance.enabled,true) skip-if(!cocoaWidget) == checkboxsize.xul checkboxsize-ref.xul
 skip-if(!cocoaWidget) == baseline.xul about:blank
 skip-if(!cocoaWidget) == nostretch.xul nostretch-ref.xul
diff --git a/view/crashtests/crashtests.list b/view/crashtests/crashtests.list
index 2156501ce0d2..97c7b1cae6e4 100644
--- a/view/crashtests/crashtests.list
+++ b/view/crashtests/crashtests.list
@@ -2,7 +2,7 @@ load 38589-1.xul
 load 64049-1.html
 load 281743-1.html
 load 323497-1.html
-load 382756-1.xul
+pref(layout.css.moz-appearance.enabled,true) load 382756-1.xul
 load 387745-1.svg
 load 399852.html
 load 429315-1.html
diff --git a/widget/cocoa/crashtests/crashtests.list b/widget/cocoa/crashtests/crashtests.list
index b65fe0139402..2335fc3016dc 100644
--- a/widget/cocoa/crashtests/crashtests.list
+++ b/widget/cocoa/crashtests/crashtests.list
@@ -1,11 +1,11 @@
 skip-if(!cocoaWidget) load 373122-1.html # bug 1300017
 load 397209-1.html
 load 403296-1.xhtml
-load 419737-1.html
-load 435223-1.html
+pref(layout.css.moz-appearance.enabled,true) load 419737-1.html
+pref(layout.css.moz-appearance.enabled,true) load 435223-1.html
 load 444260-1.xul
 load 444864-1.html
 load 449111-1.html
-load 460349-1.xhtml
-load 460387-1.html
+pref(layout.css.moz-appearance.enabled,true) load 460349-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 460387-1.html
 load 464589-1.html
diff --git a/widget/cocoa/nsNativeThemeCocoa.mm b/widget/cocoa/nsNativeThemeCocoa.mm
index 24b206be8256..104f6b51b061 100644
--- a/widget/cocoa/nsNativeThemeCocoa.mm
+++ b/widget/cocoa/nsNativeThemeCocoa.mm
@@ -311,7 +311,7 @@ static BOOL IsToolbarStyleContainer(nsIFrame* aFrame)
                                   nsGkAtoms::statusbar))
     return YES;
 
-  switch (aFrame->StyleDisplay()->mAppearance) {
+  switch (aFrame->StyleDisplay()->UsedAppearance()) {
     case NS_THEME_TOOLBAR:
     case NS_THEME_STATUSBAR:
       return YES;
@@ -516,7 +516,7 @@ static BOOL IsActive(nsIFrame* aFrame, BOOL aIsToolbarControl)
 
 static bool IsInSourceList(nsIFrame* aFrame) {
   for (nsIFrame* frame = aFrame->GetParent(); frame; frame = frame->GetParent()) {
-    if (frame->StyleDisplay()->mAppearance == NS_THEME_MAC_SOURCE_LIST) {
+    if (frame->StyleDisplay()->UsedAppearance() == NS_THEME_MAC_SOURCE_LIST) {
       return true;
     }
   }
@@ -2769,7 +2769,7 @@ nsNativeThemeCocoa::DrawWidgetBackground(nsRenderingContext* aContext,
       BOOL isHorizontal = (aWidgetType == NS_THEME_SCROLLBARTHUMB_HORIZONTAL);
       BOOL isRolledOver = IsParentScrollbarRolledOver(aFrame);
       nsIFrame* scrollbarFrame = GetParentScrollbarFrame(aFrame);
-      bool isSmall = (scrollbarFrame && scrollbarFrame->StyleDisplay()->mAppearance == NS_THEME_SCROLLBAR_SMALL);
+      bool isSmall = (scrollbarFrame && scrollbarFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SCROLLBAR_SMALL);
       if (isOverlay && !isRolledOver) {
         if (isHorizontal) {
           macRect.origin.y += 4;
@@ -2819,7 +2819,7 @@ nsNativeThemeCocoa::DrawWidgetBackground(nsRenderingContext* aContext,
       if (!isOverlay || IsParentScrollbarRolledOver(aFrame)) {
         BOOL isHorizontal = (aWidgetType == NS_THEME_SCROLLBARTRACK_HORIZONTAL);
         nsIFrame* scrollbarFrame = GetParentScrollbarFrame(aFrame);
-        bool isSmall = (scrollbarFrame && scrollbarFrame->StyleDisplay()->mAppearance == NS_THEME_SCROLLBAR_SMALL);
+        bool isSmall = (scrollbarFrame && scrollbarFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SCROLLBAR_SMALL);
         const BOOL isOnTopOfDarkBackground = IsDarkBackground(aFrame);
         RenderWithCoreUI(macRect, cgContext,
                 [NSDictionary dictionaryWithObjectsAndKeys:
@@ -3390,7 +3390,7 @@ nsNativeThemeCocoa::GetMinimumWidgetSize(nsPresContext* aPresContext,
       if (!scrollbarFrame)
         return NS_ERROR_FAILURE;
 
-      bool isSmall = (scrollbarFrame->StyleDisplay()->mAppearance == NS_THEME_SCROLLBAR_SMALL);
+      bool isSmall = (scrollbarFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SCROLLBAR_SMALL);
       bool isHorizontal = (aWidgetType == NS_THEME_SCROLLBARTHUMB_HORIZONTAL);
       int32_t& minSize = isHorizontal ? aResult->width : aResult->height;
       minSize = isSmall ? kSmallScrollbarThumbMinSize : kRegularScrollbarThumbMinSize;
@@ -3407,7 +3407,7 @@ nsNativeThemeCocoa::GetMinimumWidgetSize(nsPresContext* aPresContext,
       if (nsLookAndFeel::UseOverlayScrollbars()) {
         nsIFrame* scrollbarFrame = GetParentScrollbarFrame(aFrame);
         if (scrollbarFrame &&
-            scrollbarFrame->StyleDisplay()->mAppearance ==
+            scrollbarFrame->StyleDisplay()->UsedAppearance() ==
               NS_THEME_SCROLLBAR_SMALL) {
           aResult->SizeTo(14, 14);
         }
@@ -3425,7 +3425,7 @@ nsNativeThemeCocoa::GetMinimumWidgetSize(nsPresContext* aPresContext,
       nsIFrame *scrollbarFrame = GetParentScrollbarFrame(aFrame);
       if (!scrollbarFrame) return NS_ERROR_FAILURE;
 
-      int32_t themeMetric = (scrollbarFrame->StyleDisplay()->mAppearance == NS_THEME_SCROLLBAR_SMALL) ?
+      int32_t themeMetric = (scrollbarFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SCROLLBAR_SMALL) ?
                             kThemeMetricSmallScrollBarWidth :
                             kThemeMetricScrollBarWidth;
       SInt32 scrollbarWidth = 0;
@@ -3441,7 +3441,7 @@ nsNativeThemeCocoa::GetMinimumWidgetSize(nsPresContext* aPresContext,
       if (aFrame) {
         nsIFrame* scrollbarFrame = GetParentScrollbarFrame(aFrame);
         if (scrollbarFrame &&
-            scrollbarFrame->StyleDisplay()->mAppearance ==
+            scrollbarFrame->StyleDisplay()->UsedAppearance() ==
             NS_THEME_SCROLLBAR_SMALL) {
           // XXX We're interested in the width of non-disappearing scrollbars
           // to leave enough space for a dropmarker in non-native styled
@@ -3466,7 +3466,7 @@ nsNativeThemeCocoa::GetMinimumWidgetSize(nsPresContext* aPresContext,
       if (!scrollbarFrame) return NS_ERROR_FAILURE;
 
       // Since there is no NS_THEME_SCROLLBARBUTTON_UP_SMALL we need to ask the parent what appearance style it has.
-      int32_t themeMetric = (scrollbarFrame->StyleDisplay()->mAppearance == NS_THEME_SCROLLBAR_SMALL) ?
+      int32_t themeMetric = (scrollbarFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SCROLLBAR_SMALL) ?
                             kThemeMetricSmallScrollBarWidth :
                             kThemeMetricScrollBarWidth;
       SInt32 scrollbarWidth = 0;
diff --git a/widget/crashtests/crashtests.list b/widget/crashtests/crashtests.list
index 957f3f005cea..a8565a9124ac 100644
--- a/widget/crashtests/crashtests.list
+++ b/widget/crashtests/crashtests.list
@@ -1,4 +1,4 @@
 load 303901-1.html
 load 303901-2.html
-load 380359-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 380359-1.xhtml
 load 1128214.html
diff --git a/widget/gtk/crashtests/crashtests.list b/widget/gtk/crashtests/crashtests.list
index 9ae47c2233c1..acd9bf4b5f02 100644
--- a/widget/gtk/crashtests/crashtests.list
+++ b/widget/gtk/crashtests/crashtests.list
@@ -1,2 +1,2 @@
-load 540078-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 540078-1.xhtml
 load 673390-1.html
diff --git a/widget/nsNativeTheme.cpp b/widget/nsNativeTheme.cpp
index a5a69a240636..97acb161e267 100644
--- a/widget/nsNativeTheme.cpp
+++ b/widget/nsNativeTheme.cpp
@@ -287,7 +287,7 @@ nsNativeTheme::IsWidgetStyled(nsPresContext* aPresContext, nsIFrame* aFrame,
       parentFrame = parentFrame->GetParent();
       if (parentFrame) {
         return IsWidgetStyled(aPresContext, parentFrame,
-                              parentFrame->StyleDisplay()->mAppearance);
+                              parentFrame->StyleDisplay()->UsedAppearance());
       }
     }
   }
@@ -701,7 +701,7 @@ nsNativeTheme::GetAdjacentSiblingFrameWithSameAppearance(nsIFrame* aFrame,
 
   // Check same appearance and adjacency.
   if (!sibling ||
-      sibling->StyleDisplay()->mAppearance != aFrame->StyleDisplay()->mAppearance ||
+      sibling->StyleDisplay()->UsedAppearance() != aFrame->StyleDisplay()->UsedAppearance() ||
       (sibling->GetRect().XMost() != aFrame->GetRect().x &&
        aFrame->GetRect().XMost() != sibling->GetRect().x))
     return nullptr;
diff --git a/widget/reftests/meter-fallback-default-style-ref.html b/widget/reftests/meter-fallback-default-style-ref.html
index cf6c2e521e3f..abad444c5216 100644
--- a/widget/reftests/meter-fallback-default-style-ref.html
+++ b/widget/reftests/meter-fallback-default-style-ref.html
@@ -27,8 +27,8 @@
     }
 
     div.meter-element { padding: 5px; }
-    body > div:nth-child(1)  { -moz-appearance: none; }
-    body > div:nth-child(2) > .meter-bar { -moz-appearance: none; }
+    body > div:nth-child(1)  { -moz-appearance: none; appearance: none; }
+    body > div:nth-child(2) > .meter-bar { -moz-appearance: none; appearance: none; }
     body > div:nth-child(3)  { background: red; }
     body > div:nth-child(4) > .meter-bar { background: red; }
     body > div:nth-child(5)  { border: 2px solid red; }
diff --git a/widget/reftests/meter-fallback-default-style.html b/widget/reftests/meter-fallback-default-style.html
index a5942d7e5515..619bc5a67726 100644
--- a/widget/reftests/meter-fallback-default-style.html
+++ b/widget/reftests/meter-fallback-default-style.html
@@ -2,8 +2,8 @@
 <html>
   <style>
     meter { padding: 5px }
-    body > meter:nth-child(1) { -moz-appearance: none; }
-    body > meter:nth-child(2)::-moz-meter-bar { -moz-appearance: none; }
+    body > meter:nth-child(1) { -moz-appearance: none; appearance: none; }
+    body > meter:nth-child(2)::-moz-meter-bar { -moz-appearance: none; appearance: none; }
     body > meter:nth-child(3) { background: red; }
     body > meter:nth-child(4)::-moz-meter-bar { background: red; }
     body > meter:nth-child(5) { border: 2px solid red; }
diff --git a/widget/reftests/progressbar-fallback-default-style-ref.html b/widget/reftests/progressbar-fallback-default-style-ref.html
index 5de4274ecb5b..1c1e41588b6c 100644
--- a/widget/reftests/progressbar-fallback-default-style-ref.html
+++ b/widget/reftests/progressbar-fallback-default-style-ref.html
@@ -11,7 +11,7 @@
       width: 10em;
       vertical-align: -0.2em;
 
-      /* Default style in case of there is -moz-appearance: none; */
+      /* Default style in case of there is -moz-appearance: none; appearance: none; */
       border: 2px solid;
       -moz-border-top-colors: ThreeDShadow #e6e6e6;
       -moz-border-right-colors: ThreeDHighlight #e6e6e6;
@@ -31,13 +31,13 @@
 
       box-sizing: border-box;
 
-      /* Default style in case of there is -moz-appearance: none; */
+      /* Default style in case of there is -moz-appearance: none; appearance: none; */
       background-color: #0064b4;
     }
 
     div.progress-element { padding: 5px; }
-    body > div:nth-child(1)  { -moz-appearance: none; }
-    body > div:nth-child(2) > .progress-bar { -moz-appearance: none; }
+    body > div:nth-child(1)  { -moz-appearance: none; appearance: none; }
+    body > div:nth-child(2) > .progress-bar { -moz-appearance: none; appearance: none; }
     body > div:nth-child(3)  { background-color: red; }
     body > div:nth-child(4) > .progress-bar { background-color: red; }
     body > div:nth-child(5)  { border: 2px solid red; }
diff --git a/widget/reftests/progressbar-fallback-default-style.html b/widget/reftests/progressbar-fallback-default-style.html
index 7594e6555637..dac7cfdc8a19 100644
--- a/widget/reftests/progressbar-fallback-default-style.html
+++ b/widget/reftests/progressbar-fallback-default-style.html
@@ -2,8 +2,8 @@
 <html>
   <style>
     progress { padding: 5px }
-    body > progress:nth-child(1) { -moz-appearance: none; }
-    body > progress:nth-child(2)::-moz-progress-bar { -moz-appearance: none; }
+    body > progress:nth-child(1) { -moz-appearance: none; appearance: none; }
+    body > progress:nth-child(2)::-moz-progress-bar { -moz-appearance: none; appearance: none; }
     body > progress:nth-child(3) { background-color: red; }
     body > progress:nth-child(4)::-moz-progress-bar { background-color: red; }
     body > progress:nth-child(5) { border: 2px solid red; }
diff --git a/widget/reftests/reftest.list b/widget/reftests/reftest.list
index 26057327b843..69603e498ccf 100644
--- a/widget/reftests/reftest.list
+++ b/widget/reftests/reftest.list
@@ -1,6 +1,6 @@
-skip-if(!cocoaWidget) != 507947.html about:blank
-== progressbar-fallback-default-style.html progressbar-fallback-default-style-ref.html
+pref(layout.css.moz-appearance.enabled,true) skip-if(!cocoaWidget) != 507947.html about:blank
+pref(layout.css.moz-appearance.enabled,true) == progressbar-fallback-default-style.html progressbar-fallback-default-style-ref.html
 fuzzy-if(Android,17,1120) == meter-native-style.html meter-native-style-ref.html
 skip-if(!cocoaWidget) == meter-vertical-native-style.html meter-vertical-native-style-ref.html # dithering
-== meter-fallback-default-style.html meter-fallback-default-style-ref.html
-load 664925.xhtml
+pref(layout.css.moz-appearance.enabled,true) == meter-fallback-default-style.html meter-fallback-default-style-ref.html
+pref(layout.css.moz-appearance.enabled,true) load 664925.xhtml
diff --git a/widget/windows/nsNativeThemeWin.cpp b/widget/windows/nsNativeThemeWin.cpp
index d7a244ceed83..8bb403c3ac69 100644
--- a/widget/windows/nsNativeThemeWin.cpp
+++ b/widget/windows/nsNativeThemeWin.cpp
@@ -924,7 +924,7 @@ nsNativeThemeWin::GetThemePartAndState(nsIFrame* aFrame, uint8_t aWidgetType,
       else {
         nsIFrame *parent = aFrame->GetParent();
         EventStates parentState =
-          GetContentState(parent, parent->StyleDisplay()->mAppearance);
+          GetContentState(parent, parent->StyleDisplay()->UsedAppearance());
         if (eventState.HasAllStates(NS_EVENT_STATE_HOVER | NS_EVENT_STATE_ACTIVE))
           aState += TS_ACTIVE;
         else if (eventState.HasState(NS_EVENT_STATE_HOVER))