Bug 1365614 part 3 - Backout bug 1333482 part 1-9. Removes support for [-webkit-]appearance for now b/c web compat issues. r=bz
☠☠ backed out by c902af1156a1 ☠ ☠
authorMats Palmgren <mats@mozilla.com>
Sun, 21 May 2017 17:15:00 +0800
changeset 359892 bbb688fe1ba3f5201a190c6e25b693ef7272ea2d
parent 359891 e528713f882cfc92f4c7acaf41e00dd302105ed0
child 359893 fde1635233e9e326df64c05761f661c83fa27699
push id31862
push usercbook@mozilla.com
push dateMon, 22 May 2017 11:00:29 +0000
treeherdermozilla-central@a55de96fd138 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs1365614, 1333482
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1365614 part 3 - Backout bug 1333482 part 1-9. Removes support for [-webkit-]appearance for now b/c web compat issues. r=bz
browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
browser/base/content/test/static/browser_parsable_css.js
devtools/client/responsive.html/index.css
devtools/client/sourceeditor/test/browser_css_getInfo.js
devtools/client/sourceeditor/test/css_statemachine_testcases.css
devtools/client/sourceeditor/test/css_statemachine_tests.json
devtools/client/themes/animationinspector.css
devtools/client/themes/commandline-browser.css
devtools/client/themes/common.css
devtools/client/themes/debugger.css
devtools/client/themes/devtools-browser.css
devtools/client/themes/floating-scrollbars-dark-theme.css
devtools/client/themes/floating-scrollbars-responsive-design.css
devtools/client/themes/new-webconsole.css
devtools/client/themes/responsivedesign.css
devtools/client/themes/shadereditor.css
devtools/client/themes/splitters.css
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
devtools/client/themes/tooltips.css
devtools/client/themes/webaudioeditor.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
devtools/shared/css/generated/properties-db.js
dom/animation/test/mozilla/file_discrete-animations.html
dom/base/test/test_caretPositionFromPoint.html
dom/events/test/bug656379-1.html
dom/events/test/test_bug864040.html
dom/html/reftests/autofocus/input-number-ref.html
dom/html/reftests/autofocus/input-number.html
dom/html/reftests/autofocus/input-time-ref.html
dom/html/reftests/autofocus/input-time.html
dom/html/test/forms/test_input_textarea_set_value_no_scroll.html
dom/tests/mochitest/general/test_focusrings.xul
dom/tests/mochitest/general/test_offsets.xul
editor/libeditor/tests/test_bug1053048.html
editor/reftests/xul/input.css
gfx/src/nsThemeConstants.h
gfx/tests/crashtests/crashtests.list
layout/base/GeckoRestyleManager.cpp
layout/base/RestyleManager.cpp
layout/base/crashtests/crashtests.list
layout/base/nsCSSFrameConstructor.cpp
layout/base/nsLayoutUtils.cpp
layout/base/tests/bug106855-1-ref.html
layout/base/tests/bug106855-1.html
layout/base/tests/bug106855-2.html
layout/base/tests/bug1237236-1-ref.html
layout/base/tests/bug1237236-1.html
layout/base/tests/bug1258308-1-ref.html
layout/base/tests/bug1258308-1.html
layout/base/tests/bug1259949-1-ref.html
layout/base/tests/bug1259949-1.html
layout/base/tests/bug240933-1-ref.html
layout/base/tests/bug240933-1.html
layout/base/tests/bug240933-2.html
layout/base/tests/bug585922-ref.html
layout/base/tests/bug585922.html
layout/base/tests/bug597519-1-ref.html
layout/base/tests/bug597519-1.html
layout/base/tests/bug612271-1.html
layout/base/tests/bug612271-2.html
layout/base/tests/bug612271-3.html
layout/base/tests/bug612271-ref.html
layout/base/tests/bug613807-1-ref.html
layout/base/tests/bug613807-1.html
layout/base/tests/bug634406-1-ref.html
layout/base/tests/bug634406-1.html
layout/base/tests/bug646382-1-ref.html
layout/base/tests/bug646382-1.html
layout/base/tests/bug646382-2-ref.html
layout/base/tests/bug646382-2.html
layout/base/tests/bug664087-1-ref.html
layout/base/tests/bug664087-1.html
layout/base/tests/bug664087-2-ref.html
layout/base/tests/bug664087-2.html
layout/base/tests/chrome/chrome_content_integration_window.xul
layout/base/tests/test_bug332655-1.html
layout/base/tests/test_bug332655-2.html
layout/base/tests/test_bug499538-1.html
layout/base/tests/test_bug644768.html
layout/forms/crashtests/1102791.html
layout/forms/crashtests/crashtests.list
layout/forms/nsButtonFrameRenderer.cpp
layout/forms/nsComboboxControlFrame.cpp
layout/forms/nsFormControlFrame.cpp
layout/forms/nsMeterFrame.cpp
layout/forms/nsNumberControlFrame.cpp
layout/forms/nsProgressFrame.cpp
layout/forms/nsRangeFrame.cpp
layout/forms/test/bug665540_window.xul
layout/forms/test/test_bug476308.html
layout/forms/test/test_textarea_resize.html
layout/generic/ReflowInput.cpp
layout/generic/crashtests/crashtests.list
layout/generic/nsFlexContainerFrame.cpp
layout/generic/nsFrame.cpp
layout/generic/nsIFrame.h
layout/generic/test/test_selection_preventDefault.html
layout/painting/nsCSSRendering.cpp
layout/painting/nsDisplayList.cpp
layout/reftests/abs-pos/button-1.html
layout/reftests/abs-pos/button-2.html
layout/reftests/box-shadow/boxshadow-button-ref.html
layout/reftests/box-shadow/boxshadow-button.html
layout/reftests/bugs/180085-1-ref.html
layout/reftests/bugs/180085-1.html
layout/reftests/bugs/180085-2-ref.html
layout/reftests/bugs/180085-2.html
layout/reftests/bugs/363858-2-ref.html
layout/reftests/bugs/363858-2.html
layout/reftests/bugs/363858-4-ref.html
layout/reftests/bugs/363858-4.html
layout/reftests/bugs/363858-6-ref.html
layout/reftests/bugs/363858-6a.html
layout/reftests/bugs/363858-6b.html
layout/reftests/bugs/373381-2-ref.html
layout/reftests/bugs/373381-2.html
layout/reftests/bugs/373381-4-ref.html
layout/reftests/bugs/373381-4.html
layout/reftests/bugs/423599-1-ref.html
layout/reftests/bugs/423599-1.html
layout/reftests/bugs/468473-1-ref.xul
layout/reftests/bugs/468473-1.xul
layout/reftests/bugs/474336-1-ref.xul
layout/reftests/bugs/474336-1.xul
layout/reftests/bugs/491180-1-ref.html
layout/reftests/bugs/491180-1.html
layout/reftests/bugs/491180-2-ref.html
layout/reftests/bugs/491180-2.html
layout/reftests/bugs/491323-1-ref.xul
layout/reftests/bugs/491323-1.xul
layout/reftests/bugs/542116-1-ref.html
layout/reftests/bugs/542116-1.html
layout/reftests/bugs/542116-2-ref.html
layout/reftests/bugs/542116-2.html
layout/reftests/bugs/664127-1.css
layout/reftests/bugs/668319-1.xul
layout/reftests/bugs/966992-1-ref.html
layout/reftests/bugs/966992-1.html
layout/reftests/css-enabled/select/style.css
layout/reftests/css-invalid/input/style.css
layout/reftests/css-placeholder/input/style-shown.css
layout/reftests/css-placeholder/textarea/style-shown.css
layout/reftests/flexbox/reftest.list
layout/reftests/forms/button/percent-height-child.html
layout/reftests/forms/button/percent-width-child.html
layout/reftests/forms/button/reftest.list
layout/reftests/forms/button/vertical-centering.html
layout/reftests/forms/button/width-auto-size-em-ltr.html
layout/reftests/forms/button/width-auto-size-em-rtl.html
layout/reftests/forms/button/width-auto-size-ltr.html
layout/reftests/forms/button/width-auto-size-rtl.html
layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
layout/reftests/forms/button/width-exact-fit-ltr.html
layout/reftests/forms/button/width-exact-fit-rtl.html
layout/reftests/forms/input/checkbox/checkbox-baseline.html
layout/reftests/forms/input/checkbox/checked-appearance-none.html
layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
layout/reftests/forms/input/checkbox/indeterminate-checked.html
layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
layout/reftests/forms/input/color/reftest.list
layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
layout/reftests/forms/input/datetime/time-simple-unthemed.html
layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
layout/reftests/forms/input/file/style.css
layout/reftests/forms/input/number/focus-handling-ref.html
layout/reftests/forms/input/number/focus-handling.html
layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
layout/reftests/forms/input/number/not-other-type-unthemed-1.html
layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
layout/reftests/forms/input/number/number-auto-width-1-ref.html
layout/reftests/forms/input/number/number-auto-width-1.html
layout/reftests/forms/input/number/number-disabled-ref.html
layout/reftests/forms/input/number/number-disabled.html
layout/reftests/forms/input/number/number-pseudo-elements-ref.html
layout/reftests/forms/input/number/number-pseudo-elements.html
layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
layout/reftests/forms/input/number/number-same-as-text-unthemed.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
layout/reftests/forms/input/number/reftest.list
layout/reftests/forms/input/number/show-value-ref.html
layout/reftests/forms/input/number/show-value.html
layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
layout/reftests/forms/input/radio/checked-appearance-none.html
layout/reftests/forms/input/radio/unchecked-appearance-none.html
layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
layout/reftests/forms/input/range/direction-unthemed-1-ref.html
layout/reftests/forms/input/range/direction-unthemed-1.html
layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
layout/reftests/forms/input/range/not-other-type-unthemed-1.html
layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
layout/reftests/forms/input/range/stepDown-unthemed.html
layout/reftests/forms/input/range/stepUp-unthemed.html
layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
layout/reftests/forms/input/range/value-prop-unthemed.html
layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
layout/reftests/forms/meter/default-style/style.css
layout/reftests/forms/meter/style.css
layout/reftests/forms/progress/reftest.list
layout/reftests/forms/progress/style.css
layout/reftests/forms/select/focusring-1-ref.html
layout/reftests/forms/select/focusring-1.html
layout/reftests/forms/select/focusring-2-ref.html
layout/reftests/forms/select/focusring-2.html
layout/reftests/forms/select/focusring-3-ref.html
layout/reftests/forms/select/focusring-3.html
layout/reftests/forms/select/vertical-centering-ref.html
layout/reftests/forms/select/vertical-centering.html
layout/reftests/forms/textarea/resize-ref.html
layout/reftests/forms/textarea/resize.html
layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
layout/reftests/forms/textbox/accesskey-1-notref.xul
layout/reftests/forms/textbox/accesskey-1.xul
layout/reftests/forms/textbox/accesskey-2-ref.xul
layout/reftests/forms/textbox/accesskey-2.xul
layout/reftests/forms/textbox/accesskey-3-notref.xul
layout/reftests/forms/textbox/accesskey-3-ref.xul
layout/reftests/forms/textbox/accesskey-3.xul
layout/reftests/forms/textbox/accesskey-4-notref.xul
layout/reftests/forms/textbox/accesskey-4-ref.xul
layout/reftests/forms/textbox/accesskey-4.xul
layout/reftests/forms/textbox/align-baseline-1-ref.xul
layout/reftests/forms/textbox/align-baseline-1.xul
layout/reftests/forms/textbox/reftest.list
layout/reftests/native-theme/button-nonnative-when-styled-ref.html
layout/reftests/native-theme/button-nonnative.html
layout/reftests/native-theme/checkbox-nonnative.html
layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
layout/reftests/native-theme/combobox-nonnative.html
layout/reftests/native-theme/listbox-nonnative-when-styled-ref.html
layout/reftests/native-theme/listbox-nonnative.html
layout/reftests/native-theme/native-theme-disabled-cascade-levels-ref.html
layout/reftests/native-theme/radio-nonnative.html
layout/reftests/native-theme/reftest.list
layout/reftests/native-theme/text-input-nonnative-when-styled-ref.html
layout/reftests/native-theme/text-input-nonnative.html
layout/reftests/native-theme/textarea-nonnative-when-styled-ref.html
layout/reftests/native-theme/textarea-nonnative.html
layout/reftests/svg/foreignObject-form-no-theme.svg
layout/reftests/svg/reftest.list
layout/reftests/text-decoration/underline-block-propagation-2-quirks-ref.html
layout/reftests/text-decoration/underline-block-propagation-2-quirks.html
layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
layout/reftests/text-decoration/underline-block-propagation-2-standards.html
layout/reftests/text-overflow/combobox-zoom-ref.html
layout/reftests/text-overflow/combobox-zoom.html
layout/reftests/text/control-chars-01-notref.html
layout/reftests/text/control-chars-01a.html
layout/reftests/text/control-chars-01b.html
layout/reftests/text/control-chars-01c.html
layout/reftests/text/control-chars-01d.html
layout/reftests/unicode/unicode-attribute-selector.html
layout/reftests/unicode/unicode-element-selector.html
layout/reftests/unicode/unicode-lang.html
layout/reftests/unicode/unicode-pseudo-selector.html
layout/reftests/unicode/unicode-ref.html
layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html
layout/reftests/writing-mode/1138356-1-button-contents-alignment.html
layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html
layout/reftests/writing-mode/1138356-2-button-contents-alignment.html
layout/reftests/writing-mode/reftest.list
layout/reftests/writing-mode/ua-style-sheet-button-1.html
layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
layout/reftests/writing-mode/ua-style-sheet-button-1b-ref.html
layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
layout/style/nsCSSPropAliasList.h
layout/style/nsCSSPropList.h
layout/style/nsCSSProps.cpp
layout/style/nsCSSProps.h
layout/style/nsComputedDOMStyle.cpp
layout/style/nsComputedDOMStyle.h
layout/style/nsComputedDOMStylePropertyList.h
layout/style/nsRuleNode.cpp
layout/style/nsStyleStruct.cpp
layout/style/nsStyleStruct.h
layout/style/res/forms.css
layout/style/test/property_database.js
layout/style/test/test_pseudoelement_state.html
layout/svg/crashtests/crashtests.list
layout/tables/nsTableCellFrame.cpp
layout/tables/nsTableFrame.cpp
layout/xul/crashtests/189814-1.xul
layout/xul/nsBox.cpp
layout/xul/nsBoxFrame.cpp
layout/xul/nsImageBoxFrame.cpp
layout/xul/nsMenuPopupFrame.cpp
layout/xul/reftest/reftest.list
layout/xul/test/test_bug563416.html
layout/xul/test/test_windowminmaxsize.xul
layout/xul/tree/nsTreeBodyFrame.cpp
modules/libpref/init/all.js
toolkit/content/tests/chrome/test_contextmenu_list.xul
toolkit/content/tests/chrome/test_position.xul
toolkit/content/tests/chrome/window_panel.xul
toolkit/content/tests/chrome/window_popup_anchor.xul
toolkit/content/tests/chrome/window_tooltip.xul
toolkit/content/tests/reftests/reftest.list
toolkit/themes/osx/reftests/baseline.xul
toolkit/themes/osx/reftests/reftest.list
view/crashtests/crashtests.list
widget/cocoa/crashtests/crashtests.list
widget/cocoa/nsNativeThemeCocoa.mm
widget/crashtests/crashtests.list
widget/gtk/crashtests/crashtests.list
widget/nsNativeTheme.cpp
widget/reftests/meter-fallback-default-style-ref.html
widget/reftests/meter-fallback-default-style.html
widget/reftests/progressbar-fallback-default-style-ref.html
widget/reftests/progressbar-fallback-default-style.html
widget/reftests/reftest.list
widget/windows/nsNativeThemeWin.cpp
--- a/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
+++ b/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
@@ -86,18 +86,18 @@ function createPanel(attrs)
     panel.setAttribute(a, attrs[a]);
   }
 
   var button = document.createElement("button");
   panel.appendChild(button);
   button.label = "OK";
   button.width = 120;
   button.height = 40;
-  button.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
-  panel.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
+  button.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
 
 function checkTreeCoords()
 {
   var tree = $("tree");
   var treechildren = $("treechildren");
   tree.currentIndex = 0;
--- a/browser/base/content/test/static/browser_parsable_css.js
+++ b/browser/base/content/test/static/browser_parsable_css.js
@@ -15,16 +15,20 @@ let whitelist = [
    isFromDevTools: true},
   // The debugger uses cross-browser CSS.
   {sourceName: /devtools\/client\/debugger\/new\/debugger.css/i,
    isFromDevTools: true},
   // PDFjs is futureproofing its pseudoselectors, and those rules are dropped.
   {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},
   // Highlighter CSS uses a UA-only pseudo-class, see bug 985597.
   {sourceName: /highlighters\.css$/i,
    errorMessage: /Unknown pseudo-class.*moz-native-anonymous/i,
    isFromDevTools: true},
   // Responsive Design Mode CSS uses a UA-only pseudo-class, see Bug 1241714.
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -75,17 +75,17 @@ body,
   background: none;
 }
 
 .toolbar-button:active::before {
   filter: var(--checked-icon-filter);
 }
 
 select {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   -moz-context-properties: fill;
   fill: currentColor;
   color: var(--viewport-color);
   background-position: 100% 50%;
   background-repeat: no-repeat;
   background-size: 7px;
--- a/devtools/client/sourceeditor/test/browser_css_getInfo.js
+++ b/devtools/client/sourceeditor/test/browser_css_getInfo.js
@@ -4,24 +4,24 @@
 
 "use strict";
 
 const CSSCompleter =
       require("devtools/client/sourceeditor/css-autocompleter");
 
 const source = [
   ".devtools-toolbar {",
-  "  -moz-appearance: none; appearance: none;",
+  "  -moz-appearance: none;",
   "           padding:4px 3px;border-bottom-width: 1px;",
   "  border-bottom-style: solid;",
   "}",
   "",
   "#devtools-menu.devtools-menulist,",
   ".devtools-toolbarbutton#devtools-menu {",
-  "  -moz-appearance: none; appearance: none;",
+  "  -moz-appearance: none;",
   "  -moz-box-align: center;",
   "  min-width: 78px;",
   "  min-height: 22px;",
   "  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);",
   "  border: 1px solid hsla(210,8%,5%,.45);",
   "  border-radius: 3px;",
   "  background: linear-gradient(hsla(212,7%,57%,.35),",
   "              hsla(212,7%,57%,.1)) padding-box;",
--- a/devtools/client/sourceeditor/test/css_statemachine_testcases.css
+++ b/devtools/client/sourceeditor/test/css_statemachine_testcases.css
@@ -1,21 +1,21 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .devtools-toolbar {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
            padding:4px 3px;border-bottom-width: 1px;
   border-bottom-style: solid;
 }
 
 #devtools-menu.devtools-menulist,
 .devtools-toolbarbutton#devtools-menu {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(210,8%,5%,.45);
   border-radius: 3px;
   background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
@@ -59,17 +59,17 @@
   background-color: transparent !important;
 }
 
 .devtools-toolbarbutton[checked=true]:hover:active {
   background-color: hsla(210,8%,5%,.2) !important;
 }
 
 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 
 .devtools-sidebar-tabs > tabs > tab:first-of-type {
   margin-inline-start: -3px;
 }
 
 .devtools-sidebar-tabs > tabs > tab:not(:last-of-type) {
   background-size: calc(100% - 2px) 100%, 1px 100%;
--- a/devtools/client/sourceeditor/test/css_statemachine_tests.json
+++ b/devtools/client/sourceeditor/test/css_statemachine_tests.json
@@ -14,26 +14,29 @@
     "    propertyName,  // what property is being completed in case of value state",
     "                   // or the current selector that is being completed",
     "  ]",
     "]"
   ],
   "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"]],
     [[6, 50], ["value", "null", "1p", "border-bottom-width"]],
     [[7, 24], ["value", "null", "s", "border-bottom-style"]],
     [[9,  0], ["null", "null", "", ""]],
     [[10, 6], ["selector", "id", "devto", "#devto"]],
     [[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"]],
     [[19, 79], ["value", "null", "paddin", "background"]],
     [[20, 47], ["value", "null", "ins", "box-shadow"]],
     [[22, 15], ["value", "null", "inheri", "color"]],
     [[25, 26], ["selector", "null", "", ".devtools-toolbarbutton > "]],
     [[25, 28], ["selector", "tag", "hb", ".devtools-toolbarbutton > hb"]],
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -209,17 +209,17 @@ body {
   background-image: var(--rewind-image);
 }
 
 .pause-button.paused::before {
   background-image: var(--play-image);
 }
 
 #timeline-rate select.devtools-button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   text-align: center;
   font-family: inherit;
   color: var(--theme-body-color);
   font-size: 1em;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
--- a/devtools/client/themes/commandline-browser.css
+++ b/devtools/client/themes/commandline-browser.css
@@ -29,25 +29,25 @@
   --gcli-border-color: #454d5d; /* --theme-splitter-color */
   --selection-background: #5675b9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #developer-toolbar {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   padding: 0;
   min-height: 32px;
   background-color: var(--gcli-background-color);
   border-top: 1px solid var(--gcli-border-color);
 }
 
 #developer-toolbar > toolbarbutton {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   border: none;
   background-color: transparent;
   margin: 0;
   padding: 0 10px;
   width: 32px;
 }
 
 .developer-toolbar-button > image {
@@ -118,17 +118,16 @@ html|*#gcli-output-frame {
   background-color: transparent;
 }
 
 #gcli-output,
 #gcli-tooltip {
   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.
    */
   width: 80vw;
 }
 
 .gclitoolbar-input-node,
@@ -141,17 +140,17 @@ html|*#gcli-output-frame {
   text-shadow: none;
   box-shadow: none;
   border-width: 0;
   background-color: transparent;
   border-radius: 0;
 }
 
 .gclitoolbar-input-node {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   color: var(--gcli-input-color);
   background-color: var(--gcli-input-background);
   background-repeat: no-repeat;
   background-position: 4px center;
   box-shadow: 1px 0 0 var(--gcli-border-color) inset,
               -1px 0 0 var(--gcli-border-color) inset;
 
   line-height: 32px;
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -65,17 +65,17 @@ html|button, html|select {
 }
 
 :root[platform="linux"] .devtools-autocomplete-popup {
   /* Root font size is bigger on Linux, adjust rem-based values. */
   max-height: 16rem;
 }
 
 .devtools-autocomplete-listbox {
-  -moz-appearance: none !important; appearance: none !important;
+  -moz-appearance: none !important;
   background-color: transparent;
   border-width: 0px !important;
   margin: 0;
   padding: 2px;
 }
 
 .devtools-autocomplete-listbox .autocomplete-item {
   width: 100%;
@@ -224,17 +224,17 @@ input[type="checkbox"]:-moz-focusring,
 checkbox:-moz-focusring {
   outline: none;
 }
 
 /* Toolbar buttons */
 .devtools-menulist,
 .devtools-toolbarbutton,
 .devtools-button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: transparent;
   border: 1px solid var(--toolbarbutton-border-color);
   border-radius: 2px;
   color: var(--theme-body-color);
   transition: background 0.05s ease-in-out;
   -moz-box-align: center;
   text-shadow: none;
   padding: 1px;
@@ -378,17 +378,17 @@ checkbox:-moz-focusring {
   margin-inline-start: 1px;
 }
 
 /* Text input */
 
 .devtools-textinput,
 .devtools-searchinput,
 .devtools-filterinput {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   margin: 1px 3px;
   border: 1px solid;
   border-radius: 2px;
   padding: 4px 6px;
   border-color: var(--theme-splitter-color);
   font: message-box;
 }
 
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -57,17 +57,17 @@
   width: 16px;
   height: 16px;
   margin: 2px;
 }
 
 /* Firebug theme uses breakpoint icon istead of a checkbox */
 
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   border: none;
   background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%;
 }
 
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) > .checkbox-check,
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) ~ * {
   opacity: 0.5;
 }
@@ -322,17 +322,17 @@
   margin: 2px;
 }
 
 .dbg-expression-input {
   color: inherit;
 }
 
 .dbg-expression-button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   border: none;
   background: none;
   text-decoration: underline;
   cursor: pointer;
 }
 
 .dbg-expression-button {
   color: var(--theme-highlight-blue);
--- a/devtools/client/themes/devtools-browser.css
+++ b/devtools/client/themes/devtools-browser.css
@@ -15,14 +15,14 @@
   min-width: 465px;
 }
 
 /* Eyedropper Widget */
 /* <panel> added to mainPopupSet */
 
 .devtools-eyedropper-panel {
   pointer-events: none;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   width: 156px;
   height: 120px;
   background-color: transparent;
   border: none;
 }
--- a/devtools/client/themes/floating-scrollbars-dark-theme.css
+++ b/devtools/client/themes/floating-scrollbars-dark-theme.css
@@ -2,17 +2,17 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 /* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
    inside a <select> are excluded (including them hides the select arrow on
    Windows).  We want to include both the root scrollbars for the document as
    well as any overflow: scroll elements within the page, while excluding
    <select>. */
 *|*:not(html|select) > scrollbar {
-  -moz-appearance: none !important; appearance: none !important;
+  -moz-appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
   z-index: 2147483647;
   padding: 2px;
   pointer-events: auto;
 }
 
@@ -32,24 +32,24 @@
 *|*:not(html|select) > scrollbar[orient="horizontal"] {
   margin-top: -10px;
   min-height: 10px;
   max-height: 10px;
 }
 
 *|*:not(html|select) > scrollbar thumb {
   background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */
-  -moz-appearance: none !important; appearance: none !important;
+  -moz-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; appearance: none !important;
+  -moz-appearance: none !important;
 }
 
 *|*:root[platform="win"] > scrollbar scrollbarbutton,
 *|*:root[platform="linux"] > scrollbar scrollbarbutton,
 *|*:root[platform="win"] > scrollbar gripper,
 *|*:root[platform="linux"] > scrollbar gripper,
 *|*:root[platform="win"] *|*:not(html|select) > scrollbar scrollbarbutton,
 *|*:root[platform="linux"] *|*:not(html|select) > scrollbar scrollbarbutton,
--- a/devtools/client/themes/floating-scrollbars-responsive-design.css
+++ b/devtools/client/themes/floating-scrollbars-responsive-design.css
@@ -2,17 +2,17 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 /* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
    inside a <select> are excluded (including them hides the select arrow on
    Windows).  We want to include both the root scrollbars for the document as
    well as any overflow: scroll elements within the page, while excluding
    <select>. */
 *|*:not(html|select) > scrollbar {
-  -moz-appearance: none !important; appearance: none !important;
+  -moz-appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
   z-index: 2147483647;
   padding: 2px;
   border: none;
 }
 
@@ -26,21 +26,21 @@
 
 *|*:not(html|select) > scrollbar[orient="horizontal"] {
   margin-top: -10px;
   min-height: 10px;
   max-height: 10px;
 }
 
 *|*:not(html|select) > scrollbar slider {
-  -moz-appearance: none !important; appearance: none !important;
+  -moz-appearance: none !important;
 }
 
 *|*:not(html|select) > scrollbar thumb {
-  -moz-appearance: none !important; appearance: none !important;
+  -moz-appearance: none !important;
   background-color: rgba(0,0,0,0.2);
   border-width: 0px !important;
   border-radius: 3px !important;
 }
 
 *|*:not(html|select) > scrollbar scrollbarbutton,
 *|*:not(html|select) > scrollbar gripper {
   display: none;
--- a/devtools/client/themes/new-webconsole.css
+++ b/devtools/client/themes/new-webconsole.css
@@ -455,17 +455,17 @@ body {
 }
 
 .jsterm-input-node,
 .jsterm-complete-node {
   border: none;
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background-color: transparent;
 }
 
 .jsterm-input-node[focused="true"] {
   background-image: var(--theme-command-line-image-focus);
   box-shadow: none;
 }
 
--- a/devtools/client/themes/responsivedesign.css
+++ b/devtools/client/themes/responsivedesign.css
@@ -11,66 +11,66 @@
   padding: 0 20px 20px 20px;
 }
 
 .browserStack[responsivemode] {
   box-shadow: 0 0 7px black;
 }
 
 .devtools-responsiveui-toolbar {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: transparent;
   /* text color is textColor from dark theme, since no theme is applied to
    * the responsive toolbar.
    */
   color: hsl(210,30%,85%);
   margin: 10px 0;
   padding: 0;
   box-shadow: none;
   border-bottom-width: 0;
 }
 
 .devtools-responsiveui-textinput {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: #333;
   color: #fff;
   border: 1px solid #111;
   border-radius: 2px;
   padding: 0 5px;
   width: 200px;
   margin: 0;
 }
 
 .devtools-responsiveui-textinput[attention] {
   border-color: #38ace6;
   background: rgba(56,172,230,0.4);
 }
 
 .devtools-responsiveui-menulist,
 .devtools-responsiveui-toolbarbutton {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   -moz-box-align: center;
   min-width: 32px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(210,8%,5%,.45);
   border-radius: 0;
   background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
   margin: 0 3px;
   color: inherit;
 }
 
 .devtools-responsiveui-menulist .menulist-editable-box {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background-color: transparent;
 }
 
 .devtools-responsiveui-menulist html|*.menulist-editable-input {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   color: inherit;
   text-align: center;
 }
 
 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
   background: hsla(212,7%,57%,.35);
 }
 
@@ -119,27 +119,27 @@
   background-color: hsla(210,8%,5%,.2) !important;
 }
 
 .devtools-responsiveui-menulist > .menulist-label-box {
   text-align: center;
 }
 
 .devtools-responsiveui-menulist > .menulist-dropmarker {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   display: -moz-box;
   background-color: transparent;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
   -moz-box-align: center;
   border-width: 0;
   min-width: 16px;
 }
 
 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   color: inherit;
   border-width: 0;
   border-inline-end: 1px solid hsla(210,8%,5%,.45);
   box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
 }
 
 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
   box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
@@ -147,17 +147,17 @@
 
 .devtools-responsiveui-toolbarbutton[type=menu-button] {
   padding: 0 1px;
   -moz-box-align: stretch;
 }
 
 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important; appearance: none !important;
+  -moz-appearance: none !important;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
   -moz-box-align: center;
   padding: 0 3px;
 }
 
 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
   margin-left: 0;
@@ -261,17 +261,17 @@
 
   box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
 
   background-image: linear-gradient(to right, #111 11%, #333 56%);
   min-width: 320px;
 }
 
 .devtools-responsiveui-hardware-buttons {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   padding: 20px;
 
   border: 1px solid #FFFFFF;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   border-top-width: 0;
 
   box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
@@ -283,17 +283,17 @@
   -moz-user-focus: ignore;
   width: 40px;
   height: 30px;
   list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png");
 }
 
 .devtools-responsiveui-sleep-button {
   -moz-user-focus: ignore;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   /* compensate browserStack top padding */
   margin-top: -67px;
   margin-right: 10px;
 
   min-width: 10px;
   width: 50px;
   height: 5px;
 
@@ -311,17 +311,17 @@
 
 .devtools-responsiveui-volume-buttons {
   margin-left: -29px;
 }
 
 .devtools-responsiveui-volume-up-button,
 .devtools-responsiveui-volume-down-button {
   -moz-user-focus: ignore;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   border: 1px solid red;
   min-width: 8px;
   height: 40px;
 
   border: 1px solid #444;
   border-right-color: transparent;
 
   background-image: linear-gradient(to right, #111 11%, #333 56%);
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -23,32 +23,32 @@
   min-width: 150px;
 }
 
 .program-item {
   padding: 2px 0px;
 }
 
 .side-menu-widget-item-checkbox {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   opacity: 0;
   transition: opacity .15s ease-out 0s;
 }
 
 /* Only show the checkbox when the source is hovered over, is selected, or if it
  * is not checked. */
 .side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
 .side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
 .side-menu-widget-item-checkbox:not([checked]) {
   opacity: 1;
   transition: opacity .15s ease-out 0s;
 }
 
 .side-menu-widget-item-checkbox .checkbox-check {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background-image: url(images/item-toggle.svg);
   background-color: transparent;
   width: 16px;
   height: 16px;
   border: 0;
 }
 
 .side-menu-widget-item-checkbox:not([checked]) .checkbox-check,
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -26,17 +26,17 @@
 }
 
 #content[devtoolstheme="dark"] {
   --devtools-splitter-color: #42484f;
 }
 
 .devtools-horizontal-splitter,
 .devtools-side-splitter {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background-image: none;
   border: 0;
   border-style: solid;
   border-color: transparent;
   background-color: var(--devtools-splitter-color);
   background-clip: content-box;
   position: relative;
 
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -85,23 +85,23 @@
   background-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%);
   background-size: 1px 100%;
   background-repeat: no-repeat;
   background-position: 0, 1px, 2px;
 }
 
 /* In-tools sidebar */
 .devtools-sidebar-tabs {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   margin: 0;
   height: 100%;
 }
 
 .devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: transparent;
   padding: 0;
   border: 0;
 }
 
 .theme-light .devtools-sidebar-tabs > tabpanels {
   background: var(--theme-sidebar-background);
   color: var(--theme-body-color);
@@ -110,17 +110,17 @@
 .devtools-sidebar-tabs tabs {
   position: static;
   font: inherit;
   margin-bottom: 0;
   overflow: hidden;
 }
 
 .devtools-sidebar-alltabs {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   height: 24px;
   line-height: 24px;
   padding: 0 4px;
   margin: 0;
   border-width: 0 0 1px 0;
   border-inline-start-width: 1px;
   border-style: solid;
 }
@@ -130,17 +130,17 @@
 }
 
 .devtools-sidebar-tabs tabs > .tabs-right,
 .devtools-sidebar-tabs tabs > .tabs-left {
   display: none;
 }
 
 .devtools-sidebar-tabs tabs > tab {
-  -moz-appearance: none; appearance: none;
+  -moz-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).
    */
   padding: 0 3px;
   margin: 0;
   min-width: 78px;
   text-align: center;
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -37,17 +37,17 @@
   --command-noautohide-image: url(images/firebug/command-noautohide.svg);
   --command-rulers-image: url(images/firebug/command-rulers.svg);
   --command-measure-image: url(images/firebug/command-measure.svg);
 }
 
 /* Toolbox tabbar */
 
 .devtools-tabbar {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   min-height: 24px;
   border: 0px solid;
   border-bottom-width: 1px;
   padding: 0;
   background: var(--theme-tab-toolbar-background);
   border-bottom-color: var(--theme-splitter-color);
   display: flex;
 }
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -104,17 +104,17 @@
   display: none;
   background: transparent;
   pointer-events: none;
   overflow: hidden;
   filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
 }
 
 .tooltip-xul-wrapper {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: transparent;
   overflow: visible;
   border-style: none;
 }
 
 .tooltip-xul-wrapper .tooltip-container {
   position: absolute;
 }
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -120,17 +120,17 @@ text {
 
 #web-audio-inspector-title {
   margin: 6px;
 }
 
 .web-audio-inspector .error {
   background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   opacity: 0;
   transition: opacity .5s ease-out 0s;
 }
 
 #inspector-pane-toggle {
   background: none;
   box-shadow: none;
   border: none;
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -419,17 +419,17 @@ a {
 }
 
 .jsterm-input-node,
 .jsterm-complete-node {
   border: none;
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background-color: transparent;
 }
 
 .jsterm-input-node[focused="true"] {
   background-image: var(--theme-command-line-image-focus);
   box-shadow: none;
 }
 
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -118,28 +118,28 @@
 .breadcrumbs-widget-container {
   margin-inline-end: 3px;
   max-height: 24px; /* Set max-height for proper sizing on linux */
   height: 24px; /* Set height to prevent starting small waiting for content */
 }
 
 .scrollbutton-up,
 .scrollbutton-down {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: transparent;
   box-shadow: none;
   border: none;
   list-style-image: none;
   margin: 0;
   padding: 0;
 }
 
 .scrollbutton-up > .toolbarbutton-icon,
 .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   width: 7px;
   height: 16px;
   background-size: 14px 16px;
   background-position: 0 center;
   background-repeat: no-repeat;
   background-image: url("images/breadcrumbs-scrollbutton.png");
   list-style-image: none;
   margin: 0 8px;
@@ -192,17 +192,17 @@
 .scrollbutton-up > .toolbarbutton-icon:dir(rtl),
 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr):not(:dir(rtl)),
 .scrollbutton-down > .toolbarbutton-icon:dir(ltr) {
   transform: scaleX(-1);
 }
 
 .breadcrumbs-widget-item {
   background-color: transparent;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   min-height: 24px;
   min-width: 65px;
   margin: 0;
   padding: 0 8px 0 20px;
   border: none;
   outline: none;
   color: hsl(210,30%,85%);
   position: relative;
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -1741,30 +1741,16 @@ exports.CSS_PROPERTIES = {
       "initial",
       "linear",
       "step-end",
       "step-start",
       "steps",
       "unset"
     ]
   },
-  "-webkit-appearance": {
-    "isInherited": false,
-    "subproperties": [
-      "appearance"
-    ],
-    "supports": [],
-    "values": [
-      "auto",
-      "inherit",
-      "initial",
-      "none",
-      "unset"
-    ]
-  },
   "-webkit-backface-visibility": {
     "isInherited": false,
     "subproperties": [
       "backface-visibility"
     ],
     "supports": [],
     "values": [
       "hidden",
@@ -2867,17 +2853,16 @@ exports.CSS_PROPERTIES = {
       "animation-direction",
       "animation-duration",
       "animation-fill-mode",
       "animation-iteration-count",
       "animation-name",
       "animation-play-state",
       "animation-timing-function",
       "-moz-appearance",
-      "appearance",
       "backface-visibility",
       "background-attachment",
       "background-blend-mode",
       "background-clip",
       "background-color",
       "background-image",
       "background-origin",
       "background-position-x",
@@ -3899,30 +3884,16 @@ exports.CSS_PROPERTIES = {
       "initial",
       "linear",
       "step-end",
       "step-start",
       "steps",
       "unset"
     ]
   },
-  "appearance": {
-    "isInherited": false,
-    "subproperties": [
-      "appearance"
-    ],
-    "supports": [],
-    "values": [
-      "auto",
-      "inherit",
-      "initial",
-      "none",
-      "unset"
-    ]
-  },
   "backface-visibility": {
     "isInherited": false,
     "subproperties": [
       "backface-visibility"
     ],
     "supports": [],
     "values": [
       "hidden",
@@ -9817,24 +9788,16 @@ exports.PSEUDO_ELEMENTS = [
  * exposed for testing purposes.
  */
 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"
   ],
   [
     "box-decoration-break",
     "layout.css.box-decoration-break.enabled"
   ],
   [
@@ -10149,20 +10112,16 @@ exports.PREFERENCES = [
     "-webkit-animation-play-state",
     "layout.css.prefixes.webkit"
   ],
   [
     "-webkit-animation-timing-function",
     "layout.css.prefixes.webkit"
   ],
   [
-    "-webkit-appearance",
-    "layout.css.appearance.enabled"
-  ],
-  [
     "-webkit-filter",
     "layout.css.prefixes.webkit"
   ],
   [
     "-webkit-text-size-adjust",
     "layout.css.prefixes.webkit"
   ],
   [
--- a/dom/animation/test/mozilla/file_discrete-animations.html
+++ b/dom/animation/test/mozilla/file_discrete-animations.html
@@ -4,16 +4,21 @@
 <title>Test Mozilla-specific discrete animatable properties</title>
 <script type="application/javascript" src="../testcommon.js"></script>
 </head>
 <body>
 <script>
 "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)"
   },
   "-moz-border-left-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)"
   },
--- a/dom/base/test/test_caretPositionFromPoint.html
+++ b/dom/base/test/test_caretPositionFromPoint.html
@@ -22,17 +22,17 @@
       width: 450px;
     }
 
     #test5 {
       height: 100px;
     }
 
     textarea, input {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
     }
   </style>
 <script>
   function convertEmToPx(aEm) {
     // Assumes our base font size is 16px = 12pt = 1.0em.
     var pxPerEm = 16.0 / 1.0;
     return pxPerEm * aEm;
   }
--- a/dom/events/test/bug656379-1.html
+++ b/dom/events/test/bug656379-1.html
@@ -9,17 +9,17 @@ https://bugzilla.mozilla.org/show_bug.cg
   <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <style>
     canvas {
       display: none;
     }
     input[type=button] {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       padding: 0;
       border: none;
       color: black;
       background: white;
     }
     input[type=button]::-moz-focus-inner { border: none; }
 
     /* Make sure that normal, focused, hover+active, focused+hover+active
--- a/dom/events/test/test_bug864040.html
+++ b/dom/events/test/test_bug864040.html
@@ -9,17 +9,17 @@ https://bugzilla.mozilla.org/show_bug.cg
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <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; appearance: none"></textarea>
+  <textarea id="ta" rows="5" cols="20" style="-moz-appearance:none"></textarea>
   <div id="ce" contentEditable="true" style="height: 5em;"></div>
 </div>
 <div id="content" style="display: none">
 </div>
 <pre id="test">
   <script type="application/javascript">
     /**
     * Test for Bug 864040
--- a/dom/html/reftests/autofocus/input-number-ref.html
+++ b/dom/html/reftests/autofocus/input-number-ref.html
@@ -4,14 +4,14 @@
        get snapshotted before it's been focused. We're not testing                 
        invalidation so we don't need to listen for MozReftestInvalidate.           
   -->                                                                              
   <head>
     <meta charset="utf-8">
   </head>
   <body onload="document.getElementsByTagName('input')[0].focus();">
     <input onfocus="document.documentElement.removeAttribute('class');"
-           style="-moz-appearance: none; appearance: none;">
+           style="-moz-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>
 </html>
 
--- a/dom/html/reftests/autofocus/input-number.html
+++ b/dom/html/reftests/autofocus/input-number.html
@@ -13,14 +13,14 @@ function focusHandler() {
     document.documentElement.removeAttribute('class');
   }, 0);
 }
 
     </script>
   </head>
   <body>
     <input type="number" autofocus onfocus="focusHandler();"
-           style="-moz-appearance: none; appearance: none;">
+           style="-moz-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>
 </html>
 
--- a/dom/html/reftests/autofocus/input-time-ref.html
+++ b/dom/html/reftests/autofocus/input-time-ref.html
@@ -10,13 +10,13 @@
         setTimeout(function() {
           document.documentElement.removeAttribute("class");
         }, 0);
       }
     </script>
   </head>
   <body onload="document.getElementById('t').focus();">
     <input type="time" id="t" onfocus="focusHandler();"
-           style="-moz-appearance: none; appearance: none;">
+           style="-moz-appearance: none;">
   </body>
 </html>
 
 
--- a/dom/html/reftests/autofocus/input-time.html
+++ b/dom/html/reftests/autofocus/input-time.html
@@ -10,13 +10,13 @@
         setTimeout(function() {
           document.documentElement.removeAttribute("class");
         }, 0);
       }
     </script>
   </head>
   <body>
     <input type="time" autofocus onfocus="focusHandler();"
-           style="-moz-appearance: none; appearance: none;">
+           style="-moz-appearance: none;">
   </body>
 </html>
 
 
--- 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
@@ -107,15 +107,15 @@ https://bugzilla.mozilla.org/show_bug.cg
   });;
 
   </script>
 </head>
 <body>
 <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; 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;'>
+  <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;'>
 </div>
 <pre id="test">
 </pre>
 </body>
 </html>
--- a/dom/tests/mochitest/general/test_focusrings.xul
+++ b/dom/tests/mochitest/general/test_focusrings.xul
@@ -163,13 +163,13 @@ SimpleTest.waitForFocus(runTest);
 
 <listbox id="l1" class="plain" height="20"/>
 <listbox id="l2" class="plain" height="20"/>
 <listbox id="l3" class="plain" height="20"/>
 <button id="b1" label="Button"/>
 <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; 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; 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;"/>
 
 </window>
--- a/dom/tests/mochitest/general/test_offsets.xul
+++ b/dom/tests/mochitest/general/test_offsets.xul
@@ -42,18 +42,18 @@
 </vbox>
 
 <button id="outermenu" type="menu" label="Menu">
   <menupopup id="outerpopup"
              style="margin-left: 5px; padding-left: 3px; padding: 0;"
              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; appearance: none;">
-      <menupopup style="margin: 0; padding: 0; border: 1px black solid; -moz-appearance: none; appearance: none;"
+          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;"
                  onpopupshown="testElements('outermenu', doneTests)">
         <menuitem label="Document"/>
         <menuitem id="innermenuitem" style="margin: 2px; padding: 3px;" label="Page"/>
       </menupopup>
     </menu>
     <menuitem id="outermenuitem" label="Close"/>
   </menupopup>
 </button>
--- a/editor/libeditor/tests/test_bug1053048.html
+++ b/editor/libeditor/tests/test_bug1053048.html
@@ -58,16 +58,16 @@ https://bugzilla.mozilla.org/show_bug.cg
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1053048">Mozilla Bug 1053048</a>
 <p id="display"></p>
 <div id="content" style="display: none">
 
 </div>
 
 <textarea id="textarea"
-          style="height: 100px; width: 300px; -moz-appearance: none; appearance: none"
+          style="height: 100px; width: 300px; -moz-appearance: none"
           spellcheck="false"
           onkeydown="this.style.display='block'; this.style.height='200px';">foo</textarea>
 
 <pre id="test">
 </pre>
 </body>
 </html>
--- a/editor/reftests/xul/input.css
+++ b/editor/reftests/xul/input.css
@@ -19,17 +19,17 @@
 
 #linux html|input, #linux html|textarea {
   margin: 2px 4px;
   padding: 2px 5px 3px;
 }
 
 textbox[multiline="true"], html|textarea {
   border: none !important;
-  -moz-appearance: none; appearance: none !important;
+  -moz-appearance: none !important;
   background-color: white !important;
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 html|input, html|textarea {
   font: inherit;
 }
--- a/gfx/src/nsThemeConstants.h
+++ b/gfx/src/nsThemeConstants.h
@@ -9,19 +9,16 @@
 #define NS_THEME_BUTTON                                    1
 
 // A radio element within a radio group.
 #define NS_THEME_RADIO                                     2
 
 // 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
 
 // A themed focus outline (for outline:auto)
 #define NS_THEME_FOCUS_OUTLINE                             8
 
 // The toolbox that contains the toolbars.
--- a/gfx/tests/crashtests/crashtests.list
+++ b/gfx/tests/crashtests/crashtests.list
@@ -81,20 +81,20 @@ load 532726-1.html
 load 538065-1.html
 load 546870-1.html
 load 557348-1.html
 load 563740-1.html
 load 580100-1.html
 load 580212-1.html
 load 580233-1.html
 load 580719-1.html
-pref(layout.css.moz-appearance.enabled,true) load 593526.html
-pref(layout.css.moz-appearance.enabled,true) load 593526.xul
+load 593526.html
+load 593526.xul
 load 594654-1.xhtml
-pref(layout.css.moz-appearance.enabled,true) load 595042-1.html
+load 595042-1.html
 load 595727-1.html
 load 624198.xhtml
 load 633322-1.html
 load 633453-1.html
 load 662467-1.html
 load 665218.html
 load 675550-1.html
 load 686190-1.html
--- a/layout/base/GeckoRestyleManager.cpp
+++ b/layout/base/GeckoRestyleManager.cpp
@@ -294,21 +294,21 @@ GeckoRestyleManager::AttributeChanged(El
     }
   }
 
 #endif // MOZ_XUL
 
   if (primaryFrame) {
     // See if we have appearance information for a theme.
     const nsStyleDisplay* disp = primaryFrame->StyleDisplay();
-    if (disp->UsedAppearance()) {
+    if (disp->mAppearance) {
       nsITheme* theme = PresContext()->GetTheme();
-      if (theme && theme->ThemeSupportsWidget(PresContext(), primaryFrame, disp->UsedAppearance())) {
+      if (theme && theme->ThemeSupportsWidget(PresContext(), primaryFrame, disp->mAppearance)) {
         bool repaint = false;
-        theme->WidgetStateChanged(primaryFrame, disp->UsedAppearance(), aAttribute,
+        theme->WidgetStateChanged(primaryFrame, disp->mAppearance, aAttribute,
             &repaint, aOldValue);
         if (repaint)
           hint |= nsChangeHint_RepaintFrame;
       }
     }
 
     // let the frame deal with it now, so we don't have to deal later
     primaryFrame->AttributeChanged(aNameSpaceID, aAttribute, aModType);
--- a/layout/base/RestyleManager.cpp
+++ b/layout/base/RestyleManager.cpp
@@ -355,17 +355,17 @@ RestyleManager::ContentStateChangedInter
     // If it's generated content, ignore LOADING/etc state changes on it.
     if (!primaryFrame->IsGeneratedContentFrame() &&
         aStateMask.HasAtLeastOneOfStates(NS_EVENT_STATE_BROKEN |
                                          NS_EVENT_STATE_USERDISABLED |
                                          NS_EVENT_STATE_SUPPRESSED |
                                          NS_EVENT_STATE_LOADING)) {
       *aOutChangeHint = nsChangeHint_ReconstructFrame;
     } else {
-      uint8_t app = primaryFrame->StyleDisplay()->UsedAppearance();
+      uint8_t app = primaryFrame->StyleDisplay()->mAppearance;
       if (app) {
         nsITheme* theme = PresContext()->GetTheme();
         if (theme &&
             theme->ThemeSupportsWidget(PresContext(), primaryFrame, app)) {
           bool repaint = false;
           theme->WidgetStateChanged(primaryFrame, app, nullptr, &repaint,
                                     nullptr);
           if (repaint) {
--- a/layout/base/crashtests/crashtests.list
+++ b/layout/base/crashtests/crashtests.list
@@ -426,17 +426,17 @@ load 793848.html
 load 795646.html
 skip load 802902.html # bug 901752
 load 806056-1.html
 load 806056-2.html
 load 812665.html
 load 813372-1.html
 load 817219.html
 load 818454.html
-pref(layout.css.moz-appearance.enabled,true) load 822865.html
+load 822865.html
 load 824300.html
 load 824862.html
 load 826163.html
 load 833604-1.html
 load 835056.html
 load 836990-1.html
 load 840480.html
 load 842114.html
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -3768,17 +3768,17 @@ nsCSSFrameConstructor::FindInputData(Ele
   // appearance:none is the same as any other appearance value.
   // So this chunk doesn't apply there:
 #if !defined(MOZ_WIDGET_ANDROID)
   // radio and checkbox inputs with appearance:none should be constructed
   // by display type.  (Note that we're not checking that appearance is
   // not (respectively) NS_THEME_RADIO and NS_THEME_CHECKBOX.)
   if ((controlType == NS_FORM_INPUT_CHECKBOX ||
        controlType == NS_FORM_INPUT_RADIO) &&
-      aStyleContext->StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
+      aStyleContext->StyleDisplay()->mAppearance == NS_THEME_NONE) {
     return nullptr;
   }
 #endif
 
   return FindDataByInt(controlType, aElement, aStyleContext,
                        sInputData, ArrayLength(sInputData));
 }
 
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -5138,17 +5138,17 @@ AddIntrinsicSizeOffset(nsRenderingContex
     result = min;
   }
 
   const nsStyleDisplay* disp = aFrame->StyleDisplay();
   if (aFrame->IsThemed(disp)) {
     LayoutDeviceIntSize devSize;
     bool canOverride = true;
     nsPresContext* pc = aFrame->PresContext();
-    pc->GetTheme()->GetMinimumWidgetSize(pc, aFrame, disp->UsedAppearance(),
+    pc->GetTheme()->GetMinimumWidgetSize(pc, aFrame, disp->mAppearance,
                                          &devSize, &canOverride);
     nscoord themeSize =
       pc->DevPixelsToAppUnits(aAxis == eAxisVertical ? devSize.height
                                                      : devSize.width);
     // GetMinimumWidgetSize() returns a border-box width.
     themeSize += aOffsets.hMargin;
     if (shouldAddPercent) {
       themeSize = nsLayoutUtils::AddPercents(themeSize, aOffsets.hPctMargin);
@@ -7065,20 +7065,20 @@ nsLayoutUtils::HasNonZeroCornerOnSide(co
 nsLayoutUtils::GetFrameTransparency(nsIFrame* aBackgroundFrame,
                                     nsIFrame* aCSSRootFrame) {
   if (aCSSRootFrame->StyleEffects()->mOpacity < 1.0f)
     return eTransparencyTransparent;
 
   if (HasNonZeroCorner(aCSSRootFrame->StyleBorder()->mBorderRadius))
     return eTransparencyTransparent;
 
-  if (aCSSRootFrame->StyleDisplay()->UsedAppearance() == NS_THEME_WIN_GLASS)
+  if (aCSSRootFrame->StyleDisplay()->mAppearance == NS_THEME_WIN_GLASS)
     return eTransparencyGlass;
 
-  if (aCSSRootFrame->StyleDisplay()->UsedAppearance() == NS_THEME_WIN_BORDERLESS_GLASS)
+  if (aCSSRootFrame->StyleDisplay()->mAppearance == NS_THEME_WIN_BORDERLESS_GLASS)
     return eTransparencyBorderlessGlass;
 
   nsITheme::Transparency transparency;
   if (aCSSRootFrame->IsThemed(&transparency))
     return transparency == nsITheme::eTransparent
          ? eTransparencyTransparent
          : eTransparencyOpaque;
 
--- a/layout/base/tests/bug106855-1-ref.html
+++ b/layout/base/tests/bug106855-1-ref.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
 A
 
 
 </textarea><br>
 y
 <script>
   // Position the caret at the last line
   var sel = window.getSelection();
--- a/layout/base/tests/bug106855-1.html
+++ b/layout/base/tests/bug106855-1.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
 A
 
 
 </textarea><br>
 y
 <script>
   // Position the caret at the last line
   var sel = window.getSelection();
--- a/layout/base/tests/bug106855-2.html
+++ b/layout/base/tests/bug106855-2.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
 A
 
 
 </textarea><br>
 y
 <script>
   // Position the caret at the last line
   var sel = window.getSelection();
--- a/layout/base/tests/bug1237236-1-ref.html
+++ b/layout/base/tests/bug1237236-1-ref.html
@@ -15,16 +15,16 @@
         function runTests() {
           document.querySelector('textarea').focus();
           document.body.offsetHeight;
         }
     </script>
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
 def</textarea>
 
 <script>
 SimpleTest.waitForFocus(runTests);
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug1237236-1.html
+++ b/layout/base/tests/bug1237236-1.html
@@ -16,16 +16,16 @@
         function runTests() {
           document.querySelector('textarea').focus();
           document.body.offsetHeight;
         }
     </script>
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
 def</textarea>
 
 <script>
 SimpleTest.waitForFocus(runTests);
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug1258308-1-ref.html
+++ b/layout/base/tests/bug1258308-1-ref.html
@@ -16,17 +16,17 @@
         function runTests() {
           document.querySelector('textarea').focus();
           document.body.offsetHeight;
         }
     </script>
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
 def
 ghi</textarea>
 
 <script>
 SimpleTest.waitForFocus(runTests);
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug1258308-1.html
+++ b/layout/base/tests/bug1258308-1.html
@@ -24,17 +24,17 @@
         function runTests() {
           document.querySelector('textarea').focus();
           document.body.offsetHeight;
         }
     </script>
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
 def
 ghi</textarea>
 
 <script>
 SimpleTest.waitForFocus(runTests);
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug1259949-1-ref.html
+++ b/layout/base/tests/bug1259949-1-ref.html
@@ -15,16 +15,16 @@
         function runTests() {
           document.querySelector('textarea').focus();
           document.body.offsetHeight;
         }
     </script>
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abcdef
 </textarea>
 
 <script>
 SimpleTest.waitForFocus(runTests);
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug1259949-1.html
+++ b/layout/base/tests/bug1259949-1.html
@@ -19,16 +19,16 @@
         function runTests() {
           document.querySelector('textarea').focus();
           document.body.offsetHeight;
         }
     </script>
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abcdef
 </textarea>
 
 <script>
 SimpleTest.waitForFocus(runTests);
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug240933-1-ref.html
+++ b/layout/base/tests/bug240933-1-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML><html>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none">
+<textarea id="t" rows="4" style="-moz-appearance: none">
 
 </textarea>
 <script>
   var t = document.getElementById("t");
   t.selectionStart = t.selectionEnd = t.value.length;
   t.focus();
 </script>
 </body>
--- a/layout/base/tests/bug240933-1.html
+++ b/layout/base/tests/bug240933-1.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
 <script>
   var area = document.getElementById('t');
   area.focus();
 
   sendKey('RETURN'); // press Enter once
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug240933-2.html
+++ b/layout/base/tests/bug240933-2.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
 <script>
   var area = document.getElementById('t');
   area.focus();
 
   sendKey('RETURN'); // press Enter twice
   sendKey('RETURN');
   sendKey('BACK_SPACE'); // press Backspace once
 </script>
--- a/layout/base/tests/bug585922-ref.html
+++ b/layout/base/tests/bug585922-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <head>
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="doTest()">
-    <input type=text style="-moz-appearance: none; appearance: none">
+    <input type=text style="-moz-appearance: none">
     <script>
       function doTest() {
         var d = document.querySelector("input");
         d.value = "b";
         d.focus();
         var editor = SpecialPowers.wrap(d).QueryInterface(SpecialPowers.Ci.nsIDOMNSEditableElement).editor;
         var sel = editor.selection;
         var t = editor.rootElement.firstChild;
--- a/layout/base/tests/bug585922.html
+++ b/layout/base/tests/bug585922.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
   <head>
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="doTest()">
-    <input type=text style="-moz-appearance: none; appearance: none">
+    <input type=text style="-moz-appearance: none">
     <script>
       function doTest() {
         function enableCaret(aEnable) {
           var selCon = editor.selectionController;
           selCon.setCaretEnabled(aEnable);
         }
 
         var d = document.querySelector("input");
--- a/layout/base/tests/bug597519-1-ref.html
+++ b/layout/base/tests/bug597519-1-ref.html
@@ -1,12 +1,12 @@
 <!DOCTYPE HTML><html><head>
 </head>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none; appearance: none">ab
+<textarea spellcheck="false" style="-moz-appearance: none">ab
 </textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
   t.selectionStart = t.selectionEnd = t.value.length;
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug597519-1.html
+++ b/layout/base/tests/bug597519-1.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea maxlength="3" spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
+<textarea maxlength="3" spellcheck="false" style="-moz-appearance: none"></textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
 
   synthesizeKey("a", {});
   synthesizeKey("b", {});
   synthesizeKey("VK_RETURN", {});
   synthesizeKey("c", {});
--- a/layout/base/tests/bug612271-1.html
+++ b/layout/base/tests/bug612271-1.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
- <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
+ <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
     onkeydown="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
   t.selectionStart = t.selectionEnd = t.value.length;
   sendKey('RETURN');
   document.body.appendChild(document.createTextNode(t.selectionStart + " - " + t.selectionEnd));
 </script>
--- a/layout/base/tests/bug612271-2.html
+++ b/layout/base/tests/bug612271-2.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
     onkeypress="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
   t.selectionStart = t.selectionEnd = t.value.length;
   sendKey('RETURN');
   document.body.appendChild(document.createTextNode(t.selectionStart + " - " + t.selectionEnd));
 </script>
--- a/layout/base/tests/bug612271-3.html
+++ b/layout/base/tests/bug612271-3.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
     onkeyup="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
   t.selectionStart = t.selectionEnd = t.value.length;
   sendKey('RETURN');
   document.body.appendChild(document.createTextNode(t.selectionStart + " - " + t.selectionEnd));
 </script>
--- a/layout/base/tests/bug612271-ref.html
+++ b/layout/base/tests/bug612271-ref.html
@@ -4,14 +4,14 @@
     function loaded() {
       var t = document.querySelector("textarea");
       t.focus();
       t.selectionStart = t.selectionEnd = 4;
     }
   </script>
 </head>
 <body onload="loaded()">
-  <textarea style="height: 200px; display: block; -moz-appearance: none; appearance: none" spellcheck="false"
+  <textarea style="height: 200px; display: block; -moz-appearance: none" spellcheck="false"
     >foo
 </textarea>
   4 - 4
 </body>
 </html>
--- 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; appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
 </body>
 </html>
--- a/layout/base/tests/bug613807-1.html
+++ b/layout/base/tests/bug613807-1.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <html>
 <head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
 <script>
   if (typeof(addLoadEvent) == 'undefined') {
     _newCallStack = function(path) {
       var rval = function () {
         var callStack = arguments.callee.callStack;
         for (var i = 0; i < callStack.length; i++) {
           if (callStack[i].apply(this, arguments) === false) {
             break;
--- a/layout/base/tests/bug634406-1-ref.html
+++ b/layout/base/tests/bug634406-1-ref.html
@@ -1,10 +1,10 @@
 <!DOCTYPE HTML><html>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none; appearance: none">ab</textarea>
+<textarea spellcheck="false" style="-moz-appearance: none">ab</textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
   t.selectionStart = t.selectionEnd = t.value.length;
 </script>
 </body>
 </html>
--- a/layout/base/tests/bug634406-1.html
+++ b/layout/base/tests/bug634406-1.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML><html><head>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
+<textarea spellcheck="false" style="-moz-appearance: none"></textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();
 
   synthesizeKey("a", {});
   synthesizeKey("A", {accelKey: true});
   synthesizeKey("VK_RIGHT", {});
   synthesizeKey("b", {});
--- a/layout/base/tests/bug646382-1-ref.html
+++ b/layout/base/tests/bug646382-1-ref.html
@@ -1,15 +1,15 @@
 <html class="reftest-wait">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>
   <body onload="start()">
     <textarea onfocus="done()"
-              style="-moz-appearance: none; appearance: none;
+              style="-moz-appearance: none;
                      unicode-bidi: bidi-override;">س</textarea>
     <script>
       var textarea = document.querySelector("textarea");
       function start() {
         textarea.focus();
         textarea.selectionStart = 1; // place caret after the letter
         textarea.selectionEnd = 1;
       }
--- a/layout/base/tests/bug646382-1.html
+++ b/layout/base/tests/bug646382-1.html
@@ -1,15 +1,15 @@
 <html class="reftest-wait">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea onfocus="typeIntoMe()" style="-moz-appearance: none; appearance: none"></textarea>
+    <textarea onfocus="typeIntoMe()" style="-moz-appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
       }
       function typeIntoMe() {
         setTimeout(function() {
           synthesizeKey("س", {});
           synthesizeKey("VK_DOWN", {});
--- a/layout/base/tests/bug646382-2-ref.html
+++ b/layout/base/tests/bug646382-2-ref.html
@@ -1,12 +1,12 @@
 <html class="reftest-wait">
   <body onload="start()">
     <textarea dir="rtl" onfocus="done()"
-              style="-moz-appearance: none; appearance: none;
+              style="-moz-appearance: none;
               unicode-bidi: bidi-override;">s</textarea>
     <script>
       var textarea = document.querySelector("textarea");
       function start() {
         textarea.focus();
         textarea.selectionStart = 1; // place caret after the letter
         textarea.selectionEnd = 1;
       }
--- a/layout/base/tests/bug646382-2.html
+++ b/layout/base/tests/bug646382-2.html
@@ -1,14 +1,14 @@
 <html class="reftest-wait">
   <head>
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea dir="rtl" onfocus="typeIntoMe()" style="-moz-appearance: none; appearance: none"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" style="-moz-appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
       }
       function typeIntoMe() {
         setTimeout(function() {
           synthesizeKey("s", {});
           synthesizeKey("VK_DOWN", {});
--- a/layout/base/tests/bug664087-1-ref.html
+++ b/layout/base/tests/bug664087-1-ref.html
@@ -1,15 +1,15 @@
 <html class="reftest-wait">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <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; appearance: none">אב
+    <textarea rows="3" onfocus="done()" spellcheck="false" style="-moz-appearance: none">אב
 ג</textarea>
     <script>
       var textarea = document.querySelector("textarea");
       function start() {
         textarea.focus();
       }
       function done() {
         synthesizeKey("VK_LEFT", {});
--- a/layout/base/tests/bug664087-1.html
+++ b/layout/base/tests/bug664087-1.html
@@ -1,15 +1,15 @@
 <html class="reftest-wait">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <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; appearance: none"></textarea>
+    <textarea rows="3" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
       }
       function typeIntoMe() {
         setTimeout(function() {
           synthesizeKey("א", {});
           synthesizeKey("VK_RETURN", {});
--- a/layout/base/tests/bug664087-2-ref.html
+++ b/layout/base/tests/bug664087-2-ref.html
@@ -1,15 +1,15 @@
 <html class="reftest-wait">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <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; appearance: none">ab
+    <textarea dir="rtl" onfocus="done()" spellcheck="false" style="-moz-appearance: none">ab
 c</textarea>
     <script>
       var textarea = document.querySelector("textarea");
       function start() {
         textarea.focus();
       }
       function done() {
         synthesizeKey("VK_RIGHT", {});
--- a/layout/base/tests/bug664087-2.html
+++ b/layout/base/tests/bug664087-2.html
@@ -1,15 +1,15 @@
 <html class="reftest-wait">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <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; appearance: none"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();
       }
       function typeIntoMe() {
         setTimeout(function() {
           synthesizeKey("a", {});
           synthesizeKey("VK_RETURN", {});
--- a/layout/base/tests/chrome/chrome_content_integration_window.xul
+++ b/layout/base/tests/chrome/chrome_content_integration_window.xul
@@ -1,14 +1,14 @@
 <?xml version="1.0"?>
 <?xml-stylesheet type="text/css" href="chrome://global/skin"?>
 <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; appearance: none;">
+        style="background:black; -moz-appearance:none;">
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script>
 
   <stack style="height:300px; width:200px;">
     <!-- the bottom 100px is a strip of black that should be vixible through the content iframe -->
     <vbox style="background:pink; border-bottom:100px solid black"/>
     <!-- the middle 100px is a strip of black in the content iframe -->
     <!-- the bottom 100px of the iframe is transparent, the top 100px is yellow -->
     <iframe type="content" style="border:none;"
--- a/layout/base/tests/test_bug332655-1.html
+++ b/layout/base/tests/test_bug332655-1.html
@@ -10,17 +10,17 @@ https://bugzilla.mozilla.org/show_bug.cg
   <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body onload="test()">
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=332655">Mozilla Bug 332655</a>
 <p id="display"></p>
 <div id="content">
 <input type="text" id="testInput"
-       style="-moz-appearance: none; appearance: none"> <!-- bug 1204897 workaround -->
+       style="-moz-appearance: none"> <!-- bug 1204897 workaround -->
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /** Test for Bug 332655 **/
 
 SimpleTest.waitForExplicitFinish();
 
--- a/layout/base/tests/test_bug332655-2.html
+++ b/layout/base/tests/test_bug332655-2.html
@@ -10,17 +10,17 @@ https://bugzilla.mozilla.org/show_bug.cg
   <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body onload="test()">
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=332655">Mozilla Bug 332655</a>
 <p id="display"></p>
 <div id="content">
 <input type="text" id="testInput"
-       style="-moz-appearance: none; appearance: none"> <!-- bug 1234659 workaround -->
+       style="-moz-appearance: none"> <!-- bug 1234659 workaround -->
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /** Test for Bug 332655 **/
 
 SimpleTest.waitForExplicitFinish();
 
--- a/layout/base/tests/test_bug499538-1.html
+++ b/layout/base/tests/test_bug499538-1.html
@@ -9,17 +9,17 @@ https://bugzilla.mozilla.org/show_bug.cg
   <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
   <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body onload="test()">
 <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; appearance: none">
+<input type="text" id="testInput" style="-moz-appearance:none">
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /** Test for Bug 499538 **/
 
 SimpleTest.waitForExplicitFinish();
 
--- a/layout/base/tests/test_bug644768.html
+++ b/layout/base/tests/test_bug644768.html
@@ -17,17 +17,17 @@
   <body onload="test()">
     <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=644768">Mozilla Bug 644768</a>
     <p id="display"></p>
     <div id="content">
       <!-- test text is
            == زادروزها ==
            * [[۱۳۰۷]]
          -->
-      <textarea id="testInput" dir="rtl" cols="80" rows="25" style="-moz-appearance:none; appearance: none">
+      <textarea id="testInput" dir="rtl" cols="80" rows="25" style="-moz-appearance:none">
 
 == &#x0632;&#x0627;&#x062F;&#x0631;&#x0648;&#x0632;&#x0647;&#x0627; ==
 * [[&#x06F1;&#x06F3;&#x06F0;&#x06F7;]]</textarea>
     </div>
     <pre id="test">
       <script class="testbody" type="text/javascript">
 
       /** Test for Bug 644768 **/
--- a/layout/forms/crashtests/1102791.html
+++ b/layout/forms/crashtests/1102791.html
@@ -5,17 +5,17 @@
     <style type="text/css">
 
 html,body {
     color:black; background-color:white; font-size:16px; padding:0; margin:0;
 }
 
 button {
   position: absolute;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: transparent;
   padding: 0;
   border-style:none;
 }
 button::before {
   position: absolute;
   content: "::before";
   width: 10px;
--- a/layout/forms/crashtests/crashtests.list
+++ b/layout/forms/crashtests/crashtests.list
@@ -21,17 +21,17 @@ load 370703-1.html
 load 370940-1.html
 load 370967.html
 load 373586-1.xhtml
 load 375299.html
 load 378369.html
 load 378413-1.xhtml
 load 380116-1.xhtml
 load 382212-1.xhtml
-pref(layout.css.moz-appearance.enabled,true) load 382610-1.html
+load 382610-1.html
 load 383887-1.html
 load 386554-1.html
 load 388374-1.xhtml
 load 388374-2.html
 load 393656-1.xhtml
 load 393656-2.xhtml
 load 399262.html
 load 402852-1.html
@@ -57,13 +57,13 @@ load 682684.xhtml
 load 865602.html
 load 893332-1.html
 load 944198.html
 skip-if(stylo) load 949891.xhtml # bug 1323693, bug 1341973
 load 959311.html
 load 960277-2.html
 load 997709-1.html
 load 1102791.html
-pref(layout.css.moz-appearance.enabled,true) skip-if(stylo) load 1140216.html # bug 1323693, bug 1341973
+skip-if(stylo) load 1140216.html # bug 1323693, bug 1341973
 load 1182414.html
 load 1212688.html
 load 1228670.xhtml
 load 1279354.html
--- a/layout/forms/nsButtonFrameRenderer.cpp
+++ b/layout/forms/nsButtonFrameRenderer.cpp
@@ -323,17 +323,17 @@ nsDisplayButtonForeground::ComputeInvali
 }
 
 void nsDisplayButtonForeground::Paint(nsDisplayListBuilder* aBuilder,
                                       nsRenderingContext* aCtx)
 {
   nsPresContext *presContext = mFrame->PresContext();
   const nsStyleDisplay *disp = mFrame->StyleDisplay();
   if (!mFrame->IsThemed(disp) ||
-      !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
+      !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
     nsRect r = nsRect(ToReferenceFrame(), mFrame->GetSize());
 
     // Draw the -moz-focus-inner border
     DrawResult result =
       mBFR->PaintInnerFocusBorder(aBuilder, presContext, *aCtx, mVisibleRect, r);
 
     nsDisplayItemGenericImageGeometry::UpdateDrawResult(this, result);
   }
@@ -345,17 +345,17 @@ nsDisplayButtonForeground::GetLayerState
                                          const ContainerLayerParameters& aParameters)
 {
   Maybe<nsCSSBorderRenderer> br;
 
   if (ShouldUseAdvancedLayer(aManager, gfxPrefs::LayersAllowButtonForegroundLayers)) {
     nsPresContext *presContext = mFrame->PresContext();
     const nsStyleDisplay *disp = mFrame->StyleDisplay();
     if (!mFrame->IsThemed(disp) ||
-        !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
+        !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
       nsRect r = nsRect(ToReferenceFrame(), mFrame->GetSize());
       br = mBFR->CreateInnerFocusBorderRenderer(aBuilder, presContext, nullptr, mVisibleRect, r);
     }
   }
 
   if (!br || !br->CanCreateWebRenderCommands()) {
     return LAYER_NONE;
   }
--- a/layout/forms/nsComboboxControlFrame.cpp
+++ b/layout/forms/nsComboboxControlFrame.cpp
@@ -777,17 +777,17 @@ nsComboboxControlFrame::GetIntrinsicISiz
 
     displayISize = std::max(dropdownContentISize, displayISize);
   }
 
   // add room for the dropmarker button if there is one
   const nsStyleDisplay* disp = StyleDisplay();
   if ((!IsThemed(disp) ||
        presContext->GetTheme()->ThemeNeedsComboboxDropmarker()) &&
-      disp->UsedAppearance() != NS_THEME_NONE) {
+      disp->mAppearance != NS_THEME_NONE) {
     displayISize += scrollbarWidth;
   }
 
   return displayISize;
 
 }
 
 nscoord
@@ -850,17 +850,17 @@ nsComboboxControlFrame::Reflow(nsPresCon
   }
 
   // Get the width of the vertical scrollbar.  That will be the inline
   // size of the dropdown button.
   WritingMode wm = aReflowInput.GetWritingMode();
   nscoord buttonISize;
   const nsStyleDisplay *disp = StyleDisplay();
   if ((IsThemed(disp) && !aPresContext->GetTheme()->ThemeNeedsComboboxDropmarker()) ||
-      StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
+      StyleDisplay()->mAppearance == NS_THEME_NONE) {
     buttonISize = 0;
   }
   else {
     nsIScrollableFrame* scrollable = do_QueryFrame(mListControlFrame);
     NS_ASSERTION(scrollable, "List must be a scrollable frame");
     buttonISize = scrollable->GetNondisappearingScrollbarWidth(
       PresContext(), aReflowInput.mRenderingContext, wm);
     if (buttonISize > aReflowInput.ComputedISize()) {
@@ -1573,17 +1573,17 @@ nsComboboxControlFrame::BuildDisplayList
   // draw a focus indicator only when focus rings should be drawn
   nsIDocument* doc = mContent->GetComposedDoc();
   if (doc) {
     nsPIDOMWindowOuter* window = doc->GetWindow();
     if (window && window->ShouldShowFocusRing()) {
       nsPresContext *presContext = PresContext();
       const nsStyleDisplay *disp = StyleDisplay();
       if ((!IsThemed(disp) ||
-           !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) &&
+           !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) &&
           mDisplayFrame && IsVisibleForPainting(aBuilder)) {
         aLists.Content()->AppendNewToTop(
           new (aBuilder) nsDisplayComboboxFocus(aBuilder, this));
       }
     }
   }
 
   DisplaySelectionOverlay(aBuilder, aLists.Content());
--- a/layout/forms/nsFormControlFrame.cpp
+++ b/layout/forms/nsFormControlFrame.cpp
@@ -39,30 +39,30 @@ NS_QUERYFRAME_HEAD(nsFormControlFrame)
 NS_QUERYFRAME_TAIL_INHERITING(nsAtomicContainerFrame)
 
 /* virtual */ nscoord
 nsFormControlFrame::GetMinISize(nsRenderingContext *aRenderingContext)
 {
   nscoord result;
   DISPLAY_MIN_WIDTH(this, result);
 #if !defined(MOZ_WIDGET_ANDROID)
-  result = StyleDisplay()->UsedAppearance() == NS_THEME_NONE ? 0 : DefaultSize();
+  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
 #else
   result = DefaultSize();
 #endif
   return result;
 }
 
 /* virtual */ nscoord
 nsFormControlFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
 {
   nscoord result;
   DISPLAY_PREF_WIDTH(this, result);
 #if !defined(MOZ_WIDGET_ANDROID)
-  result = StyleDisplay()->UsedAppearance() == NS_THEME_NONE ? 0 : DefaultSize();
+  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
 #else
   result = DefaultSize();
 #endif
   return result;
 }
 
 /* virtual */
 LogicalSize
@@ -72,17 +72,17 @@ nsFormControlFrame::ComputeAutoSize(nsRe
                                     nscoord             aAvailableISize,
                                     const LogicalSize&  aMargin,
                                     const LogicalSize&  aBorder,
                                     const LogicalSize&  aPadding,
                                     ComputeSizeFlags    aFlags)
 {
   LogicalSize size(aWM, 0, 0);
 #if !defined(MOZ_WIDGET_ANDROID)
-  if (StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
+  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
     return size;
   }
 #endif
   // Note: this call always set the BSize to NS_UNCONSTRAINEDSIZE.
   size = nsAtomicContainerFrame::ComputeAutoSize(aRC, aWM, aCBSize,
                                                  aAvailableISize, aMargin,
                                                  aBorder, aPadding, aFlags);
   size.BSize(aWM) = DefaultSize();
@@ -96,17 +96,17 @@ nsFormControlFrame::GetLogicalBaseline(W
                "frame must not be dirty");
 
 // NOTE: on Android we use appearance:none by default for checkbox/radio,
 // so the different layout for appearance:none we have on other platforms
 // doesn't work there. *shrug*
 #if !defined(MOZ_WIDGET_ANDROID)
   // For appearance:none we use a standard CSS baseline, i.e. synthesized from
   // our margin-box.
-  if (StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
+  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
     return nsAtomicContainerFrame::GetLogicalBaseline(aWritingMode);
   }
 #endif
 
   // This is for compatibility with Chrome, Safari and Edge (Dec 2016).
   // Treat radio buttons and checkboxes as having an intrinsic baseline
   // at the block-end of the control (use the block-end content edge rather
   // than the margin edge).
--- a/layout/forms/nsMeterFrame.cpp
+++ b/layout/forms/nsMeterFrame.cpp
@@ -261,21 +261,21 @@ bool
 nsMeterFrame::ShouldUseNativeStyle() const
 {
   nsIFrame* barFrame = mBarDiv->GetPrimaryFrame();
 
   // Use the native style if these conditions are satisfied:
   // - both frames use the native appearance;
   // - neither frame has author specified rules setting the border or the
   //   background.
-  return StyleDisplay()->UsedAppearance() == NS_THEME_METERBAR &&
+  return StyleDisplay()->mAppearance == NS_THEME_METERBAR &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND) &&
          barFrame &&
-         barFrame->StyleDisplay()->UsedAppearance() == NS_THEME_METERCHUNK &&
+         barFrame->StyleDisplay()->mAppearance == NS_THEME_METERCHUNK &&
          !PresContext()->HasAuthorSpecifiedRules(barFrame,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND);
 }
 
 Element*
 nsMeterFrame::GetPseudoElement(CSSPseudoElementType aType)
 {
   if (aType == CSSPseudoElementType::mozMeterBar) {
--- a/layout/forms/nsNumberControlFrame.cpp
+++ b/layout/forms/nsNumberControlFrame.cpp
@@ -411,17 +411,17 @@ nsNumberControlFrame::CreateAnonymousCon
   }
 
   if (mContent->AsElement()->State().HasState(NS_EVENT_STATE_FOCUS)) {
     // We don't want to focus the frame but the text field.
     RefPtr<FocusTextField> focusJob = new FocusTextField(mContent, mTextField);
     nsContentUtils::AddScriptRunner(focusJob);
   }
 
-  if (StyleDisplay()->UsedAppearance() == NS_THEME_TEXTFIELD) {
+  if (StyleDisplay()->mAppearance == NS_THEME_TEXTFIELD) {
     // The author has elected to hide the spinner by setting this
     // -moz-appearance. We will reframe if it changes.
     return rv;
   }
 
   // Create the ::-moz-number-spin-box pseudo-element:
   rv = MakeAnonymousElement(getter_AddRefs(mSpinBox),
                             outerWrapperCI.mChildren,
@@ -610,21 +610,21 @@ nsNumberControlFrame::ShouldUseNativeSty
 {
   MOZ_ASSERT(mSpinUp && mSpinDown,
              "We should not be called when we have no spinner");
 
   nsIFrame* spinUpFrame = mSpinUp->GetPrimaryFrame();
   nsIFrame* spinDownFrame = mSpinDown->GetPrimaryFrame();
 
   return spinUpFrame &&
-    spinUpFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SPINNER_UPBUTTON &&
+    spinUpFrame->StyleDisplay()->mAppearance == NS_THEME_SPINNER_UPBUTTON &&
     !PresContext()->HasAuthorSpecifiedRules(spinUpFrame,
                                             STYLES_DISABLING_NATIVE_THEMING) &&
     spinDownFrame &&
-    spinDownFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SPINNER_DOWNBUTTON &&
+    spinDownFrame->StyleDisplay()->mAppearance == NS_THEME_SPINNER_DOWNBUTTON &&
     !PresContext()->HasAuthorSpecifiedRules(spinDownFrame,
                                             STYLES_DISABLING_NATIVE_THEMING);
 }
 
 void
 nsNumberControlFrame::AppendAnonymousContentTo(nsTArray<nsIContent*>& aElements,
                                                uint32_t aFilter)
 {
--- a/layout/forms/nsProgressFrame.cpp
+++ b/layout/forms/nsProgressFrame.cpp
@@ -274,21 +274,21 @@ bool
 nsProgressFrame::ShouldUseNativeStyle() const
 {
   nsIFrame* barFrame = PrincipalChildList().FirstChild();
 
   // Use the native style if these conditions are satisfied:
   // - both frames use the native appearance;
   // - neither frame has author specified rules setting the border or the
   //   background.
-  return StyleDisplay()->UsedAppearance() == NS_THEME_PROGRESSBAR &&
+  return StyleDisplay()->mAppearance == NS_THEME_PROGRESSBAR &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND) &&
          barFrame &&
-         barFrame->StyleDisplay()->UsedAppearance() == NS_THEME_PROGRESSCHUNK &&
+         barFrame->StyleDisplay()->mAppearance == NS_THEME_PROGRESSCHUNK &&
          !PresContext()->HasAuthorSpecifiedRules(barFrame,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND);
 }
 
 Element*
 nsProgressFrame::GetPseudoElement(CSSPseudoElementType aType)
 {
   if (aType == CSSPseudoElementType::mozProgressBar) {
--- a/layout/forms/nsRangeFrame.cpp
+++ b/layout/forms/nsRangeFrame.cpp
@@ -295,17 +295,17 @@ nsRangeFrame::BuildDisplayList(nsDisplay
   if (!mOuterFocusStyle ||
       !mOuterFocusStyle->StyleBorder()->HasBorder()) {
     // no ::-moz-focus-outer specified border (how style specifies a focus ring
     // for range)
     return;
   }
 
   if (IsThemed(disp) &&
-      PresContext()->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
+      PresContext()->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
     return; // the native theme displays its own visual indication of focus
   }
 
   aLists.Content()->AppendNewToTop(
     new (aBuilder) nsDisplayRangeFocusRing(aBuilder, this));
 }
 
 void
@@ -873,17 +873,17 @@ nsRangeFrame::GetValue() const
 
 bool
 nsRangeFrame::ShouldUseNativeStyle() const
 {
   nsIFrame* trackFrame = mTrackDiv->GetPrimaryFrame();
   nsIFrame* progressFrame = mProgressDiv->GetPrimaryFrame();
   nsIFrame* thumbFrame = mThumbDiv->GetPrimaryFrame();
 
-  return (StyleDisplay()->UsedAppearance() == NS_THEME_RANGE) &&
+  return (StyleDisplay()->mAppearance == NS_THEME_RANGE) &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  (NS_AUTHOR_SPECIFIED_BORDER |
                                                   NS_AUTHOR_SPECIFIED_BACKGROUND)) &&
          trackFrame &&
          !PresContext()->HasAuthorSpecifiedRules(trackFrame,
                                                  STYLES_DISABLING_NATIVE_THEMING) &&
          progressFrame &&
          !PresContext()->HasAuthorSpecifiedRules(progressFrame,
--- a/layout/forms/test/bug665540_window.xul
+++ b/layout/forms/test/bug665540_window.xul
@@ -5,14 +5,14 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         sizemode="fullscreen">
 
   <script>
     opener.SimpleTest.waitForFocus(opener.childFocused, window);
   </script>
 
   <body xmlns="http://www.w3.org/1999/xhtml">
-    <select id="select" style="-moz-appearance:none; appearance: none">
+    <select id="select" style="-moz-appearance:none">
       <option id="optiona">a</option>
       <option>b</option>
     </select>
   </body>
 </window>
--- a/layout/forms/test/test_bug476308.html
+++ b/layout/forms/test/test_bug476308.html
@@ -6,17 +6,17 @@ https://bugzilla.mozilla.org/show_bug.cg
 <head>
   <title>Test for Bug 345267</title>
   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body>
 
-<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;"
+<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;"
         id="button1">1</button>
 
 <br />
 <div style="width: 100px; height: 100px; background-color: green; border: 3px dotted blue; box-shadow: -30px -20px 0px black; position: absolute; top: 500px; left: 70px;"
      id="div1">2</div>
 
 <script type="text/javascript">
   var elem = document.elementFromPoint(130, 310);
--- a/layout/forms/test/test_textarea_resize.html
+++ b/layout/forms/test/test_textarea_resize.html
@@ -5,17 +5,17 @@
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <body>
 <div id="content" style="display: none">
 </div>
 
-<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>
+<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>
 
 <pre id="test">
 <script type="application/javascript">
 
 /** Test for textbox resizing **/
 SimpleTest.waitForExplicitFinish();
 addLoadEvent(() => SimpleTest.executeSoon(doTheTest));
 
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -2531,17 +2531,17 @@ SizeComputationInput::InitOffsets(Writin
 
 
   const nsStyleDisplay* disp = mFrame->StyleDisplayWithOptionalParam(aDisplay);
   bool isThemed = mFrame->IsThemed(disp);
   bool needPaddingProp;
   nsIntMargin widget;
   if (isThemed &&
       presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
-                                                mFrame, disp->UsedAppearance(),
+                                                mFrame, disp->mAppearance,
                                                 &widget)) {
     ComputedPhysicalPadding().top = presContext->DevPixelsToAppUnits(widget.top);
     ComputedPhysicalPadding().right = presContext->DevPixelsToAppUnits(widget.right);
     ComputedPhysicalPadding().bottom = presContext->DevPixelsToAppUnits(widget.bottom);
     ComputedPhysicalPadding().left = presContext->DevPixelsToAppUnits(widget.left);
     needPaddingProp = false;
   }
   else if (nsSVGUtils::IsInSVGTextSubtree(mFrame)) {
@@ -2582,17 +2582,17 @@ SizeComputationInput::InitOffsets(Writin
   }
   if (!aFlags.mShrinkWrap) {
     ApplyBaselinePadding(eLogicalAxisInline, nsIFrame::IBaselinePadProperty());
   }
 
   if (isThemed) {
     nsIntMargin widget;
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             mFrame, disp->UsedAppearance(),
+                                             mFrame, disp->mAppearance,
                                              &widget);
     ComputedPhysicalBorderPadding().top =
       presContext->DevPixelsToAppUnits(widget.top);
     ComputedPhysicalBorderPadding().right =
       presContext->DevPixelsToAppUnits(widget.right);
     ComputedPhysicalBorderPadding().bottom =
       presContext->DevPixelsToAppUnits(widget.bottom);
     ComputedPhysicalBorderPadding().left =
--- a/layout/generic/crashtests/crashtests.list
+++ b/layout/generic/crashtests/crashtests.list
@@ -105,26 +105,26 @@ load 375831.html
 load 376419.html
 load 377522.html
 load 379217-1.xhtml
 load 379217-2.xhtml
 load 379917-1.xhtml
 load 380012-1.html
 load 381152-1.html
 load 381786-1.html
-pref(layout.css.moz-appearance.enabled,true) load 382129-1.xhtml
+load 382129-1.xhtml
 load 382131-1.html
 load 382199-1.html
 load 382208-1.xhtml
 load 382262-1.html
 load 382396-1.xhtml
 load 382745-1.xhtml
 load 383089-1.html
 load 385265-1.xhtml
-pref(layout.css.moz-appearance.enabled,true) load 385295-1.xhtml
+load 385295-1.xhtml
 load 385344-1.html
 load 385344-2.html
 load 385414-1.html
 load 385414-2.html
 load 385426-1.html
 load 385526.html
 load 385681.html
 load 385885-1.xul
@@ -180,17 +180,17 @@ load 398332-2.html
 asserts(0-2) load 398332-3.html # bug 436123 and bug 457397
 load 399407-1.xhtml
 load 399412-1.html
 load 399843-1.html
 load 400078-1.html
 load 400190.html
 load 400223-1.html # bug 1323652
 load 400232-1.html
-pref(layout.css.moz-appearance.enabled,true) load 400244-1.html
+load 400244-1.html
 load 400768-1.xhtml
 load 400768-2.xhtml
 load 401042-1.xhtml
 load 402380-1.html
 load 402380-2.html
 load 402872-1.html
 load 402872-2.html
 load 403004.html
@@ -485,19 +485,19 @@ test-pref(font.size.inflation.emPerLine,
 load 747688.html
 load 750066.html
 load 757413.xhtml
 load 757413-2.html
 load 762764-1.html
 load 762902.html
 load 765409.html
 asserts(0-200) load 765621.html # bug 703550
-pref(layout.css.moz-appearance.enabled,true) asserts(0-200) load 767765.html # bug 407550, bug 871758, and various nscoord_MAX related asserts
+asserts(0-200) load 767765.html # bug 407550, bug 871758, and various nscoord_MAX related asserts
 load 769120.html
-pref(layout.css.moz-appearance.enabled,true) asserts(0-2) load 769303-1.html # bug 1123979
+asserts(0-2) load 769303-1.html # bug 1123979
 load 769303-2.html
 load 777838.html
 load 783228.html
 load 784600.html
 load 785555.html
 load 786740-1.html
 load 790260-1.html
 asserts(1) asserts-if(stylo,0) test-pref(font.size.inflation.emPerLine,15) load 791601.xhtml # Bug 871327
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -1221,17 +1221,17 @@ nsFlexContainerFrame::GenerateFlexItemFo
   // (more severe) our widget might have only a single valid size.
   bool isFixedSizeWidget = false;
   const nsStyleDisplay* disp = aChildFrame->StyleDisplay();
   if (aChildFrame->IsThemed(disp)) {
     LayoutDeviceIntSize widgetMinSize;
     bool canOverride = true;
     aPresContext->GetTheme()->
       GetMinimumWidgetSize(aPresContext, aChildFrame,
-                           disp->UsedAppearance(),
+                           disp->mAppearance,
                            &widgetMinSize, &canOverride);
 
     nscoord widgetMainMinSize =
       aPresContext->DevPixelsToAppUnits(
         aAxisTracker.GetMainComponent(widgetMinSize));
     nscoord widgetCrossMinSize =
       aPresContext->DevPixelsToAppUnits(
         aAxisTracker.GetCrossComponent(widgetMinSize));
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -1150,17 +1150,17 @@ nsIFrame::GetUsedBorder() const
   // Theme methods don't use const-ness.
   nsIFrame *mutable_this = const_cast<nsIFrame*>(this);
 
   const nsStyleDisplay *disp = StyleDisplay();
   if (mutable_this->IsThemed(disp)) {
     nsIntMargin result;
     nsPresContext *presContext = PresContext();
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             mutable_this, disp->UsedAppearance(),
+                                             mutable_this, disp->mAppearance,
                                              &result);
     border.left = presContext->DevPixelsToAppUnits(result.left);
     border.top = presContext->DevPixelsToAppUnits(result.top);
     border.right = presContext->DevPixelsToAppUnits(result.right);
     border.bottom = presContext->DevPixelsToAppUnits(result.bottom);
     return border;
   }
 
@@ -1186,17 +1186,17 @@ nsIFrame::GetUsedPadding() const
   nsIFrame *mutable_this = const_cast<nsIFrame*>(this);
 
   const nsStyleDisplay *disp = StyleDisplay();
   if (mutable_this->IsThemed(disp)) {
     nsPresContext *presContext = PresContext();
     nsIntMargin widget;
     if (presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
                                                   mutable_this,
-                                                  disp->UsedAppearance(),
+                                                  disp->mAppearance,
                                                   &widget)) {
       padding.top = presContext->DevPixelsToAppUnits(widget.top);
       padding.right = presContext->DevPixelsToAppUnits(widget.right);
       padding.bottom = presContext->DevPixelsToAppUnits(widget.bottom);
       padding.left = presContext->DevPixelsToAppUnits(widget.left);
       return padding;
     }
   }
@@ -2072,17 +2072,17 @@ bool
 nsFrame::DisplayBackgroundUnconditional(nsDisplayListBuilder* aBuilder,
                                         const nsDisplayListSet& aLists,
                                         bool aForceBackground)
 {
   // Here we don't try to detect background propagation. Frames that might
   // receive a propagated background should just set aForceBackground to
   // true.
   if (aBuilder->IsForEventDelivery() || aForceBackground ||
-      !StyleBackground()->IsTransparent(this) || StyleDisplay()->UsedAppearance()) {
+      !StyleBackground()->IsTransparent(this) || StyleDisplay()->mAppearance) {
     return nsDisplayBackgroundImage::AppendBackgroundItemsToTop(
         aBuilder, this, GetRectRelativeToSelf(), aLists.BorderBackground());
   }
   return false;
 }
 
 void
 nsFrame::DisplayBorderBackgroundOutline(nsDisplayListBuilder*   aBuilder,
@@ -3064,17 +3064,17 @@ nsIFrame::BuildDisplayListForChild(nsDis
   }
 
   // XXX need to have inline-block and inline-table set pseudoStackingContext
   
   const nsStyleDisplay* ourDisp = StyleDisplay();
   // REVIEW: Taken from nsBoxFrame::Paint
   // Don't paint our children if the theme object is a leaf.
   if (IsThemed(ourDisp) &&
-      !PresContext()->GetTheme()->WidgetIsContainer(ourDisp->UsedAppearance()))
+      !PresContext()->GetTheme()->WidgetIsContainer(ourDisp->mAppearance))
     return;
 
   // Since we're now sure that we're adding this frame to the display list
   // (which means we're painting it, modulo occlusion), mark it as visible
   // within the displayport.
   if (aBuilder->IsPaintingToWindow() && child->TrackingVisibility()) {
     child->PresContext()->PresShell()->EnsureFrameInApproximatelyVisibleList(child);
     awayFromCommonPath = true;
@@ -4978,25 +4978,25 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, b
   }
 
   const nsStyleDisplay* disp = aFrame->StyleDisplay();
   if (aFrame->IsThemed(disp)) {
     nsPresContext* presContext = aFrame->PresContext();
 
     nsIntMargin border;
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             aFrame, disp->UsedAppearance(),
+                                             aFrame, disp->mAppearance,
                                              &border);
     result.hBorder =
       presContext->DevPixelsToAppUnits(verticalAxis ? border.TopBottom()
                                                     : border.LeftRight());
 
     nsIntMargin padding;
     if (presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
-                                                  aFrame, disp->UsedAppearance(),
+                                                  aFrame, disp->mAppearance,
                                                   &padding)) {
       result.hPadding =
         presContext->DevPixelsToAppUnits(verticalAxis ? padding.TopBottom()
                                                       : padding.LeftRight());
       result.hPctPadding = 0;
     }
   }
   return result;
@@ -5257,17 +5257,17 @@ nsFrame::ComputeSize(nsRenderingContext*
   }
 
   const nsStyleDisplay *disp = StyleDisplay();
   if (IsThemed(disp)) {
     LayoutDeviceIntSize widget;
     bool canOverride = true;
     nsPresContext *presContext = PresContext();
     presContext->GetTheme()->
-      GetMinimumWidgetSize(presContext, this, disp->UsedAppearance(),
+      GetMinimumWidgetSize(presContext, this, disp->mAppearance,
                            &widget, &canOverride);
 
     // Convert themed widget's physical dimensions to logical coords
     LogicalSize size(aWM,
                      nsSize(presContext->DevPixelsToAppUnits(widget.width),
                             presContext->DevPixelsToAppUnits(widget.height)));
 
     // GMWS() returns border-box; we need content-box
@@ -5716,17 +5716,17 @@ nsIFrame::ComputeTightBounds(DrawTarget*
   return GetVisualOverflowRect();
 }
 
 nsRect
 nsFrame::ComputeSimpleTightBounds(DrawTarget* aDrawTarget) const
 {
   if (StyleOutline()->ShouldPaintOutline() || StyleBorder()->HasBorder() ||
       !StyleBackground()->IsTransparent(this) ||
-      StyleDisplay()->UsedAppearance()) {
+      StyleDisplay()->mAppearance) {
     // Not necessarily tight, due to clipping, negative
     // outline-offset, and lots of other issues, but that's OK
     return GetVisualOverflowRect();
   }
 
   nsRect r(0, 0, 0, 0);
   ChildListIterator lists(this);
   for (; !lists.IsDone(); lists.Next()) {
@@ -9051,17 +9051,17 @@ nsIFrame::FinishAndStoreOverflow(nsOverf
 
   // Note that NS_STYLE_OVERFLOW_CLIP doesn't clip the frame background,
   // so we add theme background overflow here so it's not clipped.
   if (!::IsXULBoxWrapped(this) && IsThemed(disp)) {
     nsRect r(bounds);
     nsPresContext *presContext = PresContext();
     if (presContext->GetTheme()->
           GetWidgetOverflow(presContext->DeviceContext(), this,
-                            disp->UsedAppearance(), &r)) {
+                            disp->mAppearance, &r)) {
       nsRect& vo = aOverflowAreas.VisualOverflow();
       vo.UnionRectEdges(vo, r);
     }
   }
 
   ComputeAndIncludeOutlineArea(this, aOverflowAreas, aNewSize);
 
   // Nothing in here should affect scrollable overflow.
--- a/layout/generic/nsIFrame.h
+++ b/layout/generic/nsIFrame.h
@@ -1609,26 +1609,26 @@ public:
 
 
   bool IsThemed(nsITheme::Transparency* aTransparencyState = nullptr) const {
     return IsThemed(StyleDisplay(), aTransparencyState);
   }
   bool IsThemed(const nsStyleDisplay* aDisp,
                   nsITheme::Transparency* aTransparencyState = nullptr) const {
     nsIFrame* mutable_this = const_cast<nsIFrame*>(this);
-    if (!aDisp->UsedAppearance())
+    if (!aDisp->mAppearance)
       return false;
     nsPresContext* pc = PresContext();
     nsITheme *theme = pc->GetTheme();
     if(!theme ||
-       !theme->ThemeSupportsWidget(pc, mutable_this, aDisp->UsedAppearance()))
+       !theme->ThemeSupportsWidget(pc, mutable_this, aDisp->mAppearance))
       return false;
     if (aTransparencyState) {
       *aTransparencyState =
-        theme->GetWidgetTransparency(mutable_this, aDisp->UsedAppearance());
+        theme->GetWidgetTransparency(mutable_this, aDisp->mAppearance);
     }
     return true;
   }
 
   /**
    * Builds a display list for the content represented by this frame,
    * treating this frame as the root of a stacking context.
    * @param aDirtyRect content outside this rectangle can be ignored; the
--- a/layout/generic/test/test_selection_preventDefault.html
+++ b/layout/generic/test/test_selection_preventDefault.html
@@ -15,17 +15,17 @@
     top: 0;
   }
   input {
     font-size: 16px;
     height: 16px;
     width: 80px;
     margin: 0;
     padding: 0;
-    -moz-appearance: none; appearance: none;
+    -moz-appearance: none;
   }
 </style>
 
 </head>
 <body>
 <input id="input" type="text" value="iiiiiiiii iiiiiiiii iiiiiiiii">
 <div id="fixedDiv1" class="testingDiv">
 dddddd dddddd dddddd
--- a/layout/painting/nsCSSRendering.cpp
+++ b/layout/painting/nsCSSRendering.cpp
@@ -807,21 +807,21 @@ nsCSSRendering::PaintBorderWithStyleBord
   DrawTarget& aDrawTarget = *aRenderingContext.GetDrawTarget();
 
   PrintAsStringNewline("++ PaintBorder");
 
   // Check to see if we have an appearance defined.  If so, we let the theme
   // 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->UsedAppearance()) {
+  if (displayData->mAppearance) {
     nsITheme *theme = aPresContext->GetTheme();
     if (theme &&
         theme->ThemeSupportsWidget(aPresContext, aForFrame,
-                                   displayData->UsedAppearance())) {
+                                   displayData->mAppearance)) {
       return DrawResult::SUCCESS; // Let the theme handle it.
     }
   }
 
   if (!aStyleBorder.mBorderImageSource.IsEmpty()) {
     DrawResult result = DrawResult::SUCCESS;
 
     uint32_t irFlags = 0;
@@ -895,21 +895,21 @@ nsCSSRendering::CreateBorderRendererWith
                                                     nsIFrame* aForFrame,
                                                     const nsRect& aDirtyRect,
                                                     const nsRect& aBorderArea,
                                                     const nsStyleBorder& aStyleBorder,
                                                     nsStyleContext* aStyleContext,
                                                     Sides aSkipSides)
 {
   const nsStyleDisplay* displayData = aStyleContext->StyleDisplay();
-  if (displayData->UsedAppearance()) {
+  if (displayData->mAppearance) {
     nsITheme *theme = aPresContext->GetTheme();
     if (theme &&
         theme->ThemeSupportsWidget(aPresContext, aForFrame,
-                                   displayData->UsedAppearance())) {
+                                   displayData->mAppearance)) {
       return Nothing();
     }
   }
 
   if (aStyleBorder.mBorderImageSource.GetType() != eStyleImageType_Null) {
     return Nothing();
   }
 
@@ -1579,17 +1579,17 @@ nsCSSRendering::PaintBoxShadowOuter(nsPr
       shadowContext->SetMatrix(
         shadowContext->CurrentMatrix().Translate(devPixelOffset));
 
       nsRect nativeRect = aDirtyRect;
       nativeRect.MoveBy(-nsPoint(shadowItem->mXOffset, shadowItem->mYOffset));
       nativeRect.IntersectRect(frameRect, nativeRect);
       nsRenderingContext wrapperCtx(shadowContext);
       aPresContext->GetTheme()->DrawWidgetBackground(&wrapperCtx, aForFrame,
-          styleDisplay->UsedAppearance(), aFrameArea, nativeRect);
+          styleDisplay->mAppearance, aFrameArea, nativeRect);
 
       blurringArea.DoPaint();
       renderContext->Restore();
     } else {
       renderContext->Save();
 
       {
         Rect innerClipRect = NSRectToRect(frameRect, twipsPerPixel);
@@ -1923,17 +1923,17 @@ nsCSSRendering::PaintStyleImageLayer(con
 
   nsStyleContext *sc;
   if (!FindBackground(aParams.frame, &sc)) {
     // We don't want to bail out if moz-appearance is set on a root
     // node. If it has a parent content node, bail because it's not
     // 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()->UsedAppearance()) {
+    if (!aParams.frame->StyleDisplay()->mAppearance) {
       return DrawResult::SUCCESS;
     }
 
     nsIContent* content = aParams.frame->GetContent();
     if (!content || content->GetParent()) {
       return DrawResult::SUCCESS;
     }
 
@@ -1955,21 +1955,21 @@ nsCSSRendering::CanBuildWebRenderDisplay
   }
 
   MOZ_ASSERT(aFrame &&
              aLayer >= 0 &&
              (uint32_t)aLayer < aBackgroundStyle->mImage.mLayers.Length());
 
   // We cannot draw native themed backgrounds
   const nsStyleDisplay* displayData = aFrame->StyleDisplay();
-  if (displayData->UsedAppearance()) {
+  if (displayData->mAppearance) {
     nsITheme *theme = aPresCtx.GetTheme();
     if (theme && theme->ThemeSupportsWidget(&aPresCtx,
                                             aFrame,
-                                            displayData->UsedAppearance())) {
+                                            displayData->mAppearance)) {
       return false;
     }
   }
 
   const nsStyleImage* styleImage = &aBackgroundStyle->mImage.mLayers[aLayer].mImage;
 
   // We only support image with image container.
   if (!styleImage->IsEmpty() && styleImage->GetType() == eStyleImageType_Image) {
@@ -2000,17 +2000,17 @@ nsCSSRendering::BuildWebRenderDisplayIte
 
   nsStyleContext *sc;
   if (!FindBackground(aParams.frame, &sc)) {
     // We don't want to bail out if moz-appearance is set on a root
     // node. If it has a parent content node, bail because it's not
     // 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()->UsedAppearance()) {
+    if (!aParams.frame->StyleDisplay()->mAppearance) {
       return DrawResult::SUCCESS;
     }
 
     nsIContent* content = aParams.frame->GetContent();
     if (!content || content->GetParent()) {
       return DrawResult::SUCCESS;
     }
 
@@ -2508,28 +2508,28 @@ nsCSSRendering::PaintStyleImageLayerWith
   // it was left at its default value.
   MOZ_ASSERT_IF(aParams.layer == -1,
                 aParams.compositionOp == CompositionOp::OP_OVER);
 
   // Check to see if we have an appearance defined.  If so, we let the theme
   // renderer draw the background and bail out.
   // XXXzw this ignores aParams.bgClipRect.
   const nsStyleDisplay* displayData = aParams.frame->StyleDisplay();
-  if (displayData->UsedAppearance()) {
+  if (displayData->mAppearance) {
     nsITheme *theme = aParams.presCtx.GetTheme();
     if (theme && theme->ThemeSupportsWidget(&aParams.presCtx,
                                             aParams.frame,
-                                            displayData->UsedAppearance())) {
+                                            displayData->mAppearance)) {
       nsRect drawing(aParams.borderArea);
       theme->GetWidgetOverflow(aParams.presCtx.DeviceContext(),
-                               aParams.frame, displayData->UsedAppearance(),
+                               aParams.frame, displayData->mAppearance,
                                &drawing);
       drawing.IntersectRect(drawing, aParams.dirtyRect);
       theme->DrawWidgetBackground(&aRenderingCtx, aParams.frame,
-                                  displayData->UsedAppearance(), aParams.borderArea,
+                                  displayData->mAppearance, aParams.borderArea,
                                   drawing);
       return DrawResult::SUCCESS;
     }
   }
 
   // For canvas frames (in the CSS sense) we draw the background color using
   // a solid color item that gets added in nsLayoutUtils::PaintFrame,
   // or nsSubDocumentFrame::BuildDisplayList (bug 488242). (The solid
--- a/layout/painting/nsDisplayList.cpp
+++ b/layout/painting/nsDisplayList.cpp
@@ -3009,17 +3009,17 @@ static nsStyleContext* GetBackgroundStyl
 {
   nsStyleContext *sc;
   if (!nsCSSRendering::FindBackground(aFrame, &sc)) {
     // We don't want to bail out if moz-appearance is set on a root
     // node. If it has a parent content node, bail because it's not
     // 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()->UsedAppearance()) {
+    if (!aFrame->StyleDisplay()->mAppearance) {
       return nullptr;
     }
 
     nsIContent* content = aFrame->GetContent();
     if (!content || content->GetParent()) {
       return nullptr;
     }
 
@@ -3169,17 +3169,17 @@ nsDisplayBackgroundImage::AppendBackgrou
       bgItemList.AppendNewToTop(
           new (aBuilder) nsDisplayBackgroundColor(aBuilder, aFrame, bgRect, bg,
                                                   drawBackgroundColor ? color : NS_RGBA(0, 0, 0, 0)));
     }
   }
 
   if (isThemed) {
     nsITheme* theme = presContext->GetTheme();
-    if (theme->NeedToClearBackgroundBehindWidget(aFrame, aFrame->StyleDisplay()->UsedAppearance()) &&
+    if (theme->NeedToClearBackgroundBehindWidget(aFrame, aFrame->StyleDisplay()->mAppearance) &&
         aBuilder->IsInChromeDocumentOrPopup() && !aBuilder->IsInTransform()) {
       bgItemList.AppendNewToTop(
         new (aBuilder) nsDisplayClearBackground(aBuilder, aFrame));
     }
     nsDisplayThemedBackground* bgItem =
       new (aBuilder) nsDisplayThemedBackground(aBuilder, aFrame, bgRect);
     bgItemList.AppendNewToTop(bgItem);
     aList->AppendToTop(&bgItemList);
@@ -3796,29 +3796,29 @@ nsDisplayThemedBackground::nsDisplayThem
                                                      nsIFrame* aFrame,
                                                      const nsRect& aBackgroundRect)
   : nsDisplayItem(aBuilder, aFrame)
   , mBackgroundRect(aBackgroundRect)
 {
   MOZ_COUNT_CTOR(nsDisplayThemedBackground);
 
   const nsStyleDisplay* disp = mFrame->StyleDisplay();
-  mAppearance = disp->UsedAppearance();
+  mAppearance = disp->mAppearance;
   mFrame->IsThemed(disp, &mThemeTransparency);
 
   // Perform necessary RegisterThemeGeometry
   nsITheme* theme = mFrame->PresContext()->GetTheme();
   nsITheme::ThemeGeometryType type =
-    theme->ThemeGeometryTypeForWidget(mFrame, disp->UsedAppearance());
+    theme->ThemeGeometryTypeForWidget(mFrame, disp->mAppearance);
   if (type != nsITheme::eThemeGeometryTypeUnknown) {
     RegisterThemeGeometry(aBuilder, aFrame, type);
   }
 
-  if (disp->UsedAppearance() == NS_THEME_WIN_BORDERLESS_GLASS ||
-      disp->UsedAppearance() == NS_THEME_WIN_GLASS) {
+  if (disp->mAppearance == NS_THEME_WIN_BORDERLESS_GLASS ||
+      disp->mAppearance == NS_THEME_WIN_GLASS) {
     aBuilder->SetGlassDisplayItem(this);
   }
 
   mBounds = GetBoundsInternal();
 }
 
 nsDisplayThemedBackground::~nsDisplayThemedBackground()
 {
@@ -3942,17 +3942,17 @@ nsDisplayThemedBackground::GetBounds(nsD
 
 nsRect
 nsDisplayThemedBackground::GetBoundsInternal() {
   nsPresContext* presContext = mFrame->PresContext();
 
   nsRect r = mBackgroundRect - ToReferenceFrame();
   presContext->GetTheme()->
       GetWidgetOverflow(presContext->DeviceContext(), mFrame,
-                        mFrame->StyleDisplay()->UsedAppearance(), &r);
+                        mFrame->StyleDisplay()->mAppearance, &r);
   return r + ToReferenceFrame();
 }
 
 void
 nsDisplayImageContainer::ConfigureLayer(ImageLayer* aLayer,
                                         const ContainerLayerParameters& aParameters)
 {
   aLayer->SetSamplingFilter(nsLayoutUtils::GetSamplingFilterForFrame(mFrame));
--- a/layout/reftests/abs-pos/button-1.html
+++ b/layout/reftests/abs-pos/button-1.html
@@ -6,17 +6,17 @@ button {
 position:relative;
 left:0px;
 top:0px;
 width:
 200px;
 height:100px;
 border:none;
 background:#00ff00;
--moz-appearance: none; appearance: none;
+-moz-appearance: none;
 border-radius: 0 !important;
 }
 div {
 position:absolute;
 left:0px;
 top:0px;
 width:50px;
 height:50px;
--- a/layout/reftests/abs-pos/button-2.html
+++ b/layout/reftests/abs-pos/button-2.html
@@ -6,17 +6,17 @@ button {
 position:relative;
 padding:0;
 background:green;
 width: 200px;
 height: 100px;
 border:none;
 text-align: left;
 font: 12px serif;
--moz-appearance: none; appearance: none;
+-moz-appearance: none;
 border-radius: 0 !important;
 }
 button span {
 display:block;
 position:absolute;
 right:0;
 top:0;
 width:10px;
--- a/layout/reftests/box-shadow/boxshadow-button-ref.html
+++ b/layout/reftests/box-shadow/boxshadow-button-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <style>
 #a, #b {
   width: 100px;
   height: 100px;
   background-color: grey;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   box-shadow: 4px 4px 3px black;
   border: none !important;
   position: absolute;
 }
 
 #a {
   top: 20px;
   left: 20px;
--- a/layout/reftests/box-shadow/boxshadow-button.html
+++ b/layout/reftests/box-shadow/boxshadow-button.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <style>
 #a, #b {
   width: 100px;
   height: 100px;
   background-color: grey;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   box-shadow: 4px 4px 3px black;
   border: none !important;
   position: absolute;
 }
 
 #a {
   top: 20px;
   left: 20px;
--- a/layout/reftests/bugs/180085-1-ref.html
+++ b/layout/reftests/bugs/180085-1-ref.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; appearance: none; }
+ .none { -moz-appearance: none; }
  input, button { width: 1.5em; padding: 0; font-size: 14px; }
 </style>
 </head>
 <body>
   <input class="none" type="button" value="M"><br>
   <input class="none" type="button" value="M"><br>
 
   <input class="none" type="button" value="Long Text"><br>
--- a/layout/reftests/bugs/180085-1.html
+++ b/layout/reftests/bugs/180085-1.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; appearance: none; }
+ .none { -moz-appearance: none; }
  input, button { width: 1.5em; padding-top: 0; padding-bottom: 0; font-size: 14px; }
 </style>
 </head>
 <body>
   <input class="none" type="button" value="M"><br>
   <input class="none" type="button" style="padding: 0 0.2em;" value="M"><br>
 
   <input class="none" type="button" value="Long Text"><br>
--- a/layout/reftests/bugs/180085-2-ref.html
+++ b/layout/reftests/bugs/180085-2-ref.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; appearance: none; }
+ .none { -moz-appearance: none; }
  input, button { width: 1.5em; padding: 0; font-size: 12px }
 </style>
 </head>
 <body>
   <input class="none" type="button" value="M"><br>
   <input class="none" type="button" value="M"><br>
 
   <input class="none" type="button" value="Long Text"><br>
--- a/layout/reftests/bugs/180085-2.html
+++ b/layout/reftests/bugs/180085-2.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
- .none { -moz-appearance: none; appearance: none; }
+ .none { -moz-appearance: none; }
  input, button { width: 1.5em; padding-top: 0; padding-bottom: 0; font-size: 12px }
 </style>
 </head>
 <body>
   <input class="none" type="button" value="M"><br>
   <input class="none" type="button" style="padding: 0 0.2em;" value="M"><br>
 
   <input class="none" type="button" value="Long Text"><br>
--- a/layout/reftests/bugs/363858-2-ref.html
+++ b/layout/reftests/bugs/363858-2-ref.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
-* { -moz-appearance: none; appearance: none }
+* { -moz-appearance: none }
 </style>
 </head>
 <body>
 <div>
 <select>
   <option>This is option one</option>
   <option>This is option two</option>
   <option>This is option three which is long</option>
--- a/layout/reftests/bugs/363858-2.html
+++ b/layout/reftests/bugs/363858-2.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div { width: 0 }
 option { white-space: normal }
-* { -moz-appearance: none; appearance: none }
+* { -moz-appearance: none }
 </style>
 </head>
 <body>
 <div>
 <select>
   <option>This is option one</option>
   <option>This is option two</option>
   <option>This is option three which is long</option>
--- a/layout/reftests/bugs/363858-4-ref.html
+++ b/layout/reftests/bugs/363858-4-ref.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
-* { -moz-appearance: none; appearance: none }
+* { -moz-appearance: none }
 </style>
 </head>
 <body>
 <div>
 <select>
   <optgroup>
   <option>This is option one</option>
   <option>This is option two</option>
--- a/layout/reftests/bugs/363858-4.html
+++ b/layout/reftests/bugs/363858-4.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div { width: 0 }
 option { white-space: normal }
 optgroup { white-space: normal }
-* { -moz-appearance: none; appearance: none }
+* { -moz-appearance: none }
 </style>
 </head>
 <body>
 <div>
 <select>
   <optgroup>
   <option>This is option one</option>
   <option>This is option two</option>
--- a/layout/reftests/bugs/363858-6-ref.html
+++ b/layout/reftests/bugs/363858-6-ref.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 select { width: 100%; box-sizing: border-box }
-* { -moz-appearance: none; appearance: none; }
+* { -moz-appearance: none; }
 </style>
 </head>
 <body>
 <div>
 <select>
   <option>This is option one</option>
 </select>
 </div>
--- a/layout/reftests/bugs/363858-6a.html
+++ b/layout/reftests/bugs/363858-6a.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 option { padding-left: 100%; }
-* { -moz-appearance: none; appearance: none; }
+* { -moz-appearance: none; }
 </style>
 </head>
 <body>
 <select>
   <option>This is option one</option>
 </select>
 </div>
 <div>
--- a/layout/reftests/bugs/363858-6b.html
+++ b/layout/reftests/bugs/363858-6b.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 select { width: -moz-available; }
-* { -moz-appearance: none; appearance: none; }
+* { -moz-appearance: none; }
 </style>
 </head>
 <body>
 <select>
   <option>This is option one</option>
 </select>
 </div>
 <div>
--- 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; 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">
+<input type="radio" style="-moz-appearance:none">
+<input type="radio" style="-moz-appearance:none">
--- 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; 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">
+<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">
--- 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; 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">
+<input type="checkbox" style="-moz-appearance:none">
+<input type="checkbox" style="-moz-appearance:none">
--- 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; 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">
+<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">
--- a/layout/reftests/bugs/423599-1-ref.html
+++ b/layout/reftests/bugs/423599-1-ref.html
@@ -1,11 +1,11 @@
 <html>
   <head><style>
     select          { visibility: hidden; }
-    select.unthemed { -moz-appearance: none; appearance: none; margin: 2px 0 2px 0}
+    select.unthemed { -moz-appearance: none; margin: 2px 0 2px 0}
   </style></head>
   <body>
     <div style="background: lightblue">
       <select class="unthemed"></select>
     </div>
   </body>
 </html>
--- a/layout/reftests/bugs/423599-1.html
+++ b/layout/reftests/bugs/423599-1.html
@@ -1,12 +1,12 @@
 <html>
   <head><style>
     select          { visibility: hidden; }
-    select.unthemed { -moz-appearance: none; appearance: none; margin: 2px 0 2px 0}
+    select.unthemed { -moz-appearance: none; margin: 2px 0 2px 0}
   </style></head>
   <body>
     <div style="background: lightblue">
       <select class="unthemed"></select><!--
         No space here to make this more robust
         in the face of different default fonts 
       --><select></select>
     </div>
--- a/layout/reftests/bugs/468473-1-ref.xul
+++ b/layout/reftests/bugs/468473-1-ref.xul
@@ -1,10 +1,10 @@
 <?xml version="1.0"?>
 <window title="Missing repaint when using border-image on a XUL button"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <hbox>
-<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;"/>
+<button label="Button" style="min-width: 0; -moz-appearance: none; border: medium solid; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px;"/>
 <box flex="1" style="background: green" />
 </hbox>
 
 </window>
--- a/layout/reftests/bugs/468473-1.xul
+++ b/layout/reftests/bugs/468473-1.xul
@@ -1,10 +1,10 @@
 <?xml version="1.0"?>
 <window title="Missing repaint when using border-image on a XUL button"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <hbox>
-<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;"/>
+<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;"/>
 <box flex="1" style="background: green" />
 </hbox>
 
 </window>
--- a/layout/reftests/bugs/474336-1-ref.xul
+++ b/layout/reftests/bugs/474336-1-ref.xul
@@ -1,21 +1,21 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 
 <window xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         >
 
 <html:style>
     #prog {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         background-color: blue;
     }
     #prog .progress-bar {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         border-radius: 3px 3px;
         background-color: red;
     }
 </html:style>
 
 <progressmeter id="prog" value="50" max="200"/>
 
 </window>
--- a/layout/reftests/bugs/474336-1.xul
+++ b/layout/reftests/bugs/474336-1.xul
@@ -1,21 +1,21 @@
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 
 <window xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         class="reftest-wait">
 
 <html:style>
     #prog {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         background-color: blue;
     }
     #prog .progress-bar {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         border-radius: 3px 3px;
         background-color: red;
     }
 </html:style>
 
 <progressmeter id="prog" value="50"/>
 
 <script>
--- 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; appearance: none; width: 0; height: 0; font: inherit; padding: 0">
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; padding: 0">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </div>
--- 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; appearance: none; width: 0; height: 0; font: inherit; color: black">
+  <button style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; color: black">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </button>
--- 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; 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; width: 20px; font: inherit; padding: 0; white-space: pre; overflow: hidden">Some text</div>
   </div>
--- 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; 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; width: 20px; font: inherit; color: black" value="Some text">
--- a/layout/reftests/bugs/491323-1-ref.xul
+++ b/layout/reftests/bugs/491323-1-ref.xul
@@ -1,15 +1,15 @@
 <?xml version="1.0"?>
 <window xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <hbox flex="1">
   <html:style>
     /* Make sure our splitter's background doesn't depend on its hover styles */
     splitter {
       background-color: yellow;
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
     }
   </html:style>
   <splitter collapse="before" resizeafter="farthest" width="200" id="s">
   </splitter>
 </hbox>
 </window>
--- a/layout/reftests/bugs/491323-1.xul
+++ b/layout/reftests/bugs/491323-1.xul
@@ -2,17 +2,17 @@
 <window xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         onload="loaded()">
 <hbox flex="1">
   <html:style>
     /* Make sure our splitter's background doesn't depend on its hover styles */
     splitter {
       background-color: yellow;
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
     }
   </html:style>
   <script>
   function loaded() {
     document.documentElement.getBoundingClientRect();
     document.getElementById("s").setAttribute("state", "collapsed");
   }
   </script>
--- a/layout/reftests/bugs/542116-1-ref.html
+++ b/layout/reftests/bugs/542116-1-ref.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
     <style>
       input {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 20px;
         height: 100px;
         width: 100px;
         border: 1px solid red;
       }
     </style>
--- a/layout/reftests/bugs/542116-1.html
+++ b/layout/reftests/bugs/542116-1.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
     <style>
       input {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 40px;
         height: 100px;
         width: 100px;
         border: 1px solid red;
       }
     </style>
--- a/layout/reftests/bugs/542116-2-ref.html
+++ b/layout/reftests/bugs/542116-2-ref.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
     <style>
       input {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 20px;
         height: 100px;
         width: 100px;
         border: 1px solid red;
       }
     </style>
--- a/layout/reftests/bugs/542116-2.html
+++ b/layout/reftests/bugs/542116-2.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
     <style>
       input {
-        -moz-appearance: none; appearance: none;
+        -moz-appearance: none;
         margin: 0;
         padding: 10px;
         font-size: 40px;
         height: 100px;
         width: 100px;
         border: 1px solid red;
       }
     </style>
--- a/layout/reftests/bugs/664127-1.css
+++ b/layout/reftests/bugs/664127-1.css
@@ -1,11 +1,11 @@
 /* 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; appearance: none; border: none; background-color: transparent;
+  height: 100px; -moz-appearance: none; border: none; background-color: transparent;
 }
 treecol, treecolpicker {
   visibility: hidden;
 }
 treechildren::-moz-tree-image {
   list-style-image: url('solidblue.png');
 }
--- a/layout/reftests/bugs/668319-1.xul
+++ b/layout/reftests/bugs/668319-1.xul
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?xml-stylesheet type="text/css" href="data:text/css,
-tree { height: 100px; -moz-appearance: none; appearance: none; border: none; background-color: transparent; }
+tree { height: 100px; -moz-appearance: none; border: none; background-color: transparent; }
 treecol, treecolpicker { visibility: hidden; }
 treechildren::-moz-tree-cell-text { opacity: 0; }
 "?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <tree>
     <treecols>
       <treecol flex="1"/>
     </treecols>
--- a/layout/reftests/bugs/966992-1-ref.html
+++ b/layout/reftests/bugs/966992-1-ref.html
@@ -8,22 +8,22 @@ font-face {
   src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
 }
 
         html,body {
             color:black; background-color:white; font:16px DejaVuSansMono!important; padding:0; margin:7px;
         }
 
     input {
-      width: 100px; padding:50px; -moz-appearance:none; appearance: none; overflow-clip-box:padding-box;
+      width: 100px; padding:50px; -moz-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; appearance: none; overflow-clip-box:padding-box;
+      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:padding-box;
       border: 3px solid black;
     }
     #textarea { word-break: break-all; font:14px DejaVuSansMono!important; }
 
 
 p {
  position:absolute;
  margin:0;
--- a/layout/reftests/bugs/966992-1.html
+++ b/layout/reftests/bugs/966992-1.html
@@ -8,22 +8,22 @@ font-face {
   src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
 }
 
         html,body {
             color:black; background-color:white; font:16px DejaVuSansMono!important; padding:0; margin:7px;
         }
 
     input {
-      width: 100px; padding:50px; -moz-appearance:none; appearance: none; overflow-clip-box:content-box;
+      width: 100px; padding:50px; -moz-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; appearance: none; overflow-clip-box:content-box;
+      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:content-box;
       border: 3px solid black;font:14px DejaVuSansMono!important;
     }
 
 p {
  position:absolute;
  margin:0;
  width:70%;
  height: 1px;
--- a/layout/reftests/css-enabled/select/style.css
+++ b/layout/reftests/css-enabled/select/style.css
@@ -1,10 +1,10 @@
 select {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 
 .ref {
   background-color: green;
 }
 
 .enabled {
   background-color: red;
--- a/layout/reftests/css-invalid/input/style.css
+++ b/layout/reftests/css-invalid/input/style.css
@@ -1,11 +1,11 @@
 /* Override default style */
 input {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: none;
 }
 input:invalid {
   box-shadow: none;
 }
 
 input.notinvalid {
   box-shadow: 0 0 1.5px 1px green;
--- a/layout/reftests/css-placeholder/input/style-shown.css
+++ b/layout/reftests/css-placeholder/input/style-shown.css
@@ -1,21 +1,21 @@
 input::placeholder {
   color: green;
   opacity: 1.0;
 }
 
 input:placeholder-shown {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   color: -moz-FieldText;
   background-color: red;
 }
 
 input:placeholder-shown.shown,
 input.shown-ref {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   color: green;
   background-color: #c7c7c7;
   font-style: italic;
   border: 2px solid green;
   height: 200px;
   width: 200px;
 }
--- a/layout/reftests/css-placeholder/textarea/style-shown.css
+++ b/layout/reftests/css-placeholder/textarea/style-shown.css
@@ -1,22 +1,22 @@
 textarea::placeholder {
   color: green;
   opacity: 1.0;
 }
 
 textarea:placeholder-shown {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   color: -moz-FieldText;
   background-color: red;
 }
 
 textarea:placeholder-shown.shown,
 textarea.shown-ref {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   color: green;
   background-color: #c7c7c7;
   font-style: italic;
   border: 2px solid green;
   height: 200px;
   width: 200px;
 }
 
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -8,17 +8,17 @@
 # Where possible & practical, we should try to address these so we can migrate
 # tests over to the w3c-css directory, so that they can become part of the
 # W3C's test suite.
 
 # SUBDIRECTORY: Reftests for paginated flex containers
 include pagination/reftest.list
 
 # Tests for cross-axis alignment (align-self / align-items properties)
-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
+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
 fuzzy-if(cocoaWidget,1,2) random-if(winWidget||gtkWidget) skip-if(Android) == flexbox-align-self-baseline-horiz-3.xhtml  flexbox-align-self-baseline-horiz-3-ref.xhtml # XXXdholbert investigate the random-if. The skip-if(Android) is because checkbox/radio appearance:none doesn't work as expected.
 == flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
 
 # Tests for box-sizing on flex containers and flex items.
 == flexbox-box-sizing-on-container-horiz-1.html flexbox-box-sizing-on-container-horiz-1-ref.html
--- a/layout/reftests/forms/button/percent-height-child.html
+++ b/layout/reftests/forms/button/percent-height-child.html
@@ -14,17 +14,17 @@ button {
     border: 0;
     padding: 0;
 
     font: 10px sans-serif;
     vertical-align: top;
 
     color: black;
     background: gray;
-    -moz-appearance: none; appearance: none;
+    -moz-appearance: none;
 }
 button::-moz-focus-inner {
     padding: 0;
     border: 0;
 }
 
 div.p80 {
     height: 80%;
--- a/layout/reftests/forms/button/percent-width-child.html
+++ b/layout/reftests/forms/button/percent-width-child.html
@@ -13,17 +13,17 @@ button {
     border: 0;
     padding: 0;
 
     font: 10px sans-serif;
     vertical-align: top;
 
     color: black;
     background: gray;
-    -moz-appearance: none; appearance: none;
+    -moz-appearance: none;
 }
 button::-moz-focus-inner {
     padding: 0;
     border: 0;
 }
 
 div.p80 {
     width: 80%;
--- a/layout/reftests/forms/button/reftest.list
+++ b/layout/reftests/forms/button/reftest.list
@@ -4,17 +4,17 @@
 == max-height.html max-height-ref.html
 == min-height.html min-height-ref.html
 
 # Android is off ever-so-slightly on the points where the text
 # runs into the border on this text, so a little fuzz is needed.
 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; appearance: none; background: gray", so they
+# on Android, despite their "-moz-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
 
 == vertical-centering.html vertical-centering-ref.html
 
 != line-height-button-0.5.html line-height-button-1.0.html
 != line-height-button-1.5.html line-height-button-1.0.html
--- a/layout/reftests/forms/button/vertical-centering.html
+++ b/layout/reftests/forms/button/vertical-centering.html
@@ -9,17 +9,17 @@ input, div {
     padding: 0;
 
     font: 2em sans-serif;
 
     background: transparent;
     color: black;
 }
 input {
-    -moz-appearance: none; appearance: none;
+    -moz-appearance: none;
 }
 input::-moz-focus-inner {
     padding: 0;
     border: 0;
 }
 div {
     line-height: 100px;
     text-align: center;
--- a/layout/reftests/forms/button/width-auto-size-em-ltr.html
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML>
 <style>
 
 button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 1em;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
 span {
--- a/layout/reftests/forms/button/width-auto-size-em-rtl.html
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html dir=rtl>
 <style>
 
 button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 1em;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
 span {
--- a/layout/reftests/forms/button/width-auto-size-ltr.html
+++ b/layout/reftests/forms/button/width-auto-size-ltr.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML>
 <style>
 
 button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
 span {
--- a/layout/reftests/forms/button/width-auto-size-rtl.html
+++ b/layout/reftests/forms/button/width-auto-size-rtl.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html dir=rtl>
 <style>
 
 button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
 span {
--- a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html dir=rtl>
 <style>
 
 button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
   width: 62px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
--- a/layout/reftests/forms/button/width-exact-fit-ltr.html
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML>
 <style>
 
 button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
   width: 62px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
--- a/layout/reftests/forms/button/width-exact-fit-rtl.html
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html dir=rtl>
 <style>
 
 button {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background: yellow;
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
   width: 62px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
--- a/layout/reftests/forms/input/checkbox/checkbox-baseline.html
+++ b/layout/reftests/forms/input/checkbox/checkbox-baseline.html
@@ -11,17 +11,17 @@
   <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-terms">
   <link rel="match" href="checkbox-baseline-ref.html">
     <style>
 body { font: 16px/1 monospace; }
 
 div { border: 1px dashed blue; }
 
 .none {
-     -moz-appearance: none;
+     -moz-appearance: none; appearance: none;
   -webkit-appearance: none;
       -ms-appearance: none;
           appearance: none;
   width:0px;
   height:0px;
 }
 .intrinsic { width:unset; height:unset; }
 .border { border: 25px solid black; }
--- 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; appearance: none" checked>
+<input type="checkbox" style="-moz-appearance:none" checked>
--- a/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
@@ -1,1 +1,1 @@
-<input type="checkbox" checked style="-moz-appearance: none; appearance: none;">
+<input type="checkbox" checked style="-moz-appearance: none;">
--- a/layout/reftests/forms/input/checkbox/indeterminate-checked.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked.html
@@ -1,1 +1,1 @@
-<input type="checkbox" id="s" checked style="-moz-appearance: none; appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
+<input type="checkbox" id="s" checked style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
--- a/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
@@ -1,1 +1,1 @@
-<input type="checkbox" style="-moz-appearance: none; appearance: none;">
+<input type="checkbox" style="-moz-appearance: none;">
--- a/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
@@ -1,1 +1,1 @@
-<input type="checkbox" id="s" style="-moz-appearance: none; appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
+<input type="checkbox" id="s" style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
--- 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; appearance: none">
+<input type="checkbox" style="-moz-appearance:none">
--- a/layout/reftests/forms/input/color/reftest.list
+++ b/layout/reftests/forms/input/color/reftest.list
@@ -5,10 +5,10 @@ fails-if(Android) == input-color-1.html 
 default-preferences pref(dom.forms.color,true)
 
 # Despite the "default-preferences" line above, Android is still
 # excluded from some style in forms.css, which makes the following tests fail.
 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
-pref(layout.css.moz-appearance.enabled,true) fails-if(Android) == custom-style-1.html custom-style-1-ref.html
+fails-if(Android) == custom-style-1.html custom-style-1-ref.html
 fails-if(Android) == custom-style-2.html custom-style-2-ref.html
--- 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; appearance: none;">
+    <input type="checkbox" style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -6,11 +6,11 @@
     function setToCheckbox()
     {
       document.getElementById("i").type = "checkbox";
       document.documentElement.className = "";
     }
     document.addEventListener("MozReftestInvalidate", setToCheckbox);
   </script>
   <body>
-    <input type="time" id="i" style="-moz-appearance:none; appearance: none;">
+    <input type="time" id="i" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="text" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="time" style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -5,11 +5,11 @@
     function setToTime()
     {
       document.getElementById("i").type = "time";
       document.documentElement.className = "";
     }
     document.addEventListener("MozReftestInvalidate", setToTime);
   </script>
   <body>
-    <input type="checkbox" id="i" style="-moz-appearance:none; appearance: none;">
+    <input type="checkbox" id="i" style="-moz-appearance:none;">
   </body>
 </html>
--- a/layout/reftests/forms/input/file/style.css
+++ b/layout/reftests/forms/input/file/style.css
@@ -18,17 +18,17 @@ vbox, hbox {
   -moz-user-select: text;
   text-shadow: none;
 
   /* Copy of the type=file part of forms.css below this */
   display: inline; /* this one isn't really a copy... */
   white-space: nowrap;
   overflow:hidden;
 
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   -moz-binding: none;
   cursor: default;
   border: none;
   background-color: transparent;
   padding: 0;
 }
 
 .file > label {
--- a/layout/reftests/forms/input/number/focus-handling-ref.html
+++ b/layout/reftests/forms/input/number/focus-handling-ref.html
@@ -12,15 +12,15 @@ function end() {
   setTimeout(function() {
     document.documentElement.className = "";
   }, 0);
 }
 
     </script>
   </head>
   <body>
-    <input style="-moz-appearance:none; appearance: none;"><br>
+    <input style="-moz-appearance:none;"><br>
     <input autofocus onfocus="end();"
-           style="-moz-appearance:none; appearance: none;">
+           style="-moz-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>
 </html>
--- a/layout/reftests/forms/input/number/focus-handling.html
+++ b/layout/reftests/forms/input/number/focus-handling.html
@@ -17,16 +17,16 @@ function end() {
     document.documentElement.className = "";
   }, 0);
 }
 
     </script>
   </head>
   <body>
     <input type='number' autofocus onfocus="begin();"
-           style="-moz-appearance:none; appearance: none;"><br>
+           style="-moz-appearance:none;"><br>
     <input type='number' onfocus="end();"
-           style="-moz-appearance:none; appearance: none;">
+           style="-moz-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>
 </html>
 
--- 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; appearance: none;">
+    <input type="checkbox" style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -6,11 +6,11 @@
     function setToCheckbox()
     {
       document.getElementById('i').type='checkbox';
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setToCheckbox);
   </script>
   <body>
-    <input type='number' id='i' style="-moz-appearance:none; appearance: none;">
+    <input type='number' id='i' style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="number" value="1" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="text" value="1" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="checkbox" style="-moz-appearance:none;">
   </body>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" style="-moz-appearance:none; appearance: none; width:auto;">
+    <input type="text" style="-moz-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>
 </html>
--- a/layout/reftests/forms/input/number/number-auto-width-1.html
+++ b/layout/reftests/forms/input/number/number-auto-width-1.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" style="-moz-appearance:none; appearance: none; width:auto;">
+    <input type="number" style="-moz-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>
 </html>
--- a/layout/reftests/forms/input/number/number-disabled-ref.html
+++ b/layout/reftests/forms/input/number/number-disabled-ref.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <body>
     <input type="text" disabled
-           style="-moz-appearance: none; appearance: none"><!-- Workaround for bug 1223198 -->
+           style="-moz-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>
 </html>
--- a/layout/reftests/forms/input/number/number-disabled.html
+++ b/layout/reftests/forms/input/number/number-disabled.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <body>
     <input type="number" disabled
-           style="-moz-appearance: none; appearance: none"><!-- Workaround for bug 1223198 -->
+           style="-moz-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>
 </html>
--- 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; appearance: none;">
+    <input type="number" style="-moz-appearance:none;">
   </body>
 </html>
--- a/layout/reftests/forms/input/number/number-pseudo-elements.html
+++ b/layout/reftests/forms/input/number/number-pseudo-elements.html
@@ -10,11 +10,11 @@ input[type=number]::-moz-number-spin-box
 input[type=number]::-moz-number-spin-up,
 input[type=number]::-moz-number-spin-down {
   background-color: red;
 }
 
     </style>
   </head>
   <body>
-    <input type="number" style="-moz-appearance:none; appearance: none;">
+    <input type="number" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none; width:200px;">
+    <input type="text" style="-moz-appearance:none; width:200px;">
   </body>
 </html>
--- 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; appearance: none; width:200px;">
+    <input type="number" style="-moz-appearance:none; width:200px;">
   </body>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="text" style="-moz-appearance:none; appearance: none; width:200px;">
+    <input type="text" style="-moz-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>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <body style="direction: rtl">
-    <input type="text" style="-moz-appearance:none; appearance: none; width:200px;" value="1">
+    <input type="text" style="-moz-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>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <body style="direction: rtl">
-    <input type="number" style="-moz-appearance:none; appearance: none; width:200px;" value="1">
+    <input type="number" style="-moz-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>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-lr;">
   <body>
-    <input type="text" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
+    <input type="text" style="-moz-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>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-lr;">
   <body>
-    <input type="number" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
+    <input type="number" style="-moz-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>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-rl;">
   <body>
-    <input type="text" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
+    <input type="text" style="-moz-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>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html style="writing-mode:vertical-rl;">
   <body>
-    <input type="number" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
+    <input type="number" style="-moz-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>
 </html>
--- 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,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="number" style="-moz-appearance:none; appearance: none; width:200px;">
+    <input type="number" style="-moz-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>
 </html>
--- a/layout/reftests/forms/input/number/reftest.list
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -22,20 +22,20 @@ fuzzy-if(skiaContent,2,13) == show-value
 
 # disabled
 == number-disabled.html number-disabled-ref.html
 
 # auto width:
 == number-auto-width-1.html number-auto-width-1-ref.html
 
 # min-height/max-height tests:
-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
+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
 
 # number of significant fractional digits:
 == number-significant-fractional-digits.html number-significant-fractional-digits-ref.html
 
 # focus
 fuzzy-if(skiaContent,2,5) needs-focus skip-if(stylo) == focus-handling.html focus-handling-ref.html
 
 # select
@@ -49,9 +49,9 @@ fails-if(stylo) == number-placeholder.ht
 # check that if the anonymous text control is reframed, we reframe the whole
 # number control (the fuzzy is for the top-right and bottom-left of the border
 # bevel which gets slightly different antialiasing after invalidation):
 fuzzy(128,4) == number-reframe-anon-text-field.html number-reframe-anon-text-field-ref.html
 
 == pseudo-classes.html about:blank
 
 # Style inheritance:
-pref(layout.css.moz-appearance.enabled,true) == number-style-inheritance.html number-style-inheritance-ref.html
+== number-style-inheritance.html number-style-inheritance-ref.html
--- a/layout/reftests/forms/input/number/show-value-ref.html
+++ b/layout/reftests/forms/input/number/show-value-ref.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">                                                         
     <style>                                                                        
                                                                                    
 input {                                                                            
-  -moz-appearance: none; appearance: none;                                                           
+  -moz-appearance: none;                                                           
 }                                                                                  
                                                                                    
     </style>                                                                       
   </head>
   <body>
     <input value='142'><br>
     <input value='142'><br>
     <input value='142'><br>
--- a/layout/reftests/forms/input/number/show-value.html
+++ b/layout/reftests/forms/input/number/show-value.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <head>
     <meta charset="utf-8">
     <style>
 
 input {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 
     </style>
     <script>
 // Using "142" as the magic number as "1" in a monospace font should not have
 // stray leading or trailing antialised pixels that get clipped unexpectedly.
 
 function run() {
--- 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; appearance: none;">
+    <input type="number" style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -5,11 +5,11 @@
     function setToNumber()
     {
       document.getElementById('i').type='number';
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setToNumber);
   </script>
   <body>
-    <input type='checkbox' id='i' style="-moz-appearance:none; appearance: none;">
+    <input type='checkbox' id='i' style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none" checked>
+<input type="radio" style="-moz-appearance:none" checked>
--- 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; appearance: none">
+<input type="radio" style="-moz-appearance:none">
--- 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; appearance: none">
+    <input type=range value=75 style="-moz-appearance:none">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="range" style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: that range with value=70 is different to the default value=50. -->
   <body>
-    <input type='range' style="-moz-appearance:none; appearance: none;" value=90 min=20 max=120>
+    <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
   </body>
 </html>
--- 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; appearance: none;">
+    <input type='range' value=30 style="-moz-appearance:none;">
   </body>
 </html>
--- a/layout/reftests/forms/input/range/direction-unthemed-1.html
+++ b/layout/reftests/forms/input/range/direction-unthemed-1.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: that direction:rtl behaves correctly -->
   <body>
-    <input type='range' value=70 style="-moz-appearance:none; appearance: none; direction:rtl;">
+    <input type='range' value=70 style="-moz-appearance:none; direction:rtl;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="checkbox" style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -6,11 +6,11 @@
     function setToCheckbox()
     {
       document.getElementById('i').type='checkbox';
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setToCheckbox);
   </script>
   <body>
-    <input type='range' id='i' style="-moz-appearance:none; appearance: none;">
+    <input type='range' id='i' style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="range" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="text" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="text" value="50" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="checkbox" style="-moz-appearance:none;">
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="range" value=70 style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <!-- Test: that range with value=90,min=90,max=120 looks the same as range
        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; appearance: none;" value=90 min=20 max=120>
+    <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
   </body>
 </html>
--- a/layout/reftests/forms/input/range/stepDown-unthemed.html
+++ b/layout/reftests/forms/input/range/stepDown-unthemed.html
@@ -6,11 +6,11 @@
     function setValue()
     {
       document.getElementById('i').stepDown();
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setValue);
   </script>
   <body>
-    <input type=range id='i' value=100 step=25 style='-moz-appearance:none; appearance: none'>
+    <input type=range id='i' value=100 step=25 style='-moz-appearance:none'>
   </body>
 </html>
--- a/layout/reftests/forms/input/range/stepUp-unthemed.html
+++ b/layout/reftests/forms/input/range/stepUp-unthemed.html
@@ -6,11 +6,11 @@
     function setValue()
     {
       document.getElementById('i').stepUp();
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setValue);
   </script>
   <body>
-    <input type=range id='i' value=50 step=25 style='-moz-appearance:none; appearance: none'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
   </body>
 </html>
--- 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; appearance: none;">
+    <input type="range" style="-moz-appearance:none;">
   </body>
 </html>
--- 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
@@ -5,11 +5,11 @@
     function setToRange()
     {
       document.getElementById('i').type='range';
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setToRange);
   </script>
   <body>
-    <input type='checkbox' id='i' style="-moz-appearance:none; appearance: none;">
+    <input type='checkbox' id='i' style="-moz-appearance:none;">
   </body>
 </html>
--- a/layout/reftests/forms/input/range/value-prop-unthemed.html
+++ b/layout/reftests/forms/input/range/value-prop-unthemed.html
@@ -7,11 +7,11 @@
     {
       document.getElementById('i').value = "75";
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setValue);
     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; appearance: none'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
   </body>
 </html>
--- a/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
@@ -7,11 +7,11 @@
     {
       document.getElementById('i').valueAsNumber = 75;
       document.documentElement.className = '';
     }
     document.addEventListener("MozReftestInvalidate", setValue);
     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; appearance: none'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
   </body>
 </html>
--- a/layout/reftests/forms/meter/default-style/style.css
+++ b/layout/reftests/forms/meter/default-style/style.css
@@ -45,10 +45,10 @@ div.meter-sub-sub-optimum {
    * width: 100%;
    */
 
   /* red. */
   background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
 }
 
 meter, meter::-moz-meter-bar, div.meter-element, div.meter-optimum, div.meter-sub-optimum, div.meter-sub-sub-optimum {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
--- a/layout/reftests/forms/meter/style.css
+++ b/layout/reftests/forms/meter/style.css
@@ -21,17 +21,17 @@ div.meter-bar {
    * underisable effectes:
    * width: 100%;
    */
 
   background-color: green;
 }
 
 meter, meter::-moz-meter-bar, div.meter-element, div.meter-bar {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 
 meter {
   background: grey;
 }
 
 meter::-moz-meter-bar {
   background: green;
--- a/layout/reftests/forms/progress/reftest.list
+++ b/layout/reftests/forms/progress/reftest.list
@@ -1,11 +1,8 @@
-# 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
 == margin-padding-rtl.html margin-padding-rtl-ref.html
 random-if(stylo) == bar-pseudo-element.html bar-pseudo-element-ref.html
 == bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
 == indeterminate-style-width.html indeterminate-style-width-ref.html
 
--- a/layout/reftests/forms/progress/style.css
+++ b/layout/reftests/forms/progress/style.css
@@ -1,16 +1,16 @@
 div.progress-element {
   -moz-appearance: progressbar;
   display: inline-block;
   height: 1em;
   width: 10em;
   vertical-align: -0.2em;
 
-  /* Default style in case of there is -moz-appearance: none; appearance: none; */
+  /* Default style in case of there is -moz-appearance: none; */
   border: 2px solid;
   -moz-border-top-colors: ThreeDShadow #e6e6e6;
   -moz-border-right-colors: ThreeDHighlight #e6e6e6;
   -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
   -moz-border-left-colors: ThreeDShadow #e6e6e6;
   background-color: #e6e6e6;
 }
 
@@ -25,15 +25,15 @@ div.progress-bar {
   /*
    * We can't apply the following style to the reference because it will have
    * underisable effectes:
    * width: 100%;
    */
 
   box-sizing: border-box;
 
-  /* Default style in case of there is -moz-appearance: none; appearance: none; */
+  /* Default style in case of there is -moz-appearance: none; */
   background-color: #0064b4;
 }
 
 progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
--- a/layout/reftests/forms/select/focusring-1-ref.html
+++ b/layout/reftests/forms/select/focusring-1-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <html class="reftest-wait"><head>
     <meta charset="utf-8">
     <title>Testcase #1 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; appearance: none; }
+* { -moz-appearance:none; }
 :focus {
   border:2px solid black;
 }
 :-moz-focusring {
   outline: 2px dashed black;
 }
 
     </style>
--- a/layout/reftests/forms/select/focusring-1.html
+++ b/layout/reftests/forms/select/focusring-1.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <html class="reftest-wait"><head>
     <meta charset="utf-8">
     <title>Testcase #1 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; appearance: none; }
+* { -moz-appearance:none; }
 :focus {
   border:2px solid black;
 }
 :-moz-focusring {
   outline: 2px dashed black;
 }
 
     </style>
--- a/layout/reftests/forms/select/focusring-2-ref.html
+++ b/layout/reftests/forms/select/focusring-2-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <html><head>
     <meta charset="utf-8">
     <title>Testcase #2 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; appearance: none; }
+* { -moz-appearance:none; }
 :focus {
   border:2px solid black;
 }
 :-moz-focusring {
   outline: 2px dashed black;
 }
 
     </style>
--- a/layout/reftests/forms/select/focusring-2.html
+++ b/layout/reftests/forms/select/focusring-2.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <html class="reftest-wait"><head>
     <meta charset="utf-8">
     <title>Testcase #2 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; appearance: none; }
+* { -moz-appearance:none; }
 :focus {
   border:2px solid black;
 }
 :-moz-focusring {
   outline: 2px dashed black;
 }
 
     </style>
--- a/layout/reftests/forms/select/focusring-3-ref.html
+++ b/layout/reftests/forms/select/focusring-3-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <html class="reftest-wait"><head>
     <meta charset="utf-8">
     <title>Testcase #3 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; appearance: none; }
+* { -moz-appearance:none; }
 :focus {
   border:2px solid black;
 }
 :-moz-focusring {
   outline: 2px dashed black;
 }
 
     </style>
--- a/layout/reftests/forms/select/focusring-3.html
+++ b/layout/reftests/forms/select/focusring-3.html
@@ -1,15 +1,15 @@
 <!DOCTYPE HTML>
 <html class="reftest-wait"><head>
     <meta charset="utf-8">
     <title>Testcase #3 for bug 1253977</title>
     <style type="text/css">
 
-* { -moz-appearance:none; appearance: none; }
+* { -moz-appearance:none; }
 :focus {
   border:2px solid black;
 }
 :-moz-focusring {
   outline: 2px dashed black;
 }
 
     </style>
--- a/layout/reftests/forms/select/vertical-centering-ref.html
+++ b/layout/reftests/forms/select/vertical-centering-ref.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <style>
   @font-face {
     font-family: "Ahem";
     src: url(../../fonts/Ahem.ttf);
   }
   select {
-    -moz-appearance: none; appearance: none;
+    -moz-appearance: none;
     border: none;
     font-family: Ahem;
     font-size: 20px;
     box-sizing: content-box;
     /*
      * Why are these top/bottom paddings 7px rather than 10px?  1px each is
      * eaten up by padding on the combobox display area, but I have no idea
      * where the extra 4px somewhere else are coming from...
--- a/layout/reftests/forms/select/vertical-centering.html
+++ b/layout/reftests/forms/select/vertical-centering.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <style>
   @font-face {
     font-family: "Ahem";
     src: url(../../fonts/Ahem.ttf);
   }
   select {
-    -moz-appearance: none; appearance: none;
+    -moz-appearance: none;
     border: none;
     font-family: Ahem;
     font-size: 20px;
     padding: 0;
     box-sizing: content-box;
     height: 40px;
   }
 </style>
--- 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; appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
 </body></html>
--- 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; 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; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
 </body></html>
--- a/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
+++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
@@ -36,15 +36,15 @@ window.addEventListener("MozReftestInval
 </head>
 
 <body>
 
 <div id="div">
   <textarea rows="3" cols="5" id="textarea">x</textarea>
 </div>
 
-<select style="-moz-appearance:none; appearance: none">
+<select style="-moz-appearance:none">
   <option id="opt1">opt1</option>
 </select>
 
 </body>
 </html>
 
--- a/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
+++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
@@ -3,15 +3,15 @@
 </head>
 
 <body>
 
 <div id="div">
   <textarea rows="3" cols="5" id="textarea">x y</textarea>
 </div>
 
-<select style="-moz-appearance:none; appearance: none">
+<select style="-moz-appearance:none">
   <option id="opt1"></option>
 </select>
 
 </body>
 </html>
 
--- a/layout/reftests/forms/textbox/accesskey-1-notref.xul
+++ b/layout/reftests/forms/textbox/accesskey-1-notref.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-1.xul
+++ b/layout/reftests/forms/textbox/accesskey-1.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-2-ref.xul
+++ b/layout/reftests/forms/textbox/accesskey-2-ref.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-2.xul
+++ b/layout/reftests/forms/textbox/accesskey-2.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-3-notref.xul
+++ b/layout/reftests/forms/textbox/accesskey-3-notref.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-3-ref.xul
+++ b/layout/reftests/forms/textbox/accesskey-3-ref.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-3.xul
+++ b/layout/reftests/forms/textbox/accesskey-3.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-4-notref.xul
+++ b/layout/reftests/forms/textbox/accesskey-4-notref.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-4-ref.xul
+++ b/layout/reftests/forms/textbox/accesskey-4-ref.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/accesskey-4.xul
+++ b/layout/reftests/forms/textbox/accesskey-4.xul
@@ -5,17 +5,17 @@
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
       font-size: 36px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/align-baseline-1-ref.xul
+++ b/layout/reftests/forms/textbox/align-baseline-1-ref.xul
@@ -4,17 +4,17 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     #container {
       margin-top: 12px;
       padding-top: 8px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
     }
   </html:style>
--- a/layout/reftests/forms/textbox/align-baseline-1.xul
+++ b/layout/reftests/forms/textbox/align-baseline-1.xul
@@ -4,17 +4,17 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style type="text/css">
     hbox {
       margin-top: 0px;
       padding-top: 0px;
     }
     label, textbox {
-      -moz-appearance: none; appearance: none;
+      -moz-appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- a/layout/reftests/forms/textbox/reftest.list
+++ b/layout/reftests/forms/textbox/reftest.list
@@ -3,9 +3,9 @@
 skip-if(cocoaWidget||Android) != accesskey-1.xul accesskey-1-notref.xul
 skip-if(cocoaWidget||Android) == accesskey-2.xul accesskey-2-ref.xul
 # accesskey-3 fails because of defects in XUL bidi support
 fails-if(!cocoaWidget&&!stylo) skip-if(cocoaWidget||Android) == accesskey-3.xul accesskey-3-ref.xul
 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
-pref(layout.css.moz-appearance.enabled,true) skip-if(Android) == setsize.xul setsize-ref.xul
+skip-if(Android) == setsize.xul setsize-ref.xul
--- a/layout/reftests/native-theme/button-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/button-nonnative-when-styled-ref.html
@@ -1,17 +1,17 @@
 <!DOCTYPE HTML>
 <!-- these should make the input non-native -->
-<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">
+<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">
 
 <!-- these should let it stay native -->
 <input type="button" value="">
 <input type="button" value="">
--- 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; appearance: none">
+<input type="button" value="Button" style="-moz-appearance: none">
--- 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; appearance: none">
+<input type="checkbox" style="-moz-appearance: none">
--- a/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/combobox-nonnative-when-styled-ref.html
@@ -1,21 +1,21 @@
 <!DOCTYPE HTML>
 <div style="position:relative">
 <!-- 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; 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>
+<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>
 </div>
 
 <!-- these should let it stay native -->
 <select size="1"></select>
 <select size="1"></select>
--- 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; appearance: none"></select>
+<select size="1" style="-moz-appearance: none"></select>
--- a/layout/reftests/native-theme/listbox-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/listbox-nonnative-when-styled-ref.html
@@ -1,19 +1,19 @@
 <!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; 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>
+<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>
 
 <!-- these should let it stay native -->
 <select size="3" style="color: black"></select>
 <select size="3" style="font-weight: normal"></select>
 </body>
--- 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; appearance: none"></select>
+<select size="3" style="-moz-appearance: none"></select>
--- 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; 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">
+<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">
--- 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; appearance: none">
+<input type="radio" style="-moz-appearance: none">
--- a/layout/reftests/native-theme/reftest.list
+++ b/layout/reftests/native-theme/reftest.list
@@ -25,21 +25,21 @@ fails-if(!nativeThemePref) != radio-nati
 == radio-still-native-when-styled.html radio-still-native-when-styled-ref.html
 fails-if(!nativeThemePref) != checkbox-native.html checkbox-nonnative.html
 == checkbox-still-native-when-styled.html checkbox-still-native-when-styled-ref.html
 == native-theme-disabled-cascade-levels.html native-theme-disabled-cascade-levels-ref.html
 
 != 427122-1.html 427122-1-ref.html
 
 # 403458 is a Windows-only bug
-pref(layout.css.moz-appearance.enabled,true) skip-if(!winWidget) != 403458-winmenu-ltr.xul 403458-winmenu-rtl.xul
+skip-if(!winWidget) != 403458-winmenu-ltr.xul 403458-winmenu-rtl.xul
 
 == 470711-1.xul 470711-1-ref.xul
 
-pref(layout.css.moz-appearance.enabled,true) == 482955-1.xul 482955-1-ref.xul
+== 482955-1.xul 482955-1-ref.xul
 
 == 492155-1.html about:blank
 == 492155-2.html about:blank
 == 492155-3.html about:blank
 fails-if(Android&&!asyncPan) != 492155-4.html about:blank
 
 != box-shadow-input.html box-shadow-input-ref.html
 != box-shadow-button.html box-shadow-button-ref.html
@@ -73,12 +73,12 @@ skip-if(!winWidget) == scroll-thumb-mini
 
 == checkbox-dynamic-1.html checkbox-dynamic-1-ref.html
 
 # These tests have been written to test the overflow of the window widget
 # (bug 568825) but we can't test it on Windows and Cocoa because they have
 # animated progress bars.
 # Nothing shows up on Android, presumably because that appearance type is
 # not implemented.
-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
+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
 
 == 676387-1.xul 676387-1-ref.xul
--- 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,23 +1,23 @@
 <!DOCTYPE HTML>
 <!-- these should make the input non-native -->
-<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">
+<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">
 
 <!-- these should let it stay native -->
 <input type="text" value="">
 <input type="text" value="">
--- 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; appearance: none">
+<input type="text" value="" style="-moz-appearance: none">
--- a/layout/reftests/native-theme/textarea-nonnative-when-styled-ref.html
+++ b/layout/reftests/native-theme/textarea-nonnative-when-styled-ref.html
@@ -1,17 +1,17 @@
 <!DOCTYPE HTML>
 <!-- these should make the textarea non-native -->
-<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>
+<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>
 
 <!-- these should let it stay native -->
 <textarea></textarea>
 <textarea></textarea>
--- 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; appearance: none"></textarea>
+<textarea style="-moz-appearance: none"></textarea>
--- a/layout/reftests/svg/foreignObject-form-no-theme.svg
+++ b/layout/reftests/svg/foreignObject-form-no-theme.svg
@@ -1,14 +1,14 @@
 <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; appearance: none'>this is a button inside of SVG</button>
+      <button style='-moz-appearance:none'>this is a button inside of SVG</button>
       <br/>
-      <select style='-moz-appearance:none; appearance: none'>
+      <select style='-moz-appearance:none'>
         <option>This is a menu inside of SVG</option>
         <option>a second menu option</option>
       </select>
     </div>
   </foreignObject>
 </svg>
 
 <!-- Bug 686581 -->
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -211,17 +211,17 @@ fuzzy-if(skiaContent,1,500) == filter-sc
 == filter-use-element-01.svg pass.svg
 fuzzy-if(skiaContent,1,800000) == filters-and-group-opacity-01.svg filters-and-group-opacity-01-ref.svg
 
 == foreignObject-01.svg pass.svg
 == foreignObject-02.svg foreignObject-02-ref.svg
 == 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
-pref(layout.css.moz-appearance.enabled,true) == foreignObject-form-theme.svg foreignObject-form-theme-ref.html
+== 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
 == foreignObject-start-hidden-01.svg pass.svg # followup from Bug 596765
 == foreignObject-start-hidden-02.svg pass.svg
 == foreignObject-style-change-01.svg pass.svg
 == foreignObject-dynamic-abspos-01.html foreignObject-dynamic-abspos-01-ref.html
 fuzzy-if(Android,18,600) == foreignObject-fixedpos-01.html foreignObject-dynamic-abspos-01-ref.html
--- 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,12 +1,12 @@
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none; appearance: none }
+textarea { -moz-appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
 <body>
 <!-- t-d should not propagate to the content of a form control -->
 <form>
 <span style="text-decoration:underline">This text should be underlined.</span><br>
 <textarea rows="2" cols="40">This text should not be underlined.</textarea
--- a/layout/reftests/text-decoration/underline-block-propagation-2-quirks.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-quirks.html
@@ -1,12 +1,12 @@
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none; appearance: none }
+textarea { -moz-appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
 <body>
 <!-- t-d should not propagate to the content of a form control -->
 <form style="text-decoration:underline">
 This text should be underlined.<br>
 <textarea rows="2" cols="40">This text should not be underlined.</textarea
--- a/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML>
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none; appearance: none }
+textarea { -moz-appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
 <body>
 <!-- t-d should not propagate to the content of a form control -->
 <form>
 <span style="text-decoration:underline">This text should be underlined.</span><br>
 <textarea rows="2" cols="40">This text should not be underlined.</textarea
--- a/layout/reftests/text-decoration/underline-block-propagation-2-standards.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-standards.html
@@ -1,13 +1,13 @@
 <!DOCTYPE HTML>
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
-textarea { -moz-appearance: none; appearance: none }
+textarea { -moz-appearance: none }
 textarea + textarea { margin-left: 10px }
 </style>
 </head>
 <body>
 <!-- t-d should not propagate to the content of a form control -->
 <form style="text-decoration:underline">
 This text should be underlined.<br>
 <textarea rows="2" cols="40">This text should not be underlined.</textarea
--- a/layout/reftests/text-overflow/combobox-zoom-ref.html
+++ b/layout/reftests/text-overflow/combobox-zoom-ref.html
@@ -16,17 +16,17 @@ html,body {
 * {
   font-family:DejaVuSansMono!important;
   font-size:16px!important;
 }
 select {
   width: 200px;
   padding-right: 8px;
 
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 </style>
 </head>
 <body>
 <select></select><br>
 
 <select><option>long string long s</option></select>
 
--- a/layout/reftests/text-overflow/combobox-zoom.html
+++ b/layout/reftests/text-overflow/combobox-zoom.html
@@ -16,17 +16,17 @@ html,body {
 * {
   font-family:DejaVuSansMono!important;
   font-size:16px!important;
 }
 select {
   width: 200px;
   padding-right: 8px;
   text-overflow: " ";
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 </style>
 </head>
 <body>
 <select></select><br>
 
 <select><option>long string long string long string long string long string long string long string</option></select>
 
--- a/layout/reftests/text/control-chars-01-notref.html
+++ b/layout/reftests/text/control-chars-01-notref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; width:300px; height:300px;">
 foobar
 </textarea>
 </body>
 </html>
--- a/layout/reftests/text/control-chars-01a.html
+++ b/layout/reftests/text/control-chars-01a.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; width:300px; height:300px;">
 foo&#x01;bar
 </textarea>
 </body>
 </html>
--- a/layout/reftests/text/control-chars-01b.html
+++ b/layout/reftests/text/control-chars-01b.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; width:300px; height:300px;">
 foo&#x1f;bar
 </textarea>
 </body>
 </html>
--- a/layout/reftests/text/control-chars-01c.html
+++ b/layout/reftests/text/control-chars-01c.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; width:300px; height:300px;">
 foo&#x7f;bar
 </textarea>
 </body>
 </html>
--- a/layout/reftests/text/control-chars-01d.html
+++ b/layout/reftests/text/control-chars-01d.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 </head>
 <body>
-<textarea style="-moz-appearance:none; appearance: none; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; width:300px; height:300px;">
 foo&#x8f;bar
 </textarea>
 </body>
 </html>
--- a/layout/reftests/unicode/unicode-attribute-selector.html
+++ b/layout/reftests/unicode/unicode-attribute-selector.html
@@ -3,17 +3,17 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Unicode tests - attribute selectors</title>
   <style>
     div[dİr] {color: red;}
     div[dİr="ltr"] {text-indent: 30px;}
     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; appearance: none; }
+    input { -moz-appearance: none; }
   </style>
 </head>
 
 <body>
   <div dir='ltr'><p lang="hi">स्टार</p></div>
   <input disabled>
   <input dİsabled="DİSABLED">
   <input dİsabled="disabled">
--- a/layout/reftests/unicode/unicode-element-selector.html
+++ b/layout/reftests/unicode/unicode-element-selector.html
@@ -1,16 +1,16 @@
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Unicode tests - element selectors</title>
   <style>
     dİv {color: red}
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; appearance: none; }
+    input { -moz-appearance: none; }
   </style>
 </head>
 
 <body>
   <div><p lang="hi">स्टार</p></div>
   <input disabled>
 </body>
 </html>
--- a/layout/reftests/unicode/unicode-lang.html
+++ b/layout/reftests/unicode/unicode-lang.html
@@ -1,17 +1,17 @@
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Unicode tests - language selector</title>
   <style>
     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; appearance: none; }
+    input { -moz-appearance: none; }
   </style>
 </head>
 
 <body>
   <div><p lang="hi">स्टार</p></div>
   <input disabled>
 </body>
 </html>
--- a/layout/reftests/unicode/unicode-pseudo-selector.html
+++ b/layout/reftests/unicode/unicode-pseudo-selector.html
@@ -1,16 +1,16 @@
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Unicode tests - pseudo element selectors</title>
   <style>
     p:fİrst-letter {color: red}
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; appearance: none; }
+    input { -moz-appearance: none; }
   </style>
 </head>
 
 <body>
   <div><p lang="hi">स्टार</p></div>
   <input disabled>
 </body>
 </html>
--- a/layout/reftests/unicode/unicode-ref.html
+++ b/layout/reftests/unicode/unicode-ref.html
@@ -1,15 +1,15 @@
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Unicode tests - reference rending</title>
   <style>
     /* work around unreliable form-control rendering on Gtk+3 (see bug 1223198): */
-    input { -moz-appearance: none; appearance: none; }
+    input { -moz-appearance: none; }
   </style>
 </head>
 
 <body>
   <div><p lang="hi">स्टार</p></div>
   <input disabled>
 </body>
 </html>
--- a/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html
+++ b/layout/reftests/writing-mode/1138356-1-button-contents-alignment-ref.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html>
 <style type="text/css">
 button {
   writing-mode: vertical-lr;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 #a { }
 #b { width: 50px; }
 #c { padding: 20px; }
 #d { padding-left: 20px; }
 #e { padding-right: 20px; }
 #f { width: 50px; padding: 20px; visibility: hidden; } /* expected to mismatch */
 #g { width: 50px; padding-left: 20px; }
--- a/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html
+++ b/layout/reftests/writing-mode/1138356-1-button-contents-alignment.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html>
 <style type="text/css">
 button {
   writing-mode: vertical-rl;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 #a { }
 #b { width: 50px; }
 #c { padding: 20px; }
 #d { padding-left: 20px; }
 #e { padding-right: 20px; }
 #f { width: 50px; padding: 20px; visibility: hidden; } /* expected to mismatch */
 #g { width: 50px; padding-left: 20px; }
--- a/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html
+++ b/layout/reftests/writing-mode/1138356-2-button-contents-alignment-notref.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html>
 <style type="text/css">
 button {
   writing-mode: vertical-lr;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   visibility: hidden;
 }
 #a { }
 #b { width: 50px; }
 #c { padding: 20px; }
 #d { padding-left: 20px; }
 #e { padding-right: 20px; }
 #f { width: 50px; padding: 20px; visibility: visible; } /* expected to mismatch */
--- a/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html
+++ b/layout/reftests/writing-mode/1138356-2-button-contents-alignment.html
@@ -1,14 +1,14 @@
 <!DOCTYPE HTML>
 <html>
 <style type="text/css">
 button {
   writing-mode: vertical-rl;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   visibility: hidden;
 }
 #a { }
 #b { width: 50px; }
 #c { padding: 20px; }
 #d { padding-left: 20px; }
 #e { padding-right: 20px; }
 #f { width: 50px; padding: 20px; visibility: visible; } /* expected to mismatch */
--- a/layout/reftests/writing-mode/reftest.list
+++ b/layout/reftests/writing-mode/reftest.list
@@ -64,17 +64,17 @@ fails-if(stylo) == ua-style-sheet-size-2
 == ua-style-sheet-fieldset-1.html ua-style-sheet-fieldset-1-ref.html
 skip-if(Android||winWidget) fails-if(stylo) == ua-style-sheet-textarea-1.html ua-style-sheet-textarea-1a-ref.html
 skip-if(!(Android)) fails-if(stylo) == ua-style-sheet-textarea-1.html ua-style-sheet-textarea-1b-ref.html
 skip-if(!winWidget) fails-if(stylo) == ua-style-sheet-textarea-1.html ua-style-sheet-textarea-1c-ref.html
 fuzzy-if(Android,1,18) == ua-style-sheet-checkbox-radio-1.html ua-style-sheet-checkbox-radio-1-ref.html
 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
-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
+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
 HTTP(..) == 1127488-align-end-horizontal-tb-ltr.html 1127488-align-top-right-ref.html
 HTTP(..) == 1127488-align-left-horizontal-tb-ltr.html 1127488-align-top-left-ref.html
 HTTP(..) == 1127488-align-right-horizontal-tb-ltr.html 1127488-align-top-right-ref.html
 HTTP(..) == 1127488-align-default-horizontal-tb-rtl.html 1127488-align-top-right-ref.html
 HTTP(..) == 1127488-align-start-horizontal-tb-rtl.html 1127488-align-top-right-ref.html
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test for logical properties of button in the UA stylesheet</title>
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; appearance: none; }
+.a { -moz-appearance: none; }
 </style>
 <div class=ltr>
   <button>one</button><br>
   <button class=a>two</button><br>
   <button disabled>three</button><br>
   <button class=a disabled>four</button><br>
   <input type="button" value="five"><br>
   <input type="button" value="six" class=a><br>
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test for logical properties of button in the UA stylesheet</title>
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; appearance: none; }
+.a { -moz-appearance: none; }
 
 .ltr button,
 .rtl button,
 .ltr input[type="button"],
 .rtl input[type="button"] {
   padding: 0px 8px;
 }
 
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1b-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1b-ref.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test for logical properties of button in the UA stylesheet</title>
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; appearance: none; }
+.a { -moz-appearance: none; }
 
 .ltr button,
 .rtl button,
 .ltr input[type="button"],
 .rtl input[type="button"] {
   padding: 0 7px;
 }
 
--- 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
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test for logical properties of input type=color in the UA stylesheet</title>
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; appearance: none; }
+.a { -moz-appearance: none; }
 
 .ltr input[type="color"]:-moz-system-metric(color-picker-available),
 .rtl input[type="color"]:-moz-system-metric(color-picker-available) {
   width: 64px;
   height: 23px;
   padding: 0px 8px;
 }
 
--- a/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test for logical properties of input type=color in the UA stylesheet</title>
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
-.a { -moz-appearance: none; appearance: none; }
+.a { -moz-appearance: none; }
 </style>
 <div class=ltr>
   <input type=color><br>
   <input type=color class=a><br>
 </div>
 
 <div class=rtl dir=rtl>
   <input type=color><br>
--- a/layout/style/nsCSSPropAliasList.h
+++ b/layout/style/nsCSSPropAliasList.h
@@ -255,21 +255,16 @@ CSS_PROP_ALIAS(-webkit-animation-play-st
                animation_play_state,
                WebkitAnimationPlayState,
                WEBKIT_PREFIX_PREF)
 CSS_PROP_ALIAS(-webkit-animation-timing-function,
                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,
                WEBKIT_PREFIX_PREF)
 CSS_PROP_ALIAS(-webkit-text-size-adjust,
                _moz_text_size_adjust,
                WebkitTextSizeAdjust,
                WEBKIT_PREFIX_PREF)
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -458,31 +458,19 @@ CSS_PROP_DISPLAY(
     "",
     VARIANT_KEYWORD | VARIANT_TIMING_FUNCTION, // used by list parsing
     kTransitionTimingFunctionKTable,
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_None)
 CSS_PROP_DISPLAY(
     -moz-appearance,
     _moz_appearance,
-    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
+    CSS_PROP_DOMPROP_PREFIXED(Appearance),
+    CSS_PROPERTY_PARSE_VALUE,
+    "",
     VARIANT_HK,
     kAppearanceKTable,
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_Discrete)
 CSS_PROP_DISPLAY(
     backface-visibility,
     backface_visibility,
     BackfaceVisibility,
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -737,22 +737,16 @@ const KTableEntry nsCSSProps::kAnimation
 
 const KTableEntry nsCSSProps::kAnimationPlayStateKTable[] = {
   { eCSSKeyword_running, NS_STYLE_ANIMATION_PLAY_STATE_RUNNING },
   { eCSSKeyword_paused, NS_STYLE_ANIMATION_PLAY_STATE_PAUSED },
   { eCSSKeyword_UNKNOWN, -1 }
 };
 
 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 },
   { eCSSKeyword_checkbox,               NS_THEME_CHECKBOX },
   { eCSSKeyword_button_bevel,           NS_THEME_BUTTON_BEVEL },
   { eCSSKeyword_toolbox,                NS_THEME_TOOLBOX },
   { eCSSKeyword_toolbar,                NS_THEME_TOOLBAR },
   { eCSSKeyword_toolbarbutton,          NS_THEME_TOOLBARBUTTON },
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -691,17 +691,16 @@ public:
 
   // Keyword/Enum value tables
   static const KTableEntry kAnimationDirectionKTable[];
   static const KTableEntry kAnimationFillModeKTable[];
   static const KTableEntry kAnimationIterationCountKTable[];
   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[];
   static const KTableEntry kImageLayerAttachmentKTable[];
   static const KTableEntry kBackgroundOriginKTable[];
   static const KTableEntry kMaskOriginKTable[];
   static const KTableEntry kImageLayerPositionKTable[];
   static const KTableEntry kImageLayerRepeatKTable[];
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -4373,24 +4373,16 @@ already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetAppearance()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetIdent(nsCSSProps::ValueToKeywordEnum(StyleDisplay()->mAppearance,
                                                nsCSSProps::kAppearanceKTable));
   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()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetIdent(nsCSSProps::ValueToKeywordEnum(StyleXUL()->mBoxAlign,
                                                nsCSSProps::kBoxAlignKTable));
   return val.forget();
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -251,17 +251,16 @@ private:
   bool ShouldHonorMinSizeAutoInAxis(mozilla::PhysicalAxis aAxis);
 
   /* Properties queryable as CSSValues.
    * To avoid a name conflict with nsIDOM*CSS2Properties, these are all
    * DoGetXXX instead of GetXXX.
    */
 
   already_AddRefed<CSSValue> DoGetAppearance();
-  already_AddRefed<CSSValue> DoGetMozAppearance();
 
   /* Box properties */
   already_AddRefed<CSSValue> DoGetBoxAlign();
   already_AddRefed<CSSValue> DoGetBoxDecorationBreak();
   already_AddRefed<CSSValue> DoGetBoxDirection();
   already_AddRefed<CSSValue> DoGetBoxFlex();
   already_AddRefed<CSSValue> DoGetBoxOrdinalGroup();
   already_AddRefed<CSSValue> DoGetBoxOrient();
--- a/layout/style/nsComputedDOMStylePropertyList.h
+++ b/layout/style/nsComputedDOMStylePropertyList.h
@@ -46,17 +46,16 @@ COMPUTED_STYLE_PROP(align_self,         
 COMPUTED_STYLE_PROP(animation_delay,               AnimationDelay)
 COMPUTED_STYLE_PROP(animation_direction,           AnimationDirection)
 COMPUTED_STYLE_PROP(animation_duration,            AnimationDuration)
 COMPUTED_STYLE_PROP(animation_fill_mode,           AnimationFillMode)
 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)
 COMPUTED_STYLE_PROP(background_blend_mode,         BackgroundBlendMode)
 COMPUTED_STYLE_PROP(background_clip,               BackgroundClip)
 COMPUTED_STYLE_PROP(background_color,              BackgroundColor)
 COMPUTED_STYLE_PROP(background_image,              BackgroundImage)
 COMPUTED_STYLE_PROP(background_origin,             BackgroundOrigin)
@@ -270,17 +269,17 @@ COMPUTED_STYLE_PROP(word_break,         
 COMPUTED_STYLE_PROP(word_spacing,                  WordSpacing)
 COMPUTED_STYLE_PROP(writing_mode,                  WritingMode)
 COMPUTED_STYLE_PROP(z_index,                       ZIndex)
 
 /* ******************************* *\
  * Implementations of -moz- styles *
 \* ******************************* */
 
-COMPUTED_STYLE_PROP(_moz_appearance,               MozAppearance)
+COMPUTED_STYLE_PROP(_moz_appearance,               Appearance)
 COMPUTED_STYLE_PROP(_moz_binding,                  Binding)
 COMPUTED_STYLE_PROP(_moz_border_bottom_colors,     BorderBottomColors)
 COMPUTED_STYLE_PROP(_moz_border_left_colors,       BorderLeftColors)
 COMPUTED_STYLE_PROP(_moz_border_right_colors,      BorderRightColors)
 COMPUTED_STYLE_PROP(_moz_border_top_colors,        BorderTopColors)
 COMPUTED_STYLE_PROP(_moz_box_align,                BoxAlign)
 COMPUTED_STYLE_PROP(_moz_box_direction,            BoxDirection)
 COMPUTED_STYLE_PROP(_moz_box_flex,                 BoxFlex)
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -6063,29 +6063,22 @@ nsRuleNode::ComputeDisplayData(void* aSt
            SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
            parentDisplay->mTopLayer, NS_STYLE_TOP_LAYER_NONE);
 
   // Backup original display value for calculation of a hypothetical
   // box (CSS2 10.6.4/10.6.5), in addition to getting our style data right later.
   // See ReflowInput::CalculateHypotheticalBox
   display->mOriginalDisplay = display->mDisplay;
 
-  // -moz-appearance: enum, inherit, initial
-  SetValue(*aRuleData->ValueForMozAppearance(),
-           display->mMozAppearance, conditions,
-           SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
-           parentDisplay->mMozAppearance,
-           NS_THEME_NONE);
-
-  // appearance: auto | none
+  // appearance: enum, inherit, initial
   SetValue(*aRuleData->ValueForAppearance(),
            display->mAppearance, conditions,
            SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
            parentDisplay->mAppearance,
-           NS_THEME_AUTO);
+           NS_THEME_NONE);
 
   // binding: url, none, inherit
   const nsCSSValue* bindingValue = aRuleData->ValueForBinding();
   if (eCSSUnit_URL == bindingValue->GetUnit()) {
     mozilla::css::URLValue* url = bindingValue->GetURLStructValue();
     NS_ASSERTION(url, "What's going on here?");
     display->mBinding.Set(url);
   }
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -3335,18 +3335,17 @@ StyleAnimation::operator==(const StyleAn
 
 // --------------------
 // nsStyleDisplay
 //
 nsStyleDisplay::nsStyleDisplay(const nsPresContext* aContext)
   : mDisplay(StyleDisplay::Inline)
   , mOriginalDisplay(StyleDisplay::Inline)
   , mContain(NS_STYLE_CONTAIN_NONE)
-  , mMozAppearance(NS_THEME_NONE)
-  , mAppearance(NS_THEME_AUTO)
+  , mAppearance(NS_THEME_NONE)
   , mPosition(NS_STYLE_POSITION_STATIC)
   , mFloat(StyleFloat::None)
   , mOriginalFloat(StyleFloat::None)
   , mBreakType(StyleClear::None)
   , mBreakInside(NS_STYLE_PAGE_BREAK_AUTO)
   , mBreakBefore(false)
   , mBreakAfter(false)
   , mOverflowX(NS_STYLE_OVERFLOW_VISIBLE)
@@ -3398,17 +3397,16 @@ nsStyleDisplay::nsStyleDisplay(const nsP
   mAnimations[0].SetInitialValues();
 }
 
 nsStyleDisplay::nsStyleDisplay(const nsStyleDisplay& aSource)
   : mBinding(aSource.mBinding)
   , mDisplay(aSource.mDisplay)
   , mOriginalDisplay(aSource.mOriginalDisplay)
   , mContain(aSource.mContain)
-  , mMozAppearance(aSource.mMozAppearance)
   , mAppearance(aSource.mAppearance)
   , mPosition(aSource.mPosition)
   , mFloat(aSource.mFloat)
   , mOriginalFloat(aSource.mOriginalFloat)
   , mBreakType(aSource.mBreakType)
   , mBreakInside(aSource.mBreakInside)
   , mBreakBefore(aSource.mBreakBefore)
   , mBreakAfter(aSource.mBreakAfter)
@@ -3517,20 +3515,20 @@ nsStyleDisplay::CalcDifference(const nsS
    * as used when the overflow css property changes,
    * nsChangeHint_ReconstructFrame, PropagateScrollToViewport will be called.
    *
    * The scroll-behavior css property is not expected to change often (the
    * CSSOM-View DOM methods are likely to be used in those cases); however,
    * if this does become common perhaps a faster-path might be worth while.
    */
 
-  if ((mMozAppearance == NS_THEME_TEXTFIELD &&
-       aNewData.mMozAppearance != NS_THEME_TEXTFIELD) ||
-      (mMozAppearance != NS_THEME_TEXTFIELD &&
-       aNewData.mMozAppearance == NS_THEME_TEXTFIELD)) {
+  if ((mAppearance == NS_THEME_TEXTFIELD &&
+       aNewData.mAppearance != NS_THEME_TEXTFIELD) ||
+      (mAppearance != NS_THEME_TEXTFIELD &&
+       aNewData.mAppearance == 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
     // values such as 'none'.) We need to reframe since we want to use
     // nsTextControlFrame instead of nsNumberControlFrame if the author
     // specifies 'textfield'.
     return nsChangeHint_ReconstructFrame;
   }
@@ -3549,17 +3547,16 @@ nsStyleDisplay::CalcDifference(const nsS
   }
 
   // XXX the following is conservative, for now: changing float breaking shouldn't
   // necessarily require a repaint, reflow should suffice.
   if (mBreakType != aNewData.mBreakType
       || mBreakInside != aNewData.mBreakInside
       || mBreakBefore != aNewData.mBreakBefore
       || mBreakAfter != aNewData.mBreakAfter
-      || mMozAppearance != aNewData.mMozAppearance
       || mAppearance != aNewData.mAppearance
       || mOrient != aNewData.mOrient
       || mOverflowClipBox != aNewData.mOverflowClipBox) {
     hint |= nsChangeHint_AllReflowHints |
             nsChangeHint_RepaintFrame;
   }
 
   if (mIsolation != aNewData.mIsolation) {
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -22,17 +22,16 @@
 #include "mozilla/UniquePtr.h"
 #include "nsColor.h"
 #include "nsCoord.h"
 #include "nsMargin.h"
 #include "nsFont.h"
 #include "nsStyleAutoArray.h"
 #include "nsStyleCoord.h"
 #include "nsStyleConsts.h"
-#include "nsThemeConstants.h"
 #include "nsChangeHint.h"
 #include "nsPresContext.h"
 #include "nsCOMPtr.h"
 #include "nsCOMArray.h"
 #include "nsTArray.h"
 #include "nsCSSValue.h"
 #include "imgRequestProxy.h"
 #include "Orientation.h"
@@ -2679,30 +2678,17 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsSt
   BindingHolder mBinding;                  // [reset]
   mozilla::StyleDisplay mDisplay;          // [reset] see nsStyleConsts.h StyleDisplay
   mozilla::StyleDisplay mOriginalDisplay;  // [reset] saved mDisplay for
                                            //         position:absolute/fixed
                                            //         and float:left/right;
                                            //         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.
   mozilla::StyleFloat mFloat;
   // [reset] Save mFloat for position:absolute/fixed; otherwise equal to mFloat.
   mozilla::StyleFloat mOriginalFloat;
 
   mozilla::StyleClear mBreakType;  // [reset]
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -595,17 +595,17 @@ input[type="checkbox"]:disabled,
 input[type="checkbox"]:disabled:active,
 input[type="checkbox"]:disabled:hover,
 input[type="checkbox"]:disabled:hover:active {
   cursor: inherit;
 }
 
 %if defined(MOZ_WIDGET_ANDROID)
 /*
- * These platforms doesn't have any theming support and thus appearance:none
+ * These platforms doesn't have any theming support and thus -moz-appearance:none
  * is the same as any other appearance value.
  * XXX This is not web-compatible and should be fixed.
  */
 input[type="radio"] {
   border-radius: 100%;
 }
 
 input[type="checkbox"] {
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -1023,16 +1023,24 @@ var gCSSProperties = {
   "animation-timing-function": {
     domProp: "animationTimingFunction",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "ease" ],
     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,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "none" ],
     other_values: [ "url(foo.xml)" ],
     invalid_values: []
   },
@@ -7861,47 +7869,16 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "content-box text url(404.png) blue"
   );
 }
 
 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];
   if (entry.alias_for) {
     var aliasTargetEntry = gCSSProperties[entry.alias_for];
     if (!aliasTargetEntry) {
       ok(false,
          "Alias '" + prop + "' alias_for field, '" + entry.alias_for + "', " +
--- a/layout/style/test/test_pseudoelement_state.html
+++ b/layout/style/test/test_pseudoelement_state.html
@@ -9,72 +9,72 @@
 
 <script>
 var gIsAndroid = navigator.appVersion.indexOf("Android") != -1;
 
 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; appearance: none; } progress::-moz-progress-bar { background: black; }',
+    common_style:           'progress { -moz-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; }',
     active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
 
   // 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; appearance: none; } progress::-moz-progress-bar { background: black; }',
+    common_style:           'progress { -moz-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; }',
     active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
 
   // 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; appearance: none; } input::-moz-range-thumb { background: black; }',
+    common_style:           'input { -moz-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; }',
     active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
 
   // 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; appearance: none; } input::-moz-range-thumb { background: black; }',
+    common_style:           'input { -moz-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; }',
     active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
 
   // 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; appearance: none; } meter::-moz-meter-bar { background: black; }',
+    common_style:           'meter { -moz-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; }',
     active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
 
   // 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; appearance: none; } meter::-moz-meter-bar { background: black; }',
+    common_style:           'meter { -moz-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; }',
     active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
 
   // Do the same as the "Interact with the ::-moz-range-thumb" subtest above,
   // 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; appearance: none; } input::-moz-range-thumb { background: black; }',
+    common_style:           'body input { -moz-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; }',
     active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },
 
   // ::placeholder can't be tested, since the UA style sheet sets it to
   // be pointer-events:none.
 ];
--- a/layout/svg/crashtests/crashtests.list
+++ b/layout/svg/crashtests/crashtests.list
@@ -69,17 +69,17 @@ load 402408-1.svg
 load 404677-1.xhtml
 load 409565-1.xhtml
 load 409573-1.svg
 load 420697-1.svg
 load 420697-2.svg
 load 429774-1.svg
 load 441368-1.svg
 load 453754-1.svg
-pref(layout.css.moz-appearance.enabled,true) load 455314-1.xhtml
+load 455314-1.xhtml
 load 458453.html
 load 459666-1.html # bug 1323652
 load 459883.xhtml
 load 461289-1.svg
 load 464374-1.svg
 load 466585-1.svg
 load 467323-1.svg
 load 467498-1.svg
@@ -148,17 +148,17 @@ load 780764-1.svg
 load 780963-1.html
 load 782141-1.svg
 load 784061-1.svg
 load 788831-1.svg
 load 789390-1.html # bug 1323652
 load 790072.svg
 load 791826-1.svg
 load 808318-1.svg
-pref(layout.css.moz-appearance.enabled,true) load 803562-1.svg
+load 803562-1.svg
 load 813420-1.svg
 load 841163-1.svg
 load 841812-1.svg
 load 842009-1.svg
 load 842630-1.svg
 load 842909-1.svg
 load 843072-1.svg
 load 843917-1.svg
--- a/layout/tables/nsTableCellFrame.cpp
+++ b/layout/tables/nsTableCellFrame.cpp
@@ -488,17 +488,17 @@ nsTableCellFrame::BuildDisplayList(nsDis
     if (hasBoxShadow) {
       aLists.BorderBackground()->AppendNewToTop(
         new (aBuilder) nsDisplayBoxShadowOuter(aBuilder, this));
     }
 
     // display background if we need to.
     if (aBuilder->IsForEventDelivery() ||
         !StyleBackground()->IsTransparent(this) ||
-        StyleDisplay()->UsedAppearance()) {
+        StyleDisplay()->mAppearance) {
       nsDisplayBackgroundImage::AppendBackgroundItemsToTop(aBuilder,
           this,
           GetRectRelativeToSelf(),
           aLists.BorderBackground());
     }
 
     // display inset box-shadows if we need to.
     if (hasBoxShadow) {
--- a/layout/tables/nsTableFrame.cpp
+++ b/layout/tables/nsTableFrame.cpp
@@ -1508,17 +1508,17 @@ static inline bool FrameHasBorderOrBackg
 {
   if (!f->StyleVisibility()->IsVisible()) {
     return false;
   }
   if (f->StyleBorder()->HasBorder()) {
     return true;
   }
   if (!f->StyleBackground()->IsTransparent(f) ||
-      f->StyleDisplay()->UsedAppearance()) {
+      f->StyleDisplay()->mAppearance) {
 
     nsTableCellFrame *cellFrame = do_QueryFrame(f);
     // We could also return false here if the current frame is the root
     // of a pseudo stacking context
     if (cellFrame && !tableFrame->IsBorderCollapse()) {
       return false;
     }
     return true;
--- a/layout/xul/crashtests/189814-1.xul
+++ b/layout/xul/crashtests/189814-1.xul
@@ -1,17 +1,17 @@
 <?xml version="1.0"?>
 
 <window
   id="sliderprint" title="Print These Sliders"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   style="background-color: white">
 
   <label>
-  With the Classic theme, printing causes the browser to crash. adding style="-moz-appearance: none; appearance: none" to the
+  With the Classic theme, printing causes the browser to crash. adding style="-moz-appearance: none" to the
   thumb prevents the crash. The crash doesn't happen at all with Modern.
   </label>
   <spacer height="10"/>
     <hbox>
 
         <slider style="height: 174px; width: 24px" orient="vertical">
             <thumb/>
         </slider>
--- a/layout/xul/nsBox.cpp
+++ b/layout/xul/nsBox.cpp
@@ -295,23 +295,23 @@ nsIFrame::GetXULBorderAndPadding(nsMargi
 }
 
 nsresult
 nsBox::GetXULBorder(nsMargin& aMargin)
 {
   aMargin.SizeTo(0,0,0,0);
     
   const nsStyleDisplay* disp = StyleDisplay();
-  if (disp->UsedAppearance() && gTheme) {
+  if (disp->mAppearance && gTheme) {
     // Go to the theme for the border.
     nsPresContext *context = PresContext();
-    if (gTheme->ThemeSupportsWidget(context, this, disp->UsedAppearance())) {
+    if (gTheme->ThemeSupportsWidget(context, this, disp->mAppearance)) {
       nsIntMargin margin(0, 0, 0, 0);
       gTheme->GetWidgetBorder(context->DeviceContext(), this,
-                              disp->UsedAppearance(), &margin);
+                              disp->mAppearance, &margin);
       aMargin.top = context->DevPixelsToAppUnits(margin.top);
       aMargin.right = context->DevPixelsToAppUnits(margin.right);
       aMargin.bottom = context->DevPixelsToAppUnits(margin.bottom);
       aMargin.left = context->DevPixelsToAppUnits(margin.left);
       return NS_OK;
     }
   }
 
@@ -319,25 +319,25 @@ nsBox::GetXULBorder(nsMargin& aMargin)
 
   return NS_OK;
 }
 
 nsresult
 nsBox::GetXULPadding(nsMargin& aMargin)
 {
   const nsStyleDisplay *disp = StyleDisplay();
-  if (disp->UsedAppearance() && gTheme) {
+  if (disp->mAppearance && gTheme) {
     // Go to the theme for the padding.
     nsPresContext *context = PresContext();
-    if (gTheme->ThemeSupportsWidget(context, this, disp->UsedAppearance())) {
+    if (gTheme->ThemeSupportsWidget(context, this, disp->mAppearance)) {
       nsIntMargin margin(0, 0, 0, 0);
       bool useThemePadding;
 
       useThemePadding = gTheme->GetWidgetPadding(context->DeviceContext(),
-                                                 this, disp->UsedAppearance(),
+                                                 this, disp->mAppearance,
                                                  &margin);
       if (useThemePadding) {
         aMargin.top = context->DevPixelsToAppUnits(margin.top);
         aMargin.right = context->DevPixelsToAppUnits(margin.right);
         aMargin.bottom = context->DevPixelsToAppUnits(margin.bottom);
         aMargin.left = context->DevPixelsToAppUnits(margin.left);
         return NS_OK;
       }
@@ -665,22 +665,22 @@ nsIFrame::AddXULMinSize(nsBoxLayoutState
 {
     aWidthSet = false;
     aHeightSet = false;
 
     bool canOverride = true;
 
     // See if a native theme wants to supply a minimum size.
     const nsStyleDisplay* display = aBox->StyleDisplay();
-    if (display->UsedAppearance()) {
+    if (display->mAppearance) {
       nsITheme *theme = aState.PresContext()->GetTheme();
-      if (theme && theme->ThemeSupportsWidget(aState.PresContext(), aBox, display->UsedAppearance())) {
+      if (theme && theme->ThemeSupportsWidget(aState.PresContext(), aBox, display->mAppearance)) {
         LayoutDeviceIntSize size;
         theme->GetMinimumWidgetSize(aState.PresContext(), aBox,
-                                    display->UsedAppearance(), &size, &canOverride);
+                                    display->mAppearance, &size, &canOverride);
         if (size.width) {
           aSize.width = aState.PresContext()->DevPixelsToAppUnits(size.width);
           aWidthSet = true;
         }
         if (size.height) {
           aSize.height = aState.PresContext()->DevPixelsToAppUnits(size.height);
           aHeightSet = true;
         }
--- a/layout/xul/nsBoxFrame.cpp
+++ b/layout/xul/nsBoxFrame.cpp
@@ -1321,17 +1321,17 @@ nsBoxFrame::BuildDisplayList(nsDisplayLi
   if (GetContent()->IsXULElement()) {
     // forcelayer is only supported on XUL elements with box layout
     if (GetContent()->HasAttr(kNameSpaceID_None, nsGkAtoms::layer)) {
       forceLayer = true;
     }
     // 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->UsedAppearance() == NS_THEME_WIN_EXCLUDE_GLASS) {
+    if (styles && styles->mAppearance == NS_THEME_WIN_EXCLUDE_GLASS) {
       aBuilder->AddWindowExcludeGlassRegion(
           nsRect(aBuilder->ToReferenceFrame(this), GetSize()));
     }
   }
 
   nsDisplayListCollection tempLists;
   const nsDisplayListSet& destination = forceLayer ? tempLists : aLists;
 
--- a/layout/xul/nsImageBoxFrame.cpp
+++ b/layout/xul/nsImageBoxFrame.cpp
@@ -255,17 +255,17 @@ nsImageBoxFrame::UpdateImage()
                                                         mImageRequest,
                                                         &mRequestRegistered);
         }
       }
     }
   } else {
     // Only get the list-style-image if we aren't being drawn
     // by a native theme.
-    uint8_t appearance = StyleDisplay()->UsedAppearance();
+    uint8_t appearance = StyleDisplay()->mAppearance;
     if (!(appearance && nsBox::gTheme &&
           nsBox::gTheme->ThemeSupportsWidget(nullptr, this, appearance))) {
       // get the list-style-image
       imgRequestProxy *styleRequest = StyleList()->GetListStyleImage();
       if (styleRequest) {
         styleRequest->Clone(mListener, getter_AddRefs(mImageRequest));
       }
     }
@@ -527,18 +527,18 @@ nsImageBoxFrame::DidSetStyleContext(nsSt
   const nsStyleList* myList = StyleList();
   mSubRect = myList->mImageRegion; // before |mSuppressStyleCheck| test!
 
   if (mUseSrcAttr || mSuppressStyleCheck)
     return; // No more work required, since the image isn't specified by style.
 
   // If we're using a native theme implementation, we shouldn't draw anything.
   const nsStyleDisplay* disp = StyleDisplay();
-  if (disp->UsedAppearance() && nsBox::gTheme &&
-      nsBox::gTheme->ThemeSupportsWidget(nullptr, this, disp->UsedAppearance()))
+  if (disp->mAppearance && nsBox::gTheme &&
+      nsBox::gTheme->ThemeSupportsWidget(nullptr, this, disp->mAppearance))
     return;
 
   // If list-style-image changes, we have a new image.
   nsCOMPtr<nsIURI> oldURI, newURI;
   if (mImageRequest)
     mImageRequest->GetURI(getter_AddRefs(oldURI));
   if (myList->GetListStyleImage())
     myList->GetListStyleImage()->GetURI(getter_AddRefs(newURI));
--- a/layout/xul/nsMenuPopupFrame.cpp
+++ b/layout/xul/nsMenuPopupFrame.cpp
@@ -363,17 +363,17 @@ nsMenuPopupFrame::CreateWidgetForView(ns
 
 uint8_t
 nsMenuPopupFrame::GetShadowStyle()
 {
   uint8_t shadow = StyleUIReset()->mWindowShadow;
   if (shadow != NS_STYLE_WINDOW_SHADOW_DEFAULT)
     return shadow;
 
-  switch (StyleDisplay()->UsedAppearance()) {
+  switch (StyleDisplay()->mAppearance) {
     case NS_THEME_TOOLTIP:
       return NS_STYLE_WINDOW_SHADOW_TOOLTIP;
     case NS_THEME_MENUPOPUP:
       return NS_STYLE_WINDOW_SHADOW_MENU;
   }
   return NS_STYLE_WINDOW_SHADOW_DEFAULT;
 }
 
--- a/layout/xul/reftest/reftest.list
+++ b/layout/xul/reftest/reftest.list
@@ -1,6 +1,6 @@
-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
+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
 == 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
 == textbox-text-transform.xul textbox-text-transform-ref.xul
--- a/layout/xul/test/test_bug563416.html
+++ b/layout/xul/test/test_bug563416.html
@@ -5,17 +5,17 @@ https://bugzilla.mozilla.org/show_bug.cg
 -->
 <head>
   <title>Test for Bug 563416</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </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; 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; height: 0px; padding: 0px;" cols="20" rows="10">hsldkjvmshlkkajskdlfksdjflskdjflskdjflskdjflskdjfddddddddd</textarea>'></iframe></p>
 <div id="content" style="display: none">
   
 </div>
 <pre id="test">
 <script type="application/javascript">
 
 /** Test for Bug 563416 **/
 
--- a/layout/xul/test/test_windowminmaxsize.xul
+++ b/layout/xul/test/test_windowminmaxsize.xul
@@ -6,32 +6,32 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <script type="application/javascript"
           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
   <script type="application/javascript"
           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; appearance: none; margin: 0; border: 0; padding: 0;">
+       align="start" pack="start" style="-moz-appearance: none; margin: 0; border: 0; padding: 0;">
   <resizer id="popupresizer" dir="bottomright" flex="1" width="60" height="60"
-           style="-moz-appearance: none; appearance: none; margin: 0; border: 0; padding: 0;"/>
+           style="-moz-appearance: none; margin: 0; border: 0; padding: 0;"/>
 </panel>
 
 <script>
 <![CDATA[
 
 SimpleTest.waitForExplicitFinish();
 
 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; 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>";
+             "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>";
 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.
 // note, win8 has a minimum inner window size of around 122 pixels. Don't go below this on min-width tests.
 var tests = [
   { testname: "unconstrained",
     style: "", attrs: "",
     width: 150, height: 150 },
--- a/layout/xul/tree/nsTreeBodyFrame.cpp
+++ b/layout/xul/tree/nsTreeBodyFrame.cpp
@@ -2078,26 +2078,26 @@ nsTreeBodyFrame::GetTwistyRect(int32_t a
   if (aImageRect.width > aTwistyRect.width)
     aImageRect.width = aTwistyRect.width;
   else
     aTwistyRect.width = aImageRect.width;
 
   bool useTheme = false;
   nsITheme *theme = nullptr;
   const nsStyleDisplay* twistyDisplayData = aTwistyContext->StyleDisplay();
-  if (twistyDisplayData->UsedAppearance()) {
+  if (twistyDisplayData->mAppearance) {
     theme = aPresContext->GetTheme();
-    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, twistyDisplayData->UsedAppearance()))
+    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, twistyDisplayData->mAppearance))
       useTheme = true;
   }
 
   if (useTheme) {
     LayoutDeviceIntSize minTwistySizePx;
     bool canOverride = true;
-    theme->GetMinimumWidgetSize(aPresContext, this, twistyDisplayData->UsedAppearance(),
+    theme->GetMinimumWidgetSize(aPresContext, this, twistyDisplayData->mAppearance,
                                 &minTwistySizePx, &canOverride);
 
     // GMWS() returns size in pixels, we need to convert it back to app units
     nsSize minTwistySize;
     minTwistySize.width = aPresContext->DevPixelsToAppUnits(minTwistySizePx.width);
     minTwistySize.height = aPresContext->DevPixelsToAppUnits(minTwistySizePx.height);
 
     if (aTwistyRect.width < minTwistySize.width || !canOverride)
@@ -2858,31 +2858,31 @@ nsTreeBodyFrame::BuildDisplayList(nsDisp
   nsCOMPtr<nsITreeSelection> selection;
   mView->GetSelection(getter_AddRefs(selection));
   nsITheme* theme = PresContext()->GetTheme();
   // On Mac, we support native theming of selected rows. On 10.10 and higher,
   // this means applying vibrancy which require us to register the theme
   // 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()->UsedAppearance() == NS_THEME_MAC_SOURCE_LIST) {
+      treeFrame->StyleDisplay()->mAppearance == 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);
     for (auto i = FirstVisibleRow(); i < end; i++) {
       bool isSelected;
       selection->IsSelected(i, &isSelected);
       if (isSelected) {
         PrefillPropertyArray(i, nullptr);
         nsAutoString properties;
         mView->GetRowProperties(i, properties);
         nsTreeUtils::TokenizeProperties(properties, mScratchArray);
         nsStyleContext* rowContext =
           GetPseudoStyleContext(nsCSSAnonBoxes::moztreerow);
-        auto appearance = rowContext->StyleDisplay()->UsedAppearance();
+        auto appearance = rowContext->StyleDisplay()->mAppearance;
         if (appearance) {
           if (theme->ThemeSupportsWidget(PresContext(), this, appearance)) {
             nsITheme::ThemeGeometryType type =
               theme->ThemeGeometryTypeForWidget(this, appearance);
             if (type != nsITheme::eThemeGeometryTypeUnknown) {
               nsRect rowRect(mInnerBox.x, mInnerBox.y + mRowHeight *
                              (i - FirstVisibleRow()), mInnerBox.width,
                              mRowHeight);
@@ -3054,17 +3054,17 @@ nsTreeBodyFrame::PaintRow(int32_t       
   nsMargin rowMargin;
   rowContext->StyleMargin()->GetMargin(rowMargin);
   rowRect.Deflate(rowMargin);
 
   DrawResult result = DrawResult::SUCCESS;
 
   // Paint our borders and background for our row rect.
   nsITheme* theme = nullptr;
-  auto appearance = rowContext->StyleDisplay()->UsedAppearance();
+  auto appearance = rowContext->StyleDisplay()->mAppearance;
   if (appearance) {
     theme = aPresContext->GetTheme();
   }
   gfxContext* ctx = aRenderingContext.ThebesContext();
   // Save the current font smoothing background color in case we change it.
   Color originalColor(ctx->GetFontSmoothingBackgroundColor());
   if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, appearance)) {
     nscolor color;
@@ -3197,30 +3197,30 @@ nsTreeBodyFrame::PaintSeparator(int32_t 
                                 nsRenderingContext& aRenderingContext,
                                 const nsRect&        aDirtyRect)
 {
   // Resolve style for the separator.
   nsStyleContext* separatorContext = GetPseudoStyleContext(nsCSSAnonBoxes::moztreeseparator);
   bool useTheme = false;
   nsITheme *theme = nullptr;
   const nsStyleDisplay* displayData = separatorContext->StyleDisplay();
-  if ( displayData->UsedAppearance() ) {
+  if ( displayData->mAppearance ) {
     theme = aPresContext->GetTheme();
-    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, displayData->UsedAppearance()))
+    if (theme && theme->ThemeSupportsWidget(aPresContext, nullptr, displayData->mAppearance))
       useTheme = true;
   }
 
   DrawResult result = DrawResult::SUCCESS;
 
   // use -moz-appearance if provided.
   if (useTheme) {
     nsRect dirty;
     dirty.IntersectRect(aSeparatorRect, aDirtyRect);
     theme->DrawWidgetBackground(&aRende