--- a/browser/base/content/test/general/browser_parsable_css.js
+++ b/browser/base/content/test/general/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/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/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -83,17 +83,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);
   background-position: 100% 50%;
   background-repeat: no-repeat;
   background-size: 7px;
   border: none;
   color: var(--viewport-color);
   height: 100%;

--- 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
@@ -183,17 +183,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.inc.css
+++ b/devtools/client/themes/commandline.inc.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 {
@@ -117,17 +117,17 @@ html|*#gcli-output-frame {
   border-width: 0;
   background-color: transparent;
 }
 
 #gcli-output,
 #gcli-tooltip {
   border-width: 0;
   background-color: transparent;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
 }
 
 .gclitoolbar-input-node,
 .gclitoolbar-complete-node {
   margin: 0;
   -moz-box-align: center;
   padding-top: 0;
   padding-bottom: 0;
@@ -135,17 +135,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%;
@@ -238,17 +238,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;
@@ -387,17 +387,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
@@ -13,14 +13,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/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -161,17 +161,17 @@
   display: flex;
   flex: none;
 }
 
 .requests-list-header-button {
   display: flex;
   align-items: center;
   flex: auto;
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   background-color: transparent;
   border-image: linear-gradient(transparent 15%,
                                 var(--theme-splitter-color) 15%,
                                 var(--theme-splitter-color) 85%,
                                 transparent 85%) 1 1;
   border-style: solid;
   border-width: 0;
   border-inline-start-width: 1px;

--- a/devtools/client/themes/responsivedesign.inc.css
+++ b/devtools/client/themes/responsivedesign.inc.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
@@ -34,17 +34,17 @@
   --icon-filter: none;
   --checked-icon-filter: none;
 }
 
 
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   padding: 0;
   border-width: 0;
   border-bottom-width: 1px;
   border-style: solid;
   height: 24px;
   line-height: 24px;
   box-sizing: border-box;
 }
@@ -80,23 +80,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);
@@ -105,17 +105,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;
 }
@@ -125,17 +125,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;
@@ -186,17 +186,17 @@
 
 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-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
@@ -1712,30 +1712,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",
@@ -2796,17 +2782,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",
@@ -3722,30 +3707,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",
@@ -9340,24 +9311,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"
   ],
   [
@@ -9668,20 +9631,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
@@ -296,21 +296,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
@@ -350,17 +350,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
 asserts-if(stylo,1) load 824862.html # bug 1324704
 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
@@ -3724,17 +3724,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) && !defined(MOZ_WIDGET_GONK)
   // 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
@@ -5067,17 +5067,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);
@@ -6985,20 +6985,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,14 +1,14 @@
 <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">س</textarea>
+    <textarea onfocus="done()" style="-moz-appearance: none">س</textarea>
     <script>
       var textarea = document.querySelector("textarea");
       function start() {
         textarea.focus();
       }
       function done() {
         document.documentElement.removeAttribute("class");
       }

--- 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,11 +1,11 @@
 <html class="reftest-wait">
   <body onload="start()">
-    <textarea dir="rtl" onfocus="done()" style="-moz-appearance: none; appearance: none">s</textarea>
+    <textarea dir="rtl" onfocus="done()" style="-moz-appearance: none">s</textarea>
     <script>
       var textarea = document.querySelector("textarea");
       function start() {
         textarea.focus();
       }
       function done() {
         document.documentElement.removeAttribute("class");
       }

--- 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 **/