Bug 1333482 part 4 - [css-ui] Amend all uses of '-moz-appearance:none' in tests to also specify 'appearance:none' (automated change). r=dholbert
authorMats Palmgren <mats@mozilla.com>
Thu, 23 Mar 2017 23:13:18 +0100
changeset 349336 62474fd399f8bde1e09ed3787845326b076bd5db
parent 349335 af3341f277444d3f3057f3f3eb0b49c38c27a287
child 349337 2a92996b50fe88986dd7ed2e6936a6f5f26e2c18
push id31550
push usercbook@mozilla.com
push dateFri, 24 Mar 2017 13:22:27 +0000
treeherdermozilla-central@473e0b201761 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1333482
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 1333482 part 4 - [css-ui] Amend all uses of '-moz-appearance:none' in tests to also specify 'appearance:none' (automated change). r=dholbert MozReview-Commit-ID: BNOR5VRpV2E
browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
devtools/client/sourceeditor/test/browser_css_getInfo.js
devtools/client/sourceeditor/test/css_statemachine_testcases.css
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
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/test/bug665540_window.xul
layout/forms/test/test_bug476308.html
layout/forms/test/test_textarea_resize.html
layout/generic/test/test_selection_preventDefault.html
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/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/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/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/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/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/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/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/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/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html
layout/reftests/writing-mode/ua-style-sheet-input-number-1.html
layout/style/test/test_pseudoelement_state.html
layout/xul/crashtests/189814-1.xul
layout/xul/test/test_bug563416.html
layout/xul/test/test_windowminmaxsize.xul
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/themes/osx/reftests/baseline.xul
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
--- 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; border: 0; margin: 0;");
-  panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  button.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
+  panel.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
 
 function checkTreeCoords()
 {
   var tree = $("tree");
   var treechildren = $("treechildren");
   tree.currentIndex = 0;
--- 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;",
+  "  -moz-appearance: none; appearance: none;",
   "           padding:4px 3px;border-bottom-width: 1px;",
   "  border-bottom-style: solid;",
   "}",
   "",
   "#devtools-menu.devtools-menulist,",
   ".devtools-toolbarbutton#devtools-menu {",
-  "  -moz-appearance: none;",
+  "  -moz-appearance: none; appearance: none;",
   "  -moz-box-align: center;",
   "  min-width: 78px;",
   "  min-height: 22px;",
   "  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;
+  -moz-appearance: none; appearance: none;
            padding:4px 3px;border-bottom-width: 1px;
   border-bottom-style: solid;
 }
 
 #devtools-menu.devtools-menulist,
 .devtools-toolbarbutton#devtools-menu {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
   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;
+  -moz-appearance: none; 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/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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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"></textarea>
+  <textarea id="ta" rows="5" cols="20" style="-moz-appearance:none; appearance: none"></textarea>
   <div id="ce" contentEditable="true" style="height: 5em;"></div>
 </div>
 <div id="content" style="display: none">
 </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;">
+           style="-moz-appearance: none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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;">
+           style="-moz-appearance: none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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;">
+           style="-moz-appearance: none; 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;">
+           style="-moz-appearance: none; 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;'>this is a \n long text</textarea>
-  <input size='5' value="this is a very long text" style='-moz-appearance:none;'>
+  <textarea rows='1' cols='5' style='-moz-appearance:none; appearance: none;'>this is a \n long text</textarea>
+  <input size='5' value="this is a very long text" style='-moz-appearance:none; appearance: none;'>
 </div>
 <pre id="test">
 </pre>
 </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; min-width:10px; min-height:10px; } %23elem:focus { outline: 2px solid red; } %23elem:-moz-focusring { outline: 1px solid blue; }&lt;/style&gt;&lt;div id='container'&gt;&lt;/html&gt;"/>
+<iframe id="child" src="data:text/html,&lt;html&gt;&lt;style&gt;* { outline: none; -moz-appearance: none; appearance: none; min-width:10px; min-height:10px; } %23elem:focus { outline: 2px solid red; } %23elem:-moz-focusring { outline: 1px solid blue; }&lt;/style&gt;&lt;div id='container'&gt;&lt;/html&gt;"/>
 
 <body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
 
 </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;">
-      <menupopup style="margin: 0; padding: 0; border: 1px black solid; -moz-appearance: none;"
+          style="margin: 0; padding: 0; border: 2px black solid; -moz-appearance: none; appearance: none;">
+      <menupopup style="margin: 0; padding: 0; border: 1px black solid; -moz-appearance: none; appearance: none;"
                  onpopupshown="testElements('outermenu', doneTests)">
         <menuitem label="Document"/>
         <menuitem id="innermenuitem" style="margin: 2px; padding: 3px;" label="Page"/>
       </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"
+          style="height: 100px; width: 300px; -moz-appearance: none; 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 !important;
+  -moz-appearance: none; appearance: none !important;
   background-color: white !important;
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 html|input, html|textarea {
   font: inherit;
 }
--- 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">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; 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">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; 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">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; 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">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; 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">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; 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">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; 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">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; 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">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; 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">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; 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">
+<textarea id="t" rows="4" style="-moz-appearance: none; 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"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; 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"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; 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">
+    <input type=text style="-moz-appearance: none; 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">
+    <input type=text style="-moz-appearance: none; 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">ab
+<textarea spellcheck="false" style="-moz-appearance: none; 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"></textarea>
+<textarea maxlength="3" spellcheck="false" style="-moz-appearance: none; 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" spellcheck="false"
+ <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeydown="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
   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" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeypress="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
   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" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeyup="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");
   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" spellcheck="false"
+  <textarea style="height: 200px; display: block; -moz-appearance: none; 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"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; 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"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; 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">ab</textarea>
+<textarea spellcheck="false" style="-moz-appearance: none; 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"></textarea>
+<textarea spellcheck="false" style="-moz-appearance: none; 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">س</textarea>
+    <textarea onfocus="done()" style="-moz-appearance: none; 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"></textarea>
+    <textarea onfocus="typeIntoMe()" style="-moz-appearance: none; 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">s</textarea>
+    <textarea dir="rtl" onfocus="done()" style="-moz-appearance: none; 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"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" style="-moz-appearance: none; 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">אב
+    <textarea rows="3" onfocus="done()" spellcheck="false" style="-moz-appearance: none; 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"></textarea>
+    <textarea rows="3" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none; 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">ab
+    <textarea dir="rtl" onfocus="done()" spellcheck="false" style="-moz-appearance: none; 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"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none; 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;">
+        style="background:black; -moz-appearance:none; appearance: none;">
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script>
 
   <stack style="height:300px; width:200px;">
     <!-- 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"> <!-- bug 1204897 workaround -->
+       style="-moz-appearance: none; 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"> <!-- bug 1234659 workaround -->
+       style="-moz-appearance: none; 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">
+<input type="text" id="testInput" style="-moz-appearance:none; 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">
+      <textarea id="testInput" dir="rtl" cols="80" rows="25" style="-moz-appearance:none; appearance: none">
 
 == &#x0632;&#x0627;&#x062F;&#x0631;&#x0648;&#x0632;&#x0647;&#x0627; ==
 * [[&#x06F1;&#x06F3;&#x06F0;&#x06F7;]]</textarea>
     </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;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   padding: 0;
   border-style:none;
 }
 button::before {
   position: absolute;
   content: "::before";
   width: 10px;
--- 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">
+    <select id="select" style="-moz-appearance:none; 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; width: 100px; height: 60px; background-color: red; border: 2px solid green; box-shadow: 30px 0px 3.5px black; position: absolute; top: 300px; left: 20px;"
+<button style="-moz-appearance: none; appearance: none; width: 100px; height: 60px; background-color: red; border: 2px solid green; box-shadow: 30px 0px 3.5px black; position: absolute; top: 300px; left: 20px;"
         id="button1">1</button>
 
 <br />
 <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; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea>
+<textarea id="textarea" style="-moz-appearance: none; appearance: none; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea>
 
 <pre id="test">
 <script type="application/javascript">
 
 /** Test for textbox resizing **/
 SimpleTest.waitForExplicitFinish();
 addLoadEvent(() => SimpleTest.executeSoon(doTheTest));
 
--- 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;
+    -moz-appearance: none; appearance: none;
   }
 </style>
 
 </head>
 <body>
 <input id="input" type="text" value="iiiiiiiii iiiiiiiii iiiiiiiii">
 <div id="fixedDiv1" class="testingDiv">
 dddddd dddddd dddddd
--- 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;
+-moz-appearance: none; 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;
+-moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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; }
+ .none { -moz-appearance: none; 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; }
+ .none { -moz-appearance: none; 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; }
+ .none { -moz-appearance: none; 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; }
+ .none { -moz-appearance: none; 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 }
+* { -moz-appearance: none; 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 }
+* { -moz-appearance: none; 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 }
+* { -moz-appearance: none; 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 }
+* { -moz-appearance: none; 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; }
+* { -moz-appearance: none; 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; }
+* { -moz-appearance: none; 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; }
+* { -moz-appearance: none; 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">
-<input type="radio" style="-moz-appearance:none">
-<input type="radio" style="-moz-appearance:none">
+<input type="radio" style="-moz-appearance:none; appearance: none">
+<input type="radio" style="-moz-appearance:none; appearance: none">
+<input type="radio" style="-moz-appearance:none; appearance: none">
--- a/layout/reftests/bugs/373381-2.html
+++ b/layout/reftests/bugs/373381-2.html
@@ -1,3 +1,3 @@
-<input type="radio" style="width: auto; -moz-appearance: none">
-<input type="radio" style="height: auto; -moz-appearance: none">
-<input type="radio" style="height: auto; width: auto; -moz-appearance: none">
+<input type="radio" style="width: auto; -moz-appearance: none; appearance: none">
+<input type="radio" style="height: auto; -moz-appearance: none; appearance: none">
+<input type="radio" style="height: auto; width: auto; -moz-appearance: none; appearance: none">
--- a/layout/reftests/bugs/373381-4-ref.html
+++ b/layout/reftests/bugs/373381-4-ref.html
@@ -1,3 +1,3 @@
-<input type="checkbox" style="-moz-appearance:none">
-<input type="checkbox" style="-moz-appearance:none">
-<input type="checkbox" style="-moz-appearance:none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
--- a/layout/reftests/bugs/373381-4.html
+++ b/layout/reftests/bugs/373381-4.html
@@ -1,3 +1,3 @@
-<input type="checkbox" style="width: auto; -moz-appearance: none">
-<input type="checkbox" style="height: auto; -moz-appearance: none">
-<input type="checkbox" style="height: auto; width: auto; -moz-appearance: none">
+<input type="checkbox" style="width: auto; -moz-appearance: none; appearance: none">
+<input type="checkbox" style="height: auto; -moz-appearance: none; appearance: none">
+<input type="checkbox" style="height: auto; width: auto; -moz-appearance: none; appearance: none">
--- 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; margin: 2px 0 2px 0}
+    select.unthemed { -moz-appearance: none; 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; margin: 2px 0 2px 0}
+    select.unthemed { -moz-appearance: none; 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; border: medium solid; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px;"/>
+<button label="Button" style="min-width: 0; -moz-appearance: none; appearance: none; border: medium solid; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px;"/>
 <box flex="1" style="background: green" />
 </hbox>
 
 </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; border-width: 0; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px; border-style: solid; border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 fill;"/>
+<button label="Button" style="min-width: 0; -moz-appearance: none; appearance: none; border-width: 0; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px; border-style: solid; border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 fill;"/>
 <box flex="1" style="background: green" />
 </hbox>
 
 </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;
+        -moz-appearance: none; appearance: none;
         background-color: blue;
     }
     #prog .progress-bar {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         border-radius: 3px 3px;
         background-color: red;
     }
 </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;
+        -moz-appearance: none; appearance: none;
         background-color: blue;
     }
     #prog .progress-bar {
-        -moz-appearance: none;
+        -moz-appearance: none; appearance: none;
         border-radius: 3px 3px;
         background-color: red;
     }
 </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; width: 0; height: 0; font: inherit; padding: 0">
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 0; height: 0; font: inherit; padding: 0">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </div>
--- a/layout/reftests/bugs/491180-1.html
+++ b/layout/reftests/bugs/491180-1.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <html>
-  <button style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; color: black">
+  <button style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 0; height: 0; font: inherit; color: black">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </button>
--- a/layout/reftests/bugs/491180-2-ref.html
+++ b/layout/reftests/bugs/491180-2-ref.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
 <html>
-  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; padding: 0; white-space: pre; overflow: hidden">Some text</div>
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 20px; font: inherit; padding: 0; white-space: pre; overflow: hidden">Some text</div>
   </div>
--- a/layout/reftests/bugs/491180-2.html
+++ b/layout/reftests/bugs/491180-2.html
@@ -1,3 +1,3 @@
 <!DOCTYPE html>
 <html>
-  <input type="button" style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; color: black" value="Some text">
+  <input type="button" style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; appearance: none; width: 20px; font: inherit; color: black" value="Some text">
--- 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+        -moz-appearance: none; 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;
+        -moz-appearance: none; 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;
+        -moz-appearance: none; 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;
+        -moz-appearance: none; 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; border: none; background-color: transparent;
+  height: 100px; -moz-appearance: none; 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; border: none; background-color: transparent; }
+tree { height: 100px; -moz-appearance: none; appearance: none; border: none; background-color: transparent; }
 treecol, treecolpicker { visibility: hidden; }
 treechildren::-moz-tree-cell-text { opacity: 0; }
 "?>
 <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; overflow-clip-box:padding-box;
+      width: 100px; padding:50px; -moz-appearance:none; appearance: none; overflow-clip-box:padding-box;
       border: 3px solid black;
       background-color: white;
     }
     textarea, #textarea {
-      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:padding-box;
+      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; appearance: none; overflow-clip-box:padding-box;
       border: 3px solid black;
     }
     #textarea { word-break: break-all; font:14px DejaVuSansMono!important; }
 
 
 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; overflow-clip-box:content-box;
+      width: 100px; padding:50px; -moz-appearance:none; appearance: none; overflow-clip-box:content-box;
       border: 3px solid black;
       background-color: white;
     }
     textarea {
-      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; overflow-clip-box:content-box;
+      width: 160px; height:110px; padding:40px; overflow:scroll; -moz-appearance:none; appearance: none; overflow-clip-box:content-box;
       border: 3px solid black;font:14px DejaVuSansMono!important;
     }
 
 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; appearance: none;
   color: -moz-FieldText;
   background-color: red;
 }
 
 input:placeholder-shown.shown,
 input.shown-ref {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: green;
   background-color: #c7c7c7;
   font-style: italic;
   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;
+  -moz-appearance: none; appearance: none;
   color: -moz-FieldText;
   background-color: red;
 }
 
 textarea:placeholder-shown.shown,
 textarea.shown-ref {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: green;
   background-color: #c7c7c7;
   font-style: italic;
   border: 2px solid green;
   height: 200px;
   width: 200px;
 }
 
--- 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;
+    -moz-appearance: none; 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;
+    -moz-appearance: none; 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; background: gray", so they
+# on Android, despite their "-moz-appearance: none; appearance: none; background: gray", so they
 # don't quite match the reference case's normal <div>. That's why they're fuzzy.
 fuzzy-if(Android,125,20) == percent-height-child.html percent-height-child-ref.html
 fuzzy-if(Android,125,20) == percent-width-child.html  percent-width-child-ref.html
 
 == 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;
+    -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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; appearance: none;
+     -moz-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" checked>
+<input type="checkbox" style="-moz-appearance:none; 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;">
+<input type="checkbox" checked style="-moz-appearance: none; 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;"><script>document.getElementById("s").indeterminate = true;</script>
+<input type="checkbox" id="s" checked style="-moz-appearance: none; appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
--- 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;">
+<input type="checkbox" style="-moz-appearance: none; 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;"><script>document.getElementById("s").indeterminate = true;</script>
+<input type="checkbox" id="s" style="-moz-appearance: none; appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
--- a/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
+++ b/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
@@ -1,2 +1,2 @@
 <!doctype html>
-<input type="checkbox" style="-moz-appearance:none">
+<input type="checkbox" style="-moz-appearance:none; appearance: none">
--- a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
+++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <input type="checkbox" style="-moz-appearance:none;">
+    <input type="checkbox" style="-moz-appearance:none; appearance: none;">
   </body>
 </html>
--- 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;">
+    <input type="time" id="i" style="-moz-appearance:none; 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;">
+    <input type="text" style="-moz-appearance:none; 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;">
+    <input type="time" style="-moz-appearance:none; 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;">
+    <input type="checkbox" id="i" style="-moz-appearance:none; 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;
+  -moz-appearance: none; 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;"><br>
+    <input style="-moz-appearance:none; appearance: none;"><br>
     <input autofocus onfocus="end();"
-           style="-moz-appearance:none;">
+           style="-moz-appearance:none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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;"><br>
+           style="-moz-appearance:none; appearance: none;"><br>
     <input type='number' onfocus="end();"
-           style="-moz-appearance:none;">
+           style="-moz-appearance:none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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;">
+    <input type="checkbox" style="-moz-appearance:none; 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;">
+    <input type='number' id='i' style="-moz-appearance:none; 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;">
+    <input type="number" value="1" style="-moz-appearance:none; 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;">
+    <input type="text" value="1" style="-moz-appearance:none; 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;">
+    <input type="checkbox" style="-moz-appearance:none; 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; width:auto;">
+    <input type="text" style="-moz-appearance:none; appearance: none; width:auto;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
   </body>
 </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; width:auto;">
+    <input type="number" style="-moz-appearance:none; appearance: none; width:auto;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
   </body>
 </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"><!-- Workaround for bug 1223198 -->
+           style="-moz-appearance: none; appearance: none"><!-- Workaround for bug 1223198 -->
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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"><!-- Workaround for bug 1223198 -->
+           style="-moz-appearance: none; appearance: none"><!-- Workaround for bug 1223198 -->
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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;">
+    <input type="number" style="-moz-appearance:none; 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;">
+    <input type="number" style="-moz-appearance:none; 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; width:200px;">
+    <input type="text" style="-moz-appearance:none; 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; width:200px;">
+    <input type="number" style="-moz-appearance:none; 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; width:200px;">
+    <input type="text" style="-moz-appearance:none; appearance: none; width:200px;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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; width:200px;" value="1">
+    <input type="text" style="-moz-appearance:none; appearance: none; width:200px;" value="1">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
   </body>
 </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; width:200px;" value="1">
+    <input type="number" style="-moz-appearance:none; appearance: none; width:200px;" value="1">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
   </body>
 </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; height:200px;" value="123">
+    <input type="text" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
   </body>
 </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; height:200px;" value="123">
+    <input type="number" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
   </body>
 </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; height:200px;" value="123">
+    <input type="text" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
   </body>
 </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; height:200px;" value="123">
+    <input type="number" style="-moz-appearance:none; appearance: none; height:200px;" value="123">
     <!-- div to cover spin box area -->
     <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
   </body>
 </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; width:200px;">
+    <input type="number" style="-moz-appearance:none; appearance: none; width:200px;">
     <!-- div to cover spin box area -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>
 </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;                                                           
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;">
+    <input type="number" style="-moz-appearance:none; 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;">
+    <input type='checkbox' id='i' style="-moz-appearance:none; 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" checked>
+<input type="radio" style="-moz-appearance:none; 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">
+<input type="radio" style="-moz-appearance:none; 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">
+    <input type=range value=75 style="-moz-appearance:none; 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;">
+    <input type="range" style="-moz-appearance:none; 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;" value=90 min=20 max=120>
+    <input type='range' style="-moz-appearance:none; 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;">
+    <input type='range' value=30 style="-moz-appearance:none; 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; direction:rtl;">
+    <input type='range' value=70 style="-moz-appearance:none; 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;">
+    <input type="checkbox" style="-moz-appearance:none; 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;">
+    <input type='range' id='i' style="-moz-appearance:none; 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;">
+    <input type="range" style="-moz-appearance:none; 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;">
+    <input type="text" style="-moz-appearance:none; 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;">
+    <input type="text" value="50" style="-moz-appearance:none; 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;">
+    <input type="checkbox" style="-moz-appearance:none; 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;">
+    <input type="range" value=70 style="-moz-appearance:none; 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;" value=90 min=20 max=120>
+    <input type='range' style="-moz-appearance:none; 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'>
+    <input type=range id='i' value=100 step=25 style='-moz-appearance:none; 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'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none; 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;">
+    <input type="range" style="-moz-appearance:none; 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;">
+    <input type='checkbox' id='i' style="-moz-appearance:none; 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'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none; 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'>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none; 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: -moz-linear-gradient(top, #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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; appearance: none;
 }
 
 meter {
   background: grey;
 }
 
 meter::-moz-meter-bar {
   background: green;
--- 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; */
+  /* Default style in case of there is -moz-appearance: none; appearance: none; */
   border: 2px solid;
   -moz-border-top-colors: ThreeDShadow #e6e6e6;
   -moz-border-right-colors: ThreeDHighlight #e6e6e6;
   -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; */
+  /* Default style in case of there is -moz-appearance: none; appearance: none; */
   background-color: #0064b4;
 }
 
 progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
--- 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; }
+* { -moz-appearance:none; 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; }
+* { -moz-appearance:none; 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; }
+* { -moz-appearance:none; 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; }
+* { -moz-appearance:none; 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; }
+* { -moz-appearance:none; 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; }
+* { -moz-appearance:none; 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;
+    -moz-appearance: none; 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;
+    -moz-appearance: none; 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; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
 </body></html>
--- a/layout/reftests/forms/textarea/resize.html
+++ b/layout/reftests/forms/textarea/resize.html
@@ -1,3 +1,3 @@
 <html><body>
-<textarea style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+<textarea style="-moz-appearance: none; appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
 </body></html>
--- 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">
+<select style="-moz-appearance:none; 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">
+<select style="-moz-appearance:none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; 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;
+      -moz-appearance: none; appearance: none;
       background: inherit;
       border: none 0px;
     }
     label {
       margin-top: 0px;
       padding-top: 0px;
       margin-bottom: 0px;
       padding-bottom: 0px;
--- 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; border-width: 0">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 1px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 2px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 3px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 4px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 5px">
-<input type="button" value="Button" style="-moz-appearance: none; border-width: 6px">
-<input type="button" value="Button" style="-moz-appearance: none; border-style: dotted">
-<input type="button" value="Button" style="-moz-appearance: none; border-color: green">
-<input type="button" value="Button" style="-moz-appearance: none; background-color: transparent">
-<input type="button" value="Button" style="-moz-appearance: none; background-color: white">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 0">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 1px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 2px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 3px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 4px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 5px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-width: 6px">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-style: dotted">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; border-color: green">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; background-color: transparent">
+<input type="button" value="Button" style="-moz-appearance: none; appearance: none; background-color: white">
 
 <!-- these should let it stay native -->
 <input type="button" value="">
 <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">
+<input type="button" value="Button" style="-moz-appearance: none; 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">
+<input type="checkbox" style="-moz-appearance: none; 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; border-width: 0"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 1px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 2px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 3px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 4px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 5px"></select><br>
-<select size="1" style="-moz-appearance: none; border-width: 6px"></select><br>
-<select size="1" style="-moz-appearance: none; border-style: dotted"></select><br>
-<select size="1" style="-moz-appearance: none; border-color: green"></select><br>
-<select size="1" style="-moz-appearance: none; background-color: transparent"></select><br>
-<select size="1" style="-moz-appearance: none; background-color: white"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 0"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 1px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 2px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 3px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 4px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 5px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-width: 6px"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-style: dotted"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; border-color: green"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; background-color: transparent"></select><br>
+<select size="1" style="-moz-appearance: none; appearance: none; background-color: white"></select><br>
 </div>
 
 <!-- these should let it stay native -->
 <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"></select>
+<select size="1" style="-moz-appearance: none; 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; border-width: 0"></select>
-<select size="3" style="-moz-appearance: none; border-width: 1px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 2px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 3px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 4px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 5px"></select>
-<select size="3" style="-moz-appearance: none; border-width: 6px"></select>
-<select size="3" style="-moz-appearance: none; border-style: dotted"></select>
-<select size="3" style="-moz-appearance: none; border-color: green"></select>
-<select size="3" style="-moz-appearance: none; background-color: transparent"></select>
-<select size="3" style="-moz-appearance: none; background-color: white"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 0"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 1px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 2px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 3px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 4px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 5px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-width: 6px"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-style: dotted"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; border-color: green"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; background-color: transparent"></select>
+<select size="3" style="-moz-appearance: none; appearance: none; background-color: white"></select>
 
 <!-- these should let it stay native -->
 <select size="3" style="color: black"></select>
 <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"></select>
+<select size="3" style="-moz-appearance: none; 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">
-<input type="text" value="Not Themed" style="-moz-appearance: none">
-<input type="text" value="Not Themed" style="-moz-appearance: none">
-<input type="text" value="Not Themed" style="-moz-appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
+<input type="text" value="Not Themed" style="-moz-appearance: none; appearance: none">
--- a/layout/reftests/native-theme/radio-nonnative.html
+++ b/layout/reftests/native-theme/radio-nonnative.html
@@ -1,2 +1,2 @@
 <!DOCTYPE HTML>
-<input type="radio" style="-moz-appearance: none">
+<input type="radio" style="-moz-appearance: none; appearance: none">
--- 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; border-width: 0">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 1px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 2px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 3px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 4px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 5px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-width: 6px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-style: dotted">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-color: green">
-<input type="text" value="Text Input" style="-moz-appearance: none; background-color: transparent">
-<input type="text" value="Text Input" style="-moz-appearance: none; background-color: white">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-top-left-radius: 0px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-top-right-radius: 1px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-bottom-right-radius: 2px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-bottom-left-radius: 3px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-inline-start-width: 3px">
-<input type="text" value="Text Input" style="-moz-appearance: none; border-inline-end-width: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 0">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 1px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 2px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 4px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 5px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-width: 6px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-style: dotted">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-color: green">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; background-color: transparent">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; background-color: white">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-top-left-radius: 0px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-top-right-radius: 1px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-bottom-right-radius: 2px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-bottom-left-radius: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-inline-start-width: 3px">
+<input type="text" value="Text Input" style="-moz-appearance: none; appearance: none; border-inline-end-width: 3px">
 
 <!-- these should let it stay native -->
 <input type="text" value="">
 <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">
+<input type="text" value="" style="-moz-appearance: none; 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; border-width: 0; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 1px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 2px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 3px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 4px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 5px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-width: 6px; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-style: dotted; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; border-color: green; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; background-color: transparent; resize: none;">Textarea</textarea>
-<textarea style="-moz-appearance: none; background-color: white; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 0; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 1px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 2px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 3px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 4px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 5px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-width: 6px; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-style: dotted; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; border-color: green; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; background-color: transparent; resize: none;">Textarea</textarea>
+<textarea style="-moz-appearance: none; appearance: none; background-color: white; resize: none;">Textarea</textarea>
 
 <!-- these should let it stay native -->
 <textarea></textarea>
 <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"></textarea>
+<textarea style="-moz-appearance: none; 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'>this is a button inside of SVG</button>
+      <button style='-moz-appearance:none; appearance: none'>this is a button inside of SVG</button>
       <br/>
-      <select style='-moz-appearance:none'>
+      <select style='-moz-appearance:none; appearance: none'>
         <option>This is a menu inside of SVG</option>
         <option>a second menu option</option>
       </select>
     </div>
   </foreignObject>
 </svg>
 
 <!-- Bug 686581 -->
--- 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 }
+textarea { -moz-appearance: none; 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 }
+textarea { -moz-appearance: none; 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 }
+textarea { -moz-appearance: none; 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 }
+textarea { -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; 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; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; 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; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; 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; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; 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; width:300px; height:300px;">
+<textarea style="-moz-appearance:none; 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; }
+    input { -moz-appearance: none; 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; }
+    input { -moz-appearance: none; 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; }
+    input { -moz-appearance: none; 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; }
+    input { -moz-appearance: none; 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; }
+    input { -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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;
+  -moz-appearance: none; 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/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; }
+.a { -moz-appearance: none; 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; }
+.a { -moz-appearance: none; 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; }
+.a { -moz-appearance: none; 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; }
+.a { -moz-appearance: none; appearance: none; }
 
 .ltr input[type="color"]:-moz-system-metric(color-picker-available),
 .rtl input[type="color"]:-moz-system-metric(color-picker-available) {
   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; }
+.a { -moz-appearance: none; 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/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-number-1-ref.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test for logical properties of input type=number in the UA stylesheet</title>
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
 div { padding: 10px; }
 .a { -moz-appearance:textfield; }
-.b { -moz-appearance:none; }
+.b { -moz-appearance:none; appearance: none; }
 
 .ltr input[type="number"],
 .rtl input[type="number"] {
   width: 20ch;
 }
 
 .v-rl input[type="number"] {
   height: 20ch;
--- a/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-number-1.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test for logical properties of input type=number in the UA stylesheet</title>
 <style>
 .v-rl { writing-mode: vertical-rl; }
 .ltr, .rtl, .v-rl { border: 1px solid blue; }
 div { padding: 10px; }
 .a { -moz-appearance:textfield; }
-.b { -moz-appearance:none; }
+.b { -moz-appearance:none; appearance: none; }
 </style>
 <div class=ltr>
   <input type=number value=123><br><br>
   <input type=number value=456 class=a><br><br>
   <input type=number value=7890 class=b>
 </div>
 
 <div class=rtl dir=rtl>
--- 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; } progress::-moz-progress-bar { background: black; }',
+    common_style:           'progress { -moz-appearance: none; appearance: none; } progress::-moz-progress-bar { background: black; }',
     hover_test_style:       'progress::-moz-progress-bar:hover { background: green; }',
     hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
     active_test_style:      'progress::-moz-progress-bar:active { background: lime; }',
     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; } progress::-moz-progress-bar { background: black; }',
+    common_style:           'progress { -moz-appearance: none; appearance: none; } progress::-moz-progress-bar { background: black; }',
     hover_test_style:       'progress::-moz-progress-bar { background: green; } progress::-moz-progress-bar:hover { background: red; }',
     hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
     active_test_style:      'progress::-moz-progress-bar { background: lime; } progress::-moz-progress-bar:active { background: red; }',
     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; } input::-moz-range-thumb { background: black; }',
+    common_style:           'input { -moz-appearance: none; appearance: none; } input::-moz-range-thumb { background: black; }',
     hover_test_style:       'input::-moz-range-thumb:hover { background: green; }',
     hover_reference_style:  'input::-moz-range-thumb { background: green; }',
     active_test_style:      'input::-moz-range-thumb:active { background: lime; }',
     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; } input::-moz-range-thumb { background: black; }',
+    common_style:           'input { -moz-appearance: none; appearance: none; } input::-moz-range-thumb { background: black; }',
     hover_test_style:       'input::-moz-range-thumb { background: green; } input::-moz-range-thumb:hover { background: red; }',
     hover_reference_style:  'input::-moz-range-thumb { background: green; }',
     active_test_style:      'input::-moz-range-thumb { background: lime; } input::-moz-range-thumb:active { background: red; }',
     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; } meter::-moz-meter-bar { background: black; }',
+    common_style:           'meter { -moz-appearance: none; appearance: none; } meter::-moz-meter-bar { background: black; }',
     hover_test_style:       'meter::-moz-meter-bar:hover { background: green; }',
     hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
     active_test_style:      'meter::-moz-meter-bar:active { background: lime; }',
     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; } meter::-moz-meter-bar { background: black; }',
+    common_style:           'meter { -moz-appearance: none; appearance: none; } meter::-moz-meter-bar { background: black; }',
     hover_test_style:       'meter::-moz-meter-bar { background: green; } meter::-moz-meter-bar:hover { background: red; }',
     hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
     active_test_style:      'meter::-moz-meter-bar { background: lime; } meter::-moz-meter-bar:active { background: red; }',
     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; } input::-moz-range-thumb { background: black; }',
+    common_style:           'body input { -moz-appearance: none; appearance: none; } input::-moz-range-thumb { background: black; }',
     hover_test_style:       'body input::-moz-range-thumb:hover { background: green; }',
     hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
     active_test_style:      'body input::-moz-range-thumb:active { background: lime; }',
     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/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" to the
+  With the Classic theme, printing causes the browser to crash. adding style="-moz-appearance: none; appearance: none" to the
   thumb prevents the crash. The crash doesn't happen at all with Modern.
   </label>
   <spacer height="10"/>
     <hbox>
 
         <slider style="height: 174px; width: 24px" orient="vertical">
             <thumb/>
         </slider>
--- 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; height: 0px; padding: 0px;" cols="20" rows="10">hsldkjvmshlkkajskdlfksdjflskdjflskdjflskdjflskdjfddddddddd</textarea>'></iframe></p>
+<p id="display"><iframe id="test" src='data:text/html,<textarea style="box-sizing:content-box; -moz-appearance:none; appearance: none; height: 0px; padding: 0px;" cols="20" rows="10">hsldkjvmshlkkajskdlfksdjflskdjflskdjflskdjflskdjfddddddddd</textarea>'></iframe></p>
 <div id="content" style="display: none">
   
 </div>
 <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
@@ -8,32 +8,32 @@
   <script type="application/javascript" 
           src="chrome://mochikit/content/MochiKit/packed.js"/>
   <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; margin: 0; border: 0; padding: 0;">
+       align="start" pack="start" style="-moz-appearance: none; appearance: none; margin: 0; border: 0; padding: 0;">
   <resizer id="popupresizer" dir="bottomright" flex="1" width="60" height="60"
-           style="-moz-appearance: none; margin: 0; border: 0; padding: 0;"/>
+           style="-moz-appearance: none; appearance: none; margin: 0; border: 0; padding: 0;"/>
 </panel>
 
 <script>
 <![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; margin: 0; padding: 0; border: 0; ";
-var suffix = "><resizer dir='bottomright' flex='1' width='150' height='150' style='-moz-appearance: none; margin: 0; border: 0; padding: 0;'/></window>";
+             "align='start' pack='start' style='-moz-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; ";
+var suffix = "><resizer dir='bottomright' flex='1' width='150' height='150' style='-moz-appearance: none; appearance: none; margin: 0; border: 0; padding: 0;'/></window>";
 var titledpanel = "<panel noautohide='true' titlebar='normal' minwidth='120' minheight='140'/><label value='Test'/>";
 
 // width and height in the tests below specify the expected size of the window.
 // 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/toolkit/content/tests/chrome/test_contextmenu_list.xul
+++ b/toolkit/content/tests/chrome/test_contextmenu_list.xul
@@ -15,17 +15,17 @@
   <spacer width="5"/>
   <richlistbox id="list" context="themenu" style="padding: 0;" oncontextmenu="checkContextMenu(event)">
     <richlistitem id="item1" style="padding-top: 3px; margin: 0;"><button label="One"/></richlistitem>
     <richlistitem id="item2" height="22"><checkbox label="Checkbox"/></richlistitem>
     <richlistitem id="item3"><button label="Three"/></richlistitem>
     <richlistitem id="item4"><checkbox label="Four"/></richlistitem>
   </richlistbox>
 
-  <tree id="tree" rows="5" flex="1" context="themenu" style="-moz-appearance: none; border: 0">
+  <tree id="tree" rows="5" flex="1" context="themenu" style="-moz-appearance: none; appearance: none; border: 0">
     <treecols>
       <treecol label="Name" flex="1"/>
       <splitter class="tree-splitter"/>
       <treecol label="Moons"/>
     </treecols>
     <treechildren id="treechildren">
       <treeitem>
         <treerow>
--- a/toolkit/content/tests/chrome/test_position.xul
+++ b/toolkit/content/tests/chrome/test_position.xul
@@ -19,24 +19,24 @@
            style="overflow: hidden; margin-left: 2px; padding: 1px;">
   <deck>
     <scrollbox id="box3" orient="vertical" align="start" height="100"
                style="overflow: scroll; margin: 1px; padding: 0;">
       <vbox id="innerscroll" width="200" align="start">
         <button id="button1" label="1" width="90" maxwidth="100"
                 minheight="25" height="35" maxheight="50"
                 style="min-width: 80px; margin: 5px; border: 4px; padding: 7px;
-                       -moz-appearance: none;"/>
+                       -moz-appearance: none; appearance: none;"/>
         <menu id="menu">
-          <menupopup id="popup" style="-moz-appearance: none; margin:0; border: 0; padding: 0;"
+          <menupopup id="popup" style="-moz-appearance: none; appearance: none; margin:0; border: 0; padding: 0;"
                                 onpopupshown="menuOpened()"
                                 onpopuphidden="if (event.target == this) SimpleTest.finish()">
             <menuitem label="One"/>
             <menu id="submenu" label="Three">
-              <menupopup id="subpopup" style="-moz-appearance: none; margin:0; border: 0; padding: 0;"
+              <menupopup id="subpopup" style="-moz-appearance: none; appearance: none; margin:0; border: 0; padding: 0;"
                          onpopupshown="submenuOpened()">
                 <menuitem label="Four"/>
               </menupopup>
             </menu>
           </menupopup>
         </menu>
         <button label="2" maxwidth="100" maxheight="20" style="margin: 5px;"/>
         <button label="3" maxwidth="100" maxheight="20" style="margin: 5px;"/>
--- a/toolkit/content/tests/chrome/window_panel.xul
+++ b/toolkit/content/tests/chrome/window_panel.xul
@@ -98,18 +98,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; border: 0; margin: 0;");
-  panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  button.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
+  panel.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
 
 function checkTreeCoords()
 {
   var tree = $("tree");
   var treechildren = $("treechildren");
   tree.currentIndex = 0;
--- a/toolkit/content/tests/chrome/window_popup_anchor.xul
+++ b/toolkit/content/tests/chrome/window_popup_anchor.xul
@@ -9,17 +9,17 @@ function runTests()
 {
   frames[0].openPopup();
 }
 
 window.opener.wrappedJSObject.SimpleTest.waitForFocus(runTests, window);
 </script>
 
 <spacer height="13"/>
-<button id="outerbutton" label="Button One" style="margin-left: 6px; -moz-appearance: none;"/>
+<button id="outerbutton" label="Button One" style="margin-left: 6px; -moz-appearance: none; appearance: none;"/>
 <hbox>
   <spacer width="20"/>
   <deck>
     <vbox>
       <iframe id="frame" style="margin-left: 60px; margin-top: 10px; border-left: 17px solid red; padding-left: 0 !important; padding-top: 3px;"
               width="250" height="80" src="frame_popup_anchor.xul"/>
     </vbox>
   </deck>
--- a/toolkit/content/tests/chrome/window_tooltip.xul
+++ b/toolkit/content/tests/chrome/window_tooltip.xul
@@ -10,22 +10,22 @@
   <script type="application/javascript" src="popup_shared.js"></script>
 
 <tooltip id="thetooltip">
   <label id="label" value="This is a tooltip"/>
 </tooltip>
 
 <box id="parent" tooltiptext="Box Tooltip" style="margin: 10px">
   <button id="withtext" label="Tooltip Text" tooltiptext="Button Tooltip"
-          style="-moz-appearance: none; padding: 0;"/>
-  <button id="without" label="No Tooltip" style="-moz-appearance: none; padding: 0;"/>
+          style="-moz-appearance: none; appearance: none; padding: 0;"/>
+  <button id="without" label="No Tooltip" style="-moz-appearance: none; appearance: none; padding: 0;"/>
   <!-- remove the native theme and borders to avoid some platform
        specific sizing differences -->
   <button id="withtooltip" label="Tooltip Element" tooltip="thetooltip"
-          class="plain" style="-moz-appearance: none; padding: 0;"/>
+          class="plain" style="-moz-appearance: none; appearance: none; padding: 0;"/>
   <iframe id="childframe" type="content" width="10" height="10"
           src="http://sectest2.example.org:80/chrome/toolkit/content/tests/chrome/popup_childframe_node.xul"/>
 </box>
 
 <script class="testbody" type="application/javascript">
 <![CDATA[
 
 var gOriginalWidth = -1;
--- a/toolkit/themes/osx/reftests/baseline.xul
+++ b/toolkit/themes/osx/reftests/baseline.xul
@@ -41,17 +41,17 @@
         xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns:svg="http://www.w3.org/2000/svg"
         orient="vertical"
         class="reftest-wait"
         onload="loaded()">
 
 <html:style><![CDATA[
 window {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: white;
 }
 .regular {
   font: -moz-dialog;
 }
 .small {
   font: message-box;
 }
--- a/widget/reftests/meter-fallback-default-style-ref.html
+++ b/widget/reftests/meter-fallback-default-style-ref.html
@@ -22,18 +22,18 @@
 
       height: 100%;
       width: 100%;
 
       background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
     }
 
     div.meter-element { padding: 5px; }
-    body > div:nth-child(1)  { -moz-appearance: none; }
-    body > div:nth-child(2) > .meter-bar { -moz-appearance: none; }
+    body > div:nth-child(1)  { -moz-appearance: none; appearance: none; }
+    body > div:nth-child(2) > .meter-bar { -moz-appearance: none; appearance: none; }
     body > div:nth-child(3)  { background: red; }
     body > div:nth-child(4) > .meter-bar { background: red; }
     body > div:nth-child(5)  { border: 2px solid red; }
     body > div:nth-child(6) > .meter-bar { border: 5px solid red; width: calc(100% - 10px); }
   </style>
   <body>
     <div class="meter-element">
       <div class="meter-bar"></div>
--- a/widget/reftests/meter-fallback-default-style.html
+++ b/widget/reftests/meter-fallback-default-style.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <style>
     meter { padding: 5px }
-    body > meter:nth-child(1) { -moz-appearance: none; }
-    body > meter:nth-child(2)::-moz-meter-bar { -moz-appearance: none; }
+    body > meter:nth-child(1) { -moz-appearance: none; appearance: none; }
+    body > meter:nth-child(2)::-moz-meter-bar { -moz-appearance: none; appearance: none; }
     body > meter:nth-child(3) { background: red; }
     body > meter:nth-child(4)::-moz-meter-bar { background: red; }
     body > meter:nth-child(5) { border: 2px solid red; }
     body > meter:nth-child(6)::-moz-meter-bar { border: 5px solid red; }
   </style>
   <body>
     <meter value=1></meter>
     <meter value=1></meter>
--- a/widget/reftests/progressbar-fallback-default-style-ref.html
+++ b/widget/reftests/progressbar-fallback-default-style-ref.html
@@ -6,17 +6,17 @@
        * The purpose of this test is to not show the native style.
        * -moz-appearance: progressbar;
        */
       display: inline-block;
       height: 1em;
       width: 10em;
       vertical-align: -0.2em;
 
-      /* Default style in case of there is -moz-appearance: none; */
+      /* Default style in case of there is -moz-appearance: none; appearance: none; */
       border: 2px solid;
       -moz-border-top-colors: ThreeDShadow #e6e6e6;
       -moz-border-right-colors: ThreeDHighlight #e6e6e6;
       -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
       -moz-border-left-colors: ThreeDShadow #e6e6e6;
       background-color: #e6e6e6;
     }
 
@@ -26,23 +26,23 @@
        * -moz-appearance: progresschunk;
        */
 
       height: 100%;
       width: 100%;
 
       box-sizing: border-box;
 
-      /* Default style in case of there is -moz-appearance: none; */
+      /* Default style in case of there is -moz-appearance: none; appearance: none; */
       background-color: #0064b4;
     }
 
     div.progress-element { padding: 5px; }
-    body > div:nth-child(1)  { -moz-appearance: none; }
-    body > div:nth-child(2) > .progress-bar { -moz-appearance: none; }
+    body > div:nth-child(1)  { -moz-appearance: none; appearance: none; }
+    body > div:nth-child(2) > .progress-bar { -moz-appearance: none; appearance: none; }
     body > div:nth-child(3)  { background-color: red; }
     body > div:nth-child(4) > .progress-bar { background-color: red; }
     body > div:nth-child(5)  { border: 2px solid red; }
     body > div:nth-child(6) > .progress-bar { border: 5px solid red; }
   </style>
   <body>
     <div class="progress-element">
       <div class="progress-bar"></div>
--- a/widget/reftests/progressbar-fallback-default-style.html
+++ b/widget/reftests/progressbar-fallback-default-style.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <style>
     progress { padding: 5px }
-    body > progress:nth-child(1) { -moz-appearance: none; }
-    body > progress:nth-child(2)::-moz-progress-bar { -moz-appearance: none; }
+    body > progress:nth-child(1) { -moz-appearance: none; appearance: none; }
+    body > progress:nth-child(2)::-moz-progress-bar { -moz-appearance: none; appearance: none; }
     body > progress:nth-child(3) { background-color: red; }
     body > progress:nth-child(4)::-moz-progress-bar { background-color: red; }
     body > progress:nth-child(5) { border: 2px solid red; }
     body > progress:nth-child(6)::-moz-progress-bar { border: 5px solid red; }
   </style>
   <body>
     <progress></progress>
     <progress></progress>