Merge mozilla-central to autoland

--HG--
extra : rebase_source : 4e9c2047973e5a540496b19e456a2e7bd14715ad

browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul

@@ -91,8 +91,8 @@ function createPanel(attrs)
   button.label = "OK";
   button.width = 120;
   button.height = 40;
-  button.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  button.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
-  panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
+  panel.setAttribute("style", "-moz-appearance: none; appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
 

browser/base/content/test/static/browser_parsable_css.js

@@ -20,10 +20,6 @@ let whitelist = [
   {sourceName: /web\/viewer\.css$/i,
    errorMessage: /Unknown pseudo-class.*(fullscreen|selection)/i,
    isFromDevTools: false},
-  // PDFjs rules needed for compat with other UAs.
-  {sourceName: /web\/viewer\.css$/i,
-   errorMessage: /Unknown property.*appearance/i,
-   isFromDevTools: false},
   // Tracked in bug 1004428.
   {sourceName: /aboutaccounts\/(main|normalize)\.css$/i,
    isFromDevTools: false},

devtools/client/responsive.html/index.css

@@ -80,7 +80,7 @@ body,
 }
 
 select {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   -moz-context-properties: fill;

devtools/client/sourceeditor/test/browser_css_getInfo.js

@@ -9,14 +9,14 @@ const CSSCompleter =
 
 const source = [
   ".devtools-toolbar {",
-  "  -moz-appearance: none;",
+  "  -moz-appearance: none; appearance: none;",
   "           padding:4px 3px;border-bottom-width: 1px;",
   "  border-bottom-style: solid;",
   "}",
   "",
   "#devtools-menu.devtools-menulist,",
   ".devtools-toolbarbutton#devtools-menu {",
-  "  -moz-appearance: none;",
+  "  -moz-appearance: none; appearance: none;",
   "  -moz-box-align: center;",
   "  min-width: 78px;",
   "  min-height: 22px;",

devtools/client/sourceeditor/test/css_statemachine_testcases.css

@@ -3,14 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .devtools-toolbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
            padding:4px 3px;border-bottom-width: 1px;
   border-bottom-style: solid;
 }
 
 #devtools-menu.devtools-menulist,
 .devtools-toolbarbutton#devtools-menu {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
@@ -64,7 +64,7 @@
 }
 
 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
 }
 
 .devtools-sidebar-tabs > tabs > tab:first-of-type {

devtools/client/sourceeditor/test/css_statemachine_tests.json

@@ -19,8 +19,6 @@
   "tests": [
     [[0, 10], ["null", "", "", ""]],
     [[4,  3], ["selector", "class", "de", ".de"]],
-    [[5,  8], ["property", "null", "-moz-a"]],
-    [[5, 21], ["value", "null", "no", "-moz-appearance"]],
     [[6, 18], ["property", "null", "padding"]],
     [[6, 24], ["value", "null", "3", "padding"]],
     [[6, 29], ["property", "null", "bo"]],
@@ -31,7 +29,6 @@
     [[10, 17], ["selector", "class", "de", "#devtools-menu.de"]],
     [[11,  5], ["selector", "class", "devt", ".devt"]],
     [[11, 30], ["selector", "id", "devtoo", ".devtools-toolbarbutton#devtoo"]],
-    [[12, 10], ["property", "null", "-moz-app"]],
     [[16, 27], ["value", "null", "hsl", "text-shadow"]],
     [[19, 24], ["value", "null", "linear-gra", "background"]],
     [[19, 55], ["value", "null", "hsl", "background"]],

devtools/client/themes/animationinspector.css

@@ -214,7 +214,7 @@ body {
 }
 
 #timeline-rate select.devtools-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   text-align: center;
   font-family: inherit;
   color: var(--theme-body-color);

devtools/client/themes/commandline-browser.css

@@ -34,7 +34,7 @@
 }
 
 #developer-toolbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   padding: 0;
   min-height: 32px;
   background-color: var(--gcli-background-color);
@@ -42,7 +42,7 @@
 }
 
 #developer-toolbar > toolbarbutton {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: none;
   background-color: transparent;
   margin: 0;
@@ -123,6 +123,7 @@ html|*#gcli-output-frame {
   border-width: 0;
   background-color: transparent;
   -moz-appearance: none;
+  appearance: none;
 
   /* We always wanted this to be a percentage of the viewport size but width: x% does not
    * work. vw is the obvious solution.
@@ -145,7 +146,7 @@ html|*#gcli-output-frame {
 }
 
 .gclitoolbar-input-node {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: var(--gcli-input-color);
   background-color: var(--gcli-input-background);
   background-repeat: no-repeat;

devtools/client/themes/common.css

@@ -70,7 +70,7 @@ html|button, html|select {
 }
 
 .devtools-autocomplete-listbox {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   background-color: transparent;
   border-width: 0px !important;
   margin: 0;
@@ -229,7 +229,7 @@ checkbox:-moz-focusring {
 .devtools-menulist,
 .devtools-toolbarbutton,
 .devtools-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   border: 1px solid var(--toolbarbutton-border-color);
   border-radius: 2px;
@@ -383,7 +383,7 @@ checkbox:-moz-focusring {
 .devtools-textinput,
 .devtools-searchinput,
 .devtools-filterinput {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   margin: 1px 3px;
   border: 1px solid;
   border-radius: 2px;

devtools/client/themes/debugger.css

@@ -62,7 +62,7 @@
 /* Firebug theme uses breakpoint icon istead of a checkbox */
 
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: none;
   background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%;
 }
@@ -327,7 +327,7 @@
 }
 
 .dbg-expression-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: none;
   background: none;
   text-decoration: underline;

devtools/client/themes/devtools-browser.css

@@ -20,7 +20,7 @@
 
 .devtools-eyedropper-panel {
   pointer-events: none;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   width: 156px;
   height: 120px;
   background-color: transparent;

devtools/client/themes/floating-scrollbars-dark-theme.css

@@ -7,7 +7,7 @@
    well as any overflow: scroll elements within the page, while excluding
    <select>. */
 *|*:not(html|select) > scrollbar {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
@@ -37,14 +37,14 @@
 
 *|*:not(html|select) > scrollbar thumb {
   background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   border-width: 0px !important;
   border-radius: 3px !important;
 }
 
 *|*:root[platform="mac"] > scrollbar slider,
 *|*:root[platform="mac"] *|*:not(html|select) > scrollbar slider {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
 }
 
 *|*:root[platform="win"] > scrollbar scrollbarbutton,

devtools/client/themes/floating-scrollbars-responsive-design.css

@@ -7,7 +7,7 @@
    well as any overflow: scroll elements within the page, while excluding
    <select>. */
 *|*:not(html|select) > scrollbar {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
@@ -31,11 +31,11 @@
 }
 
 *|*:not(html|select) > scrollbar slider {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
 }
 
 *|*:not(html|select) > scrollbar thumb {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   background-color: rgba(0,0,0,0.2);
   border-width: 0px !important;
   border-radius: 3px !important;

devtools/client/themes/new-webconsole.css

@@ -460,7 +460,7 @@ body {
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: transparent;
 }
 

devtools/client/themes/responsivedesign.css

@@ -16,7 +16,7 @@
 }
 
 .devtools-responsiveui-toolbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   /* text color is textColor from dark theme, since no theme is applied to
    * the responsive toolbar.
@@ -29,7 +29,7 @@
 }
 
 .devtools-responsiveui-textinput {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: #333;
   color: #fff;
   border: 1px solid #111;
@@ -46,7 +46,7 @@
 
 .devtools-responsiveui-menulist,
 .devtools-responsiveui-toolbarbutton {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   -moz-box-align: center;
   min-width: 32px;
   min-height: 22px;
@@ -60,12 +60,12 @@
 }
 
 .devtools-responsiveui-menulist .menulist-editable-box {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: transparent;
 }
 
 .devtools-responsiveui-menulist html|*.menulist-editable-input {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: inherit;
   text-align: center;
 }
@@ -124,7 +124,7 @@
 }
 
 .devtools-responsiveui-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   display: -moz-box;
   background-color: transparent;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
@@ -134,7 +134,7 @@
 }
 
 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   color: inherit;
   border-width: 0;
   border-inline-end: 1px solid hsla(210,8%,5%,.45);
@@ -152,7 +152,7 @@
 
 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
+  -moz-appearance: none !important; appearance: none !important;
   list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
   -moz-box-align: center;
   padding: 0 3px;
@@ -266,7 +266,7 @@
 }
 
 .devtools-responsiveui-hardware-buttons {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   padding: 20px;
 
   border: 1px solid #FFFFFF;
@@ -288,7 +288,7 @@
 
 .devtools-responsiveui-sleep-button {
   -moz-user-focus: ignore;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   /* compensate browserStack top padding */
   margin-top: -67px;
   margin-right: 10px;
@@ -316,7 +316,7 @@
 .devtools-responsiveui-volume-up-button,
 .devtools-responsiveui-volume-down-button {
   -moz-user-focus: ignore;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   border: 1px solid red;
   min-width: 8px;
   height: 40px;

devtools/client/themes/shadereditor.css

@@ -28,7 +28,7 @@
 }
 
 .side-menu-widget-item-checkbox {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   opacity: 0;
   transition: opacity .15s ease-out 0s;
 }
@@ -43,7 +43,7 @@
 }
 
 .side-menu-widget-item-checkbox .checkbox-check {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-image: url(images/item-toggle.svg);
   background-color: transparent;
   width: 16px;

devtools/client/themes/splitters.css

@@ -31,7 +31,7 @@
 
 .devtools-horizontal-splitter,
 .devtools-side-splitter {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-image: none;
   border: 0;
   border-style: solid;

devtools/client/themes/toolbars.css

@@ -90,13 +90,13 @@
 
 /* In-tools sidebar */
 .devtools-sidebar-tabs {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   margin: 0;
   height: 100%;
 }
 
 .devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   padding: 0;
   border: 0;
@@ -115,7 +115,7 @@
 }
 
 .devtools-sidebar-alltabs {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   height: 24px;
   line-height: 24px;
   padding: 0 4px;
@@ -135,7 +135,7 @@
 }
 
 .devtools-sidebar-tabs tabs > tab {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   /* We want to match the height of a toolbar with a toolbarbutton
    * First, we need to replicated the padding of toolbar (4px),
    * then we need to take the border of the buttons into account (1px).

devtools/client/themes/toolbox.css

@@ -42,7 +42,7 @@
 /* Toolbox tabbar */
 
 .devtools-tabbar {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   min-height: 24px;
   border: 0px solid;
   border-bottom-width: 1px;

devtools/client/themes/tooltips.css

@@ -109,7 +109,7 @@
 }
 
 .tooltip-xul-wrapper {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   overflow: visible;
   border-style: none;

devtools/client/themes/webaudioeditor.css

@@ -125,7 +125,7 @@ text {
 .web-audio-inspector .error {
   background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   opacity: 0;
   transition: opacity .5s ease-out 0s;
 }

devtools/client/themes/webconsole.css

@@ -424,7 +424,7 @@ a {
   padding: 0;
   padding-inline-start: 20px;
   margin: 0;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background-color: transparent;
 }
 

devtools/client/themes/widgets.css

@@ -123,7 +123,7 @@
 
 .scrollbutton-up,
 .scrollbutton-down {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   box-shadow: none;
   border: none;
@@ -134,7 +134,7 @@
 
 .scrollbutton-up > .toolbarbutton-icon,
 .scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   width: 7px;
   height: 16px;
   background-size: 14px 16px;
@@ -197,7 +197,7 @@
 
 .breadcrumbs-widget-item {
   background-color: transparent;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   min-height: 24px;
   min-width: 65px;
   margin: 0;

devtools/shared/css/generated/properties-db.js

@@ -1746,6 +1746,20 @@ exports.CSS_PROPERTIES = {
       "unset"
     ]
   },
+  "-webkit-appearance": {
+    "isInherited": false,
+    "subproperties": [
+      "appearance"
+    ],
+    "supports": [],
+    "values": [
+      "auto",
+      "inherit",
+      "initial",
+      "none",
+      "unset"
+    ]
+  },
   "-webkit-backface-visibility": {
     "isInherited": false,
     "subproperties": [
@@ -2858,6 +2872,7 @@ exports.CSS_PROPERTIES = {
       "animation-play-state",
       "animation-timing-function",
       "-moz-appearance",
+      "appearance",
       "backface-visibility",
       "background-attachment",
       "background-blend-mode",
@@ -3889,6 +3904,20 @@ exports.CSS_PROPERTIES = {
       "unset"
     ]
   },
+  "appearance": {
+    "isInherited": false,
+    "subproperties": [
+      "appearance"
+    ],
+    "supports": [],
+    "values": [
+      "auto",
+      "inherit",
+      "initial",
+      "none",
+      "unset"
+    ]
+  },
   "backface-visibility": {
     "isInherited": false,
     "subproperties": [
@@ -9792,6 +9821,14 @@ exports.PREFERENCES = [
     "all",
     "layout.css.all-shorthand.enabled"
   ],
+  [
+    "-moz-appearance",
+    "layout.css.moz-appearance.enabled"
+  ],
+  [
+    "appearance",
+    "layout.css.appearance.enabled"
+  ],
   [
     "background-blend-mode",
     "layout.css.background-blend-mode.enabled"
@@ -10116,6 +10153,10 @@ exports.PREFERENCES = [
     "-webkit-animation-timing-function",
     "layout.css.prefixes.webkit"
   ],
+  [
+    "-webkit-appearance",
+    "layout.css.appearance.enabled"
+  ],
   [
     "-webkit-filter",
     "layout.css.prefixes.webkit"

dom/animation/test/mozilla/file_discrete-animations.html

@@ -9,11 +9,6 @@
 "use strict";
 
 const gMozillaSpecificProperties = {
-  "-moz-appearance": {
-    // https://drafts.csswg.org/css-align/#propdef-align-content
-    from: "button",
-    to: "none"
-  },
   "-moz-border-bottom-colors": {
     from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
     to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"

dom/base/test/test_caretPositionFromPoint.html

@@ -27,7 +27,7 @@
     }
 
     textarea, input {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
     }
   </style>
 <script>

dom/events/test/bug656379-1.html

@@ -14,7 +14,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=656379
       display: none;
     }
     input[type=button] {
-      -moz-appearance: none;
+      -moz-appearance: none; appearance: none;
       padding: 0;
       border: none;
       color: black;

dom/events/test/test_bug864040.html

@@ -14,7 +14,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=864040
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=864040">Mozilla Bug 864040</a>
 <div id="display">
-  <textarea id="ta" rows="5" cols="20" style="-moz-appearance:none"></textarea>
+  <textarea id="ta" rows="5" cols="20" style="-moz-appearance:none; appearance: none"></textarea>
   <div id="ce" contentEditable="true" style="height: 5em;"></div>
 </div>
 <div id="content" style="display: none">

dom/html/reftests/autofocus/input-number-ref.html

@@ -9,7 +9,7 @@
   </head>
   <body onload="document.getElementsByTagName('input')[0].focus();">
     <input onfocus="document.documentElement.removeAttribute('class');"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>

dom/html/reftests/autofocus/input-number.html

@@ -18,7 +18,7 @@ function focusHandler() {
   </head>
   <body>
     <input type="number" autofocus onfocus="focusHandler();"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
     <!-- div to cover spin box area for type=number to type=text comparison -->
     <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
   </body>

dom/html/reftests/autofocus/input-time-ref.html

@@ -15,7 +15,7 @@
   </head>
   <body onload="document.getElementById('t').focus();">
     <input type="time" id="t" onfocus="focusHandler();"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
   </body>
 </html>
 

dom/html/reftests/autofocus/input-time.html

@@ -15,7 +15,7 @@
   </head>
   <body>
     <input type="time" autofocus onfocus="focusHandler();"
-           style="-moz-appearance: none;">
+           style="-moz-appearance: none; appearance: none;">
   </body>
 </html>
 

dom/html/test/forms/test_input_textarea_set_value_no_scroll.html

@@ -112,8 +112,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=829606
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=829606">Mozilla Bug 829606</a>
 <p id="display"></p>
 <div id="content">
-  <textarea rows='1' cols='5' style='-moz-appearance:none;'>this is a \n long text</textarea>
+  <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;'>
+  <input size='5' value="this is a very long text" style='-moz-appearance:none; appearance: none;'>
 </div>
 <pre id="test">
 </pre>

dom/tests/mochitest/general/test_focusrings.xul

@@ -168,7 +168,7 @@ SimpleTest.waitForFocus(runTest);
 <button id="b2" label="Button"/>
 <button id="b3" label="Button"/>
 
-<iframe id="child" src="data:text/html,&lt;html&gt;&lt;style&gt;* { outline: none; -moz-appearance: none; min-width:10px; min-height:10px; } %23elem:focus { outline: 2px solid red; } %23elem:-moz-focusring { outline: 1px solid blue; }&lt;/style&gt;&lt;div id='container'&gt;&lt;/html&gt;"/>
+<iframe id="child" src="data:text/html,&lt;html&gt;&lt;style&gt;* { outline: none; -moz-appearance: none; appearance: none; min-width:10px; min-height:10px; } %23elem:focus { outline: 2px solid red; } %23elem:-moz-focusring { outline: 1px solid blue; }&lt;/style&gt;&lt;div id='container'&gt;&lt;/html&gt;"/>
 
 <body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
 

dom/tests/mochitest/general/test_offsets.xul

@@ -47,8 +47,8 @@
              onpopupshown="this.firstChild.open = true"
              onpopuphidden="if (event.target == this) SimpleTest.finish();">
     <menu id="innermenu" label="Open"
-          style="margin: 0; padding: 0; border: 2px black solid; -moz-appearance: none;">
+          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;"
+      <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"/>

editor/libeditor/tests/test_bug1053048.html

@@ -63,7 +63,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1053048
 </div>
 
 <textarea id="textarea"
-          style="height: 100px; width: 300px; -moz-appearance: none"
+          style="height: 100px; width: 300px; -moz-appearance: none; appearance: none"
           spellcheck="false"
           onkeydown="this.style.display='block'; this.style.height='200px';">foo</textarea>
 

editor/reftests/xul/input.css

@@ -24,7 +24,7 @@
 
 textbox[multiline="true"], html|textarea {
   border: none !important;
-  -moz-appearance: none !important;
+  -moz-appearance: none; appearance: none !important;
   background-color: white !important;
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;

gfx/src/nsThemeConstants.h

@@ -14,6 +14,9 @@
 // A checkbox element. 
 #define NS_THEME_CHECKBOX                                  3
 
+// appearance:auto (only used in the style system, not in layout)
+#define NS_THEME_AUTO                                      4
+
 // A rectangular button that contains complex content
 // like images (e.g. HTML <button> elements)
 #define NS_THEME_BUTTON_BEVEL                              7

gfx/tests/crashtests/crashtests.list

@@ -86,10 +86,10 @@ load 580100-1.html
 load 580212-1.html
 load 580233-1.html
 load 580719-1.html
-load 593526.html
+pref(layout.css.moz-appearance.enabled,true) load 593526.html
-load 593526.xul
+pref(layout.css.moz-appearance.enabled,true) load 593526.xul
 load 594654-1.xhtml
-load 595042-1.html
+pref(layout.css.moz-appearance.enabled,true) load 595042-1.html
 load 595727-1.html
 load 624198.xhtml
 load 633322-1.html

layout/base/GeckoRestyleManager.cpp

@@ -299,11 +299,11 @@ GeckoRestyleManager::AttributeChanged(Element* aElement,
   if (primaryFrame) {
     // See if we have appearance information for a theme.
     const nsStyleDisplay* disp = primaryFrame->StyleDisplay();
-    if (disp->mAppearance) {
+    if (disp->UsedAppearance()) {
       nsITheme* theme = PresContext()->GetTheme();
-      if (theme && theme->ThemeSupportsWidget(PresContext(), primaryFrame, disp->mAppearance)) {
+      if (theme && theme->ThemeSupportsWidget(PresContext(), primaryFrame, disp->UsedAppearance())) {
         bool repaint = false;
-        theme->WidgetStateChanged(primaryFrame, disp->mAppearance, aAttribute,
+        theme->WidgetStateChanged(primaryFrame, disp->UsedAppearance(), aAttribute,
             &repaint, aOldValue);
         if (repaint)
           hint |= nsChangeHint_RepaintFrame;

layout/base/RestyleManager.cpp

@@ -360,7 +360,7 @@ RestyleManager::ContentStateChangedInternal(Element* aElement,
                                          NS_EVENT_STATE_LOADING)) {
       *aOutChangeHint = nsChangeHint_ReconstructFrame;
     } else {
-      uint8_t app = primaryFrame->StyleDisplay()->mAppearance;
+      uint8_t app = primaryFrame->StyleDisplay()->UsedAppearance();
       if (app) {
         nsITheme* theme = PresContext()->GetTheme();
         if (theme &&

layout/base/crashtests/crashtests.list

@@ -431,7 +431,7 @@ load 812665.html
 load 813372-1.html
 load 817219.html
 load 818454.html
-load 822865.html
+pref(layout.css.moz-appearance.enabled,true) load 822865.html
 load 824300.html
 load 824862.html
 load 826163.html

layout/base/nsCSSFrameConstructor.cpp

@@ -3773,7 +3773,7 @@ nsCSSFrameConstructor::FindInputData(Element* aElement,
   // not (respectively) NS_THEME_RADIO and NS_THEME_CHECKBOX.)
   if ((controlType == NS_FORM_INPUT_CHECKBOX ||
        controlType == NS_FORM_INPUT_RADIO) &&
-      aStyleContext->StyleDisplay()->mAppearance == NS_THEME_NONE) {
+      aStyleContext->StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     return nullptr;
   }
 #endif

layout/base/nsLayoutUtils.cpp

@@ -5143,7 +5143,7 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext,
     LayoutDeviceIntSize devSize;
     bool canOverride = true;
     nsPresContext* pc = aFrame->PresContext();
-    pc->GetTheme()->GetMinimumWidgetSize(pc, aFrame, disp->mAppearance,
+    pc->GetTheme()->GetMinimumWidgetSize(pc, aFrame, disp->UsedAppearance(),
                                          &devSize, &canOverride);
     nscoord themeSize =
       pc->DevPixelsToAppUnits(aAxis == eAxisVertical ? devSize.height
@@ -7070,10 +7070,10 @@ nsLayoutUtils::GetFrameTransparency(nsIFrame* aBackgroundFrame,
   if (HasNonZeroCorner(aCSSRootFrame->StyleBorder()->mBorderRadius))
     return eTransparencyTransparent;
 
-  if (aCSSRootFrame->StyleDisplay()->mAppearance == NS_THEME_WIN_GLASS)
+  if (aCSSRootFrame->StyleDisplay()->UsedAppearance() == NS_THEME_WIN_GLASS)
     return eTransparencyGlass;
 
-  if (aCSSRootFrame->StyleDisplay()->mAppearance == NS_THEME_WIN_BORDERLESS_GLASS)
+  if (aCSSRootFrame->StyleDisplay()->UsedAppearance() == NS_THEME_WIN_BORDERLESS_GLASS)
     return eTransparencyBorderlessGlass;
 
   nsITheme::Transparency transparency;

layout/base/tests/bug106855-1-ref.html

@@ -3,7 +3,7 @@
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
 A
 
 

layout/base/tests/bug106855-1.html

@@ -3,7 +3,7 @@
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
 A
 
 

layout/base/tests/bug106855-2.html

@@ -3,7 +3,7 @@
 </head>
 <body>
 x<br>
-<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none">
+<textarea id="t" rows="4" spellcheck="false" style="-moz-appearance: none; appearance: none">
 A
 
 

layout/base/tests/bug1237236-1-ref.html

@@ -20,7 +20,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def</textarea>
 
 <script>

layout/base/tests/bug1237236-1.html

@@ -21,7 +21,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def</textarea>
 
 <script>

layout/base/tests/bug1258308-1-ref.html

@@ -21,7 +21,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def
 ghi</textarea>
 

layout/base/tests/bug1258308-1.html

@@ -29,7 +29,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abc
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abc
 def
 ghi</textarea>
 

layout/base/tests/bug1259949-1-ref.html

@@ -20,7 +20,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abcdef
 </textarea>
 
 <script>

layout/base/tests/bug1259949-1.html

@@ -24,7 +24,7 @@
 </head>
 <body>
 
-<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none">abcdef
+<textarea onfocus="test1()" spellcheck="false" style="-moz-appearance:none; appearance: none">abcdef
 </textarea>
 
 <script>

layout/base/tests/bug240933-1-ref.html

@@ -1,6 +1,6 @@
 <!DOCTYPE HTML><html>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none">
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none">
 
 </textarea>
 <script>

layout/base/tests/bug240933-1.html

@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var area = document.getElementById('t');
   area.focus();

layout/base/tests/bug240933-2.html

@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var area = document.getElementById('t');
   area.focus();

layout/base/tests/bug585922-ref.html

@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="doTest()">
-    <input type=text style="-moz-appearance: none">
+    <input type=text style="-moz-appearance: none; appearance: none">
     <script>
       function doTest() {
         var d = document.querySelector("input");

layout/base/tests/bug585922.html

@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="doTest()">
-    <input type=text style="-moz-appearance: none">
+    <input type=text style="-moz-appearance: none; appearance: none">
     <script>
       function doTest() {
         function enableCaret(aEnable) {

layout/base/tests/bug597519-1-ref.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML><html><head>
 </head>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none">ab
+<textarea spellcheck="false" style="-moz-appearance: none; appearance: none">ab
 </textarea>
 <script>
   var t = document.querySelector("textarea");

layout/base/tests/bug597519-1.html

@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea maxlength="3" spellcheck="false" style="-moz-appearance: none"></textarea>
+<textarea maxlength="3" spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();

layout/base/tests/bug612271-1.html

@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
- <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
+ <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeydown="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");

layout/base/tests/bug612271-2.html

@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-  <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeypress="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");

layout/base/tests/bug612271-3.html

@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-  <textarea id="target" style="height: 100px; -moz-appearance: none" spellcheck="false"
+  <textarea id="target" style="height: 100px; -moz-appearance: none; appearance: none" spellcheck="false"
     onkeyup="this.style.display='block';this.style.height='200px';">foo</textarea>
 <script>
   var t = document.querySelector("textarea");

layout/base/tests/bug612271-ref.html

@@ -9,7 +9,7 @@
   </script>
 </head>
 <body onload="loaded()">
-  <textarea style="height: 200px; display: block; -moz-appearance: none" spellcheck="false"
+  <textarea style="height: 200px; display: block; -moz-appearance: none; appearance: none" spellcheck="false"
     >foo
 </textarea>
   4 - 4

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>

layout/base/tests/bug613807-1.html

@@ -4,7 +4,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea id="t" rows="4" style="-moz-appearance: none"></textarea>
+<textarea id="t" rows="4" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   if (typeof(addLoadEvent) == 'undefined') {
     _newCallStack = function(path) {

layout/base/tests/bug634406-1-ref.html

@@ -1,6 +1,6 @@
 <!DOCTYPE HTML><html>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none">ab</textarea>
+<textarea spellcheck="false" style="-moz-appearance: none; appearance: none">ab</textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();

layout/base/tests/bug634406-1.html

@@ -2,7 +2,7 @@
   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
 </head>
 <body>
-<textarea spellcheck="false" style="-moz-appearance: none"></textarea>
+<textarea spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
 <script>
   var t = document.querySelector("textarea");
   t.focus();

layout/base/tests/bug646382-1-ref.html

@@ -4,7 +4,7 @@
   </head>
   <body onload="start()">
     <textarea onfocus="done()"
-              style="-moz-appearance: none;
+              style="-moz-appearance: none; appearance: none;
                      unicode-bidi: bidi-override;">س</textarea>
     <script>
       var textarea = document.querySelector("textarea");

layout/base/tests/bug646382-1.html

@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea onfocus="typeIntoMe()" style="-moz-appearance: none"></textarea>
+    <textarea onfocus="typeIntoMe()" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();

layout/base/tests/bug646382-2-ref.html

@@ -1,7 +1,7 @@
 <html class="reftest-wait">
   <body onload="start()">
     <textarea dir="rtl" onfocus="done()"
-              style="-moz-appearance: none;
+              style="-moz-appearance: none; appearance: none;
               unicode-bidi: bidi-override;">s</textarea>
     <script>
       var textarea = document.querySelector("textarea");

layout/base/tests/bug646382-2.html

@@ -3,7 +3,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea dir="rtl" onfocus="typeIntoMe()" style="-moz-appearance: none"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();

layout/base/tests/bug664087-1-ref.html

@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea rows="3" onfocus="done()" spellcheck="false" style="-moz-appearance: none">אב
+    <textarea rows="3" onfocus="done()" spellcheck="false" style="-moz-appearance: none; appearance: none">אב
 ג</textarea>
     <script>
       var textarea = document.querySelector("textarea");

layout/base/tests/bug664087-1.html

@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea rows="3" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none"></textarea>
+    <textarea rows="3" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();

layout/base/tests/bug664087-2-ref.html

@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea dir="rtl" onfocus="done()" spellcheck="false" style="-moz-appearance: none">ab
+    <textarea dir="rtl" onfocus="done()" spellcheck="false" style="-moz-appearance: none; appearance: none">ab
 c</textarea>
     <script>
       var textarea = document.querySelector("textarea");

layout/base/tests/bug664087-2.html

@@ -4,7 +4,7 @@
     <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   </head>
   <body onload="start()">
-    <textarea dir="rtl" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none"></textarea>
+    <textarea dir="rtl" onfocus="typeIntoMe()" spellcheck="false" style="-moz-appearance: none; appearance: none"></textarea>
     <script>
       function start() {
         document.querySelector("textarea").focus();

layout/base/tests/chrome/chrome_content_integration_window.xul

@@ -3,7 +3,7 @@
 <window title="Content/chrome integration subwindow"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         onload="runTests()"
-        style="background:black; -moz-appearance:none;">
+        style="background:black; -moz-appearance:none; appearance: none;">
   <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script>
 
   <stack style="height:300px; width:200px;">

layout/base/tests/test_bug332655-1.html

@@ -15,7 +15,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=332655
 <p id="display"></p>
 <div id="content">
 <input type="text" id="testInput"
-       style="-moz-appearance: none"> <!-- bug 1204897 workaround -->
+       style="-moz-appearance: none; appearance: none"> <!-- bug 1204897 workaround -->
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">

layout/base/tests/test_bug332655-2.html

@@ -15,7 +15,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=332655
 <p id="display"></p>
 <div id="content">
 <input type="text" id="testInput"
-       style="-moz-appearance: none"> <!-- bug 1234659 workaround -->
+       style="-moz-appearance: none; appearance: none"> <!-- bug 1234659 workaround -->
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">

layout/base/tests/test_bug499538-1.html

@@ -14,7 +14,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=499538
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=499538">Mozilla Bug 499538</a>
 <p id="display"></p>
 <div id="content">
-<input type="text" id="testInput" style="-moz-appearance:none">
+<input type="text" id="testInput" style="-moz-appearance:none; appearance: none">
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">

layout/base/tests/test_bug644768.html

@@ -22,7 +22,7 @@
            == زادروزها ==
            * [[۱۳۰۷]]
          -->
-      <textarea id="testInput" dir="rtl" cols="80" rows="25" style="-moz-appearance:none">
+      <textarea id="testInput" dir="rtl" cols="80" rows="25" style="-moz-appearance:none; appearance: none">
 
 == &#x0632;&#x0627;&#x062F;&#x0631;&#x0648;&#x0632;&#x0647;&#x0627; ==
 * [[&#x06F1;&#x06F3;&#x06F0;&#x06F7;]]</textarea>

layout/forms/crashtests/1102791.html

@@ -10,7 +10,7 @@ html,body {
 
 button {
   position: absolute;
-  -moz-appearance: none;
+  -moz-appearance: none; appearance: none;
   background: transparent;
   padding: 0;
   border-style:none;

layout/forms/crashtests/crashtests.list

@@ -26,7 +26,7 @@ load 378369.html
 load 378413-1.xhtml
 load 380116-1.xhtml
 load 382212-1.xhtml
-load 382610-1.html
+pref(layout.css.moz-appearance.enabled,true) load 382610-1.html
 load 383887-1.html
 load 386554-1.html
 load 388374-1.xhtml
@@ -62,7 +62,7 @@ load 959311.html
 load 960277-2.html
 load 997709-1.html
 load 1102791.html
-skip-if(stylo) load 1140216.html # bug 1323693, bug 1341973
+pref(layout.css.moz-appearance.enabled,true) skip-if(stylo) load 1140216.html # bug 1323693, bug 1341973
 load 1182414.html
 load 1212688.html
 load 1228670.xhtml

layout/forms/nsButtonFrameRenderer.cpp

@@ -328,7 +328,7 @@ void nsDisplayButtonForeground::Paint(nsDisplayListBuilder* aBuilder,
   nsPresContext *presContext = mFrame->PresContext();
   const nsStyleDisplay *disp = mFrame->StyleDisplay();
   if (!mFrame->IsThemed(disp) ||
-      !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
+      !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
     nsRect r = nsRect(ToReferenceFrame(), mFrame->GetSize());
 
     // Draw the -moz-focus-inner border
@@ -350,7 +350,7 @@ nsDisplayButtonForeground::GetLayerState(nsDisplayListBuilder* aBuilder,
     nsPresContext *presContext = mFrame->PresContext();
     const nsStyleDisplay *disp = mFrame->StyleDisplay();
     if (!mFrame->IsThemed(disp) ||
-        !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
+        !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
       nsRect r = nsRect(ToReferenceFrame(), mFrame->GetSize());
       br = mBFR->CreateInnerFocusBorderRenderer(aBuilder, presContext, nullptr, mVisibleRect, r);
     }

layout/forms/nsComboboxControlFrame.cpp

@@ -782,7 +782,7 @@ nsComboboxControlFrame::GetIntrinsicISize(nsRenderingContext* aRenderingContext,
   const nsStyleDisplay* disp = StyleDisplay();
   if ((!IsThemed(disp) ||
        presContext->GetTheme()->ThemeNeedsComboboxDropmarker()) &&
-      disp->mAppearance != NS_THEME_NONE) {
+      disp->UsedAppearance() != NS_THEME_NONE) {
     displayISize += scrollbarWidth;
   }
 
@@ -855,7 +855,7 @@ nsComboboxControlFrame::Reflow(nsPresContext*          aPresContext,
   nscoord buttonISize;
   const nsStyleDisplay *disp = StyleDisplay();
   if ((IsThemed(disp) && !aPresContext->GetTheme()->ThemeNeedsComboboxDropmarker()) ||
-      StyleDisplay()->mAppearance == NS_THEME_NONE) {
+      StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     buttonISize = 0;
   }
   else {
@@ -1578,7 +1578,7 @@ nsComboboxControlFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
       nsPresContext *presContext = PresContext();
       const nsStyleDisplay *disp = StyleDisplay();
       if ((!IsThemed(disp) ||
-           !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) &&
+           !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) &&
           mDisplayFrame && IsVisibleForPainting(aBuilder)) {
         aLists.Content()->AppendNewToTop(
           new (aBuilder) nsDisplayComboboxFocus(aBuilder, this));

layout/forms/nsFormControlFrame.cpp

@@ -44,7 +44,7 @@ nsFormControlFrame::GetMinISize(nsRenderingContext *aRenderingContext)
   nscoord result;
   DISPLAY_MIN_WIDTH(this, result);
 #if !defined(MOZ_WIDGET_ANDROID)
-  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
+  result = StyleDisplay()->UsedAppearance() == NS_THEME_NONE ? 0 : DefaultSize();
 #else
   result = DefaultSize();
 #endif
@@ -57,7 +57,7 @@ nsFormControlFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
   nscoord result;
   DISPLAY_PREF_WIDTH(this, result);
 #if !defined(MOZ_WIDGET_ANDROID)
-  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
+  result = StyleDisplay()->UsedAppearance() == NS_THEME_NONE ? 0 : DefaultSize();
 #else
   result = DefaultSize();
 #endif
@@ -77,7 +77,7 @@ nsFormControlFrame::ComputeAutoSize(nsRenderingContext* aRC,
 {
   LogicalSize size(aWM, 0, 0);
 #if !defined(MOZ_WIDGET_ANDROID)
-  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
+  if (StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     return size;
   }
 #endif
@@ -101,7 +101,7 @@ nsFormControlFrame::GetLogicalBaseline(WritingMode aWritingMode) const
 #if !defined(MOZ_WIDGET_ANDROID)
   // For appearance:none we use a standard CSS baseline, i.e. synthesized from
   // our margin-box.
-  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
+  if (StyleDisplay()->UsedAppearance() == NS_THEME_NONE) {
     return nsAtomicContainerFrame::GetLogicalBaseline(aWritingMode);
   }
 #endif

layout/forms/nsMeterFrame.cpp

@@ -266,11 +266,11 @@ nsMeterFrame::ShouldUseNativeStyle() const
   // - both frames use the native appearance;
   // - neither frame has author specified rules setting the border or the
   //   background.
-  return StyleDisplay()->mAppearance == NS_THEME_METERBAR &&
+  return StyleDisplay()->UsedAppearance() == NS_THEME_METERBAR &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND) &&
          barFrame &&
-         barFrame->StyleDisplay()->mAppearance == NS_THEME_METERCHUNK &&
+         barFrame->StyleDisplay()->UsedAppearance() == NS_THEME_METERCHUNK &&
          !PresContext()->HasAuthorSpecifiedRules(barFrame,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND);
 }

layout/forms/nsNumberControlFrame.cpp

@@ -416,7 +416,7 @@ nsNumberControlFrame::CreateAnonymousContent(nsTArray<ContentInfo>& aElements)
     nsContentUtils::AddScriptRunner(focusJob);
   }
 
-  if (StyleDisplay()->mAppearance == NS_THEME_TEXTFIELD) {
+  if (StyleDisplay()->UsedAppearance() == NS_THEME_TEXTFIELD) {
     // The author has elected to hide the spinner by setting this
     // -moz-appearance. We will reframe if it changes.
     return rv;
@@ -615,11 +615,11 @@ nsNumberControlFrame::ShouldUseNativeStyleForSpinner() const
   nsIFrame* spinDownFrame = mSpinDown->GetPrimaryFrame();
 
   return spinUpFrame &&
-    spinUpFrame->StyleDisplay()->mAppearance == NS_THEME_SPINNER_UPBUTTON &&
+    spinUpFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SPINNER_UPBUTTON &&
     !PresContext()->HasAuthorSpecifiedRules(spinUpFrame,
                                             STYLES_DISABLING_NATIVE_THEMING) &&
     spinDownFrame &&
-    spinDownFrame->StyleDisplay()->mAppearance == NS_THEME_SPINNER_DOWNBUTTON &&
+    spinDownFrame->StyleDisplay()->UsedAppearance() == NS_THEME_SPINNER_DOWNBUTTON &&
     !PresContext()->HasAuthorSpecifiedRules(spinDownFrame,
                                             STYLES_DISABLING_NATIVE_THEMING);
 }

layout/forms/nsProgressFrame.cpp

@@ -279,11 +279,11 @@ nsProgressFrame::ShouldUseNativeStyle() const
   // - both frames use the native appearance;
   // - neither frame has author specified rules setting the border or the
   //   background.
-  return StyleDisplay()->mAppearance == NS_THEME_PROGRESSBAR &&
+  return StyleDisplay()->UsedAppearance() == NS_THEME_PROGRESSBAR &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND) &&
          barFrame &&
-         barFrame->StyleDisplay()->mAppearance == NS_THEME_PROGRESSCHUNK &&
+         barFrame->StyleDisplay()->UsedAppearance() == NS_THEME_PROGRESSCHUNK &&
          !PresContext()->HasAuthorSpecifiedRules(barFrame,
                                                  NS_AUTHOR_SPECIFIED_BORDER | NS_AUTHOR_SPECIFIED_BACKGROUND);
 }

layout/forms/nsRangeFrame.cpp

@@ -300,7 +300,7 @@ nsRangeFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
   }
 
   if (IsThemed(disp) &&
-      PresContext()->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
+      PresContext()->GetTheme()->ThemeDrawsFocusForWidget(disp->UsedAppearance())) {
     return; // the native theme displays its own visual indication of focus
   }
 
@@ -878,7 +878,7 @@ nsRangeFrame::ShouldUseNativeStyle() const
   nsIFrame* progressFrame = mProgressDiv->GetPrimaryFrame();
   nsIFrame* thumbFrame = mThumbDiv->GetPrimaryFrame();
 
-  return (StyleDisplay()->mAppearance == NS_THEME_RANGE) &&
+  return (StyleDisplay()->UsedAppearance() == NS_THEME_RANGE) &&
          !PresContext()->HasAuthorSpecifiedRules(this,
                                                  (NS_AUTHOR_SPECIFIED_BORDER |
                                                   NS_AUTHOR_SPECIFIED_BACKGROUND)) &&

layout/forms/test/bug665540_window.xul

@@ -10,7 +10,7 @@
   </script>
 
   <body xmlns="http://www.w3.org/1999/xhtml">
-    <select id="select" style="-moz-appearance:none">
+    <select id="select" style="-moz-appearance:none; appearance: none">
       <option id="optiona">a</option>
       <option>b</option>
     </select>

layout/forms/test/test_bug476308.html

@@ -11,7 +11,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=476308
 </head>
 <body>
 
-<button style="-moz-appearance: none; width: 100px; height: 60px; background-color: red; border: 2px solid green; box-shadow: 30px 0px 3.5px black; position: absolute; top: 300px; left: 20px;"
+<button style="-moz-appearance: none; appearance: none; width: 100px; height: 60px; background-color: red; border: 2px solid green; box-shadow: 30px 0px 3.5px black; position: absolute; top: 300px; left: 20px;"
         id="button1">1</button>
 
 <br />

layout/forms/test/test_textarea_resize.html

@@ -10,7 +10,7 @@
 <div id="content" style="display: none">
 </div>
 
-<textarea id="textarea" style="-moz-appearance: none; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea>
+<textarea id="textarea" style="-moz-appearance: none; appearance: none; border: 2px solid black; padding: 3px; box-sizing: border-box; min-width: 15px; min-height: 15px;">Text</textarea>
 
 <pre id="test">
 <script type="application/javascript">

layout/generic/ReflowInput.cpp

@@ -2536,7 +2536,7 @@ SizeComputationInput::InitOffsets(WritingMode aWM,
   nsIntMargin widget;
   if (isThemed &&
       presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
-                                                mFrame, disp->mAppearance,
+                                                mFrame, disp->UsedAppearance(),
                                                 &widget)) {
     ComputedPhysicalPadding().top = presContext->DevPixelsToAppUnits(widget.top);
     ComputedPhysicalPadding().right = presContext->DevPixelsToAppUnits(widget.right);
@@ -2587,7 +2587,7 @@ SizeComputationInput::InitOffsets(WritingMode aWM,
   if (isThemed) {
     nsIntMargin widget;
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             mFrame, disp->mAppearance,
+                                             mFrame, disp->UsedAppearance(),
                                              &widget);
     ComputedPhysicalBorderPadding().top =
       presContext->DevPixelsToAppUnits(widget.top);

layout/generic/crashtests/crashtests.list

@@ -110,7 +110,7 @@ load 379917-1.xhtml
 load 380012-1.html
 load 381152-1.html
 load 381786-1.html
-load 382129-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 382129-1.xhtml
 load 382131-1.html
 load 382199-1.html
 load 382208-1.xhtml
@@ -119,7 +119,7 @@ load 382396-1.xhtml
 load 382745-1.xhtml
 load 383089-1.html
 load 385265-1.xhtml
-load 385295-1.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 385295-1.xhtml
 load 385344-1.html
 load 385344-2.html
 load 385414-1.html
@@ -185,7 +185,7 @@ load 400078-1.html
 load 400190.html
 load 400223-1.html # bug 1323652
 load 400232-1.html
-load 400244-1.html
+pref(layout.css.moz-appearance.enabled,true) load 400244-1.html
 load 400768-1.xhtml
 load 400768-2.xhtml
 load 401042-1.xhtml
@@ -490,9 +490,9 @@ load 762764-1.html
 load 762902.html
 load 765409.html
 asserts(0-200) load 765621.html # bug 703550
-asserts(0-200) load 767765.html # bug 407550, bug 871758, and various nscoord_MAX related asserts
+pref(layout.css.moz-appearance.enabled,true) asserts(0-200) load 767765.html # bug 407550, bug 871758, and various nscoord_MAX related asserts
 load 769120.html
-asserts(0-2) load 769303-1.html # bug 1123979
+pref(layout.css.moz-appearance.enabled,true) asserts(0-2) load 769303-1.html # bug 1123979
 load 769303-2.html
 load 777838.html
 load 783228.html

layout/generic/nsFlexContainerFrame.cpp

@@ -1226,7 +1226,7 @@ nsFlexContainerFrame::GenerateFlexItemForChild(
     bool canOverride = true;
     aPresContext->GetTheme()->
       GetMinimumWidgetSize(aPresContext, aChildFrame,
-                           disp->mAppearance,
+                           disp->UsedAppearance(),
                            &widgetMinSize, &canOverride);
 
     nscoord widgetMainMinSize =

layout/generic/nsFrame.cpp

@@ -1155,7 +1155,7 @@ nsIFrame::GetUsedBorder() const
     nsIntMargin result;
     nsPresContext *presContext = PresContext();
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             mutable_this, disp->mAppearance,
+                                             mutable_this, disp->UsedAppearance(),
                                              &result);
     border.left = presContext->DevPixelsToAppUnits(result.left);
     border.top = presContext->DevPixelsToAppUnits(result.top);
@@ -1191,7 +1191,7 @@ nsIFrame::GetUsedPadding() const
     nsIntMargin widget;
     if (presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
                                                   mutable_this,
-                                                  disp->mAppearance,
+                                                  disp->UsedAppearance(),
                                                   &widget)) {
       padding.top = presContext->DevPixelsToAppUnits(widget.top);
       padding.right = presContext->DevPixelsToAppUnits(widget.right);
@@ -2077,7 +2077,7 @@ nsFrame::DisplayBackgroundUnconditional(nsDisplayListBuilder* aBuilder,
   // receive a propagated background should just set aForceBackground to
   // true.
   if (aBuilder->IsForEventDelivery() || aForceBackground ||
-      !StyleBackground()->IsTransparent(this) || StyleDisplay()->mAppearance) {
+      !StyleBackground()->IsTransparent(this) || StyleDisplay()->UsedAppearance()) {
     return nsDisplayBackgroundImage::AppendBackgroundItemsToTop(
         aBuilder, this, GetRectRelativeToSelf(), aLists.BorderBackground());
   }
@@ -3069,7 +3069,7 @@ nsIFrame::BuildDisplayListForChild(nsDisplayListBuilder*   aBuilder,
   // REVIEW: Taken from nsBoxFrame::Paint
   // Don't paint our children if the theme object is a leaf.
   if (IsThemed(ourDisp) &&
-      !PresContext()->GetTheme()->WidgetIsContainer(ourDisp->mAppearance))
+      !PresContext()->GetTheme()->WidgetIsContainer(ourDisp->UsedAppearance()))
     return;
 
   // Since we're now sure that we're adding this frame to the display list
@@ -4983,7 +4983,7 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
 
     nsIntMargin border;
     presContext->GetTheme()->GetWidgetBorder(presContext->DeviceContext(),
-                                             aFrame, disp->mAppearance,
+                                             aFrame, disp->UsedAppearance(),
                                              &border);
     result.hBorder =
       presContext->DevPixelsToAppUnits(verticalAxis ? border.TopBottom()
@@ -4991,7 +4991,7 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize)
 
     nsIntMargin padding;
     if (presContext->GetTheme()->GetWidgetPadding(presContext->DeviceContext(),
-                                                  aFrame, disp->mAppearance,
+                                                  aFrame, disp->UsedAppearance(),
                                                   &padding)) {
       result.hPadding =
         presContext->DevPixelsToAppUnits(verticalAxis ? padding.TopBottom()
@@ -5262,7 +5262,7 @@ nsFrame::ComputeSize(nsRenderingContext* aRenderingContext,
     bool canOverride = true;
     nsPresContext *presContext = PresContext();
     presContext->GetTheme()->
-      GetMinimumWidgetSize(presContext, this, disp->mAppearance,
+      GetMinimumWidgetSize(presContext, this, disp->UsedAppearance(),
                            &widget, &canOverride);
 
     // Convert themed widget's physical dimensions to logical coords
@@ -5721,7 +5721,7 @@ nsFrame::ComputeSimpleTightBounds(DrawTarget* aDrawTarget) const
 {
   if (StyleOutline()->ShouldPaintOutline() || StyleBorder()->HasBorder() ||
       !StyleBackground()->IsTransparent(this) ||
-      StyleDisplay()->mAppearance) {
+      StyleDisplay()->UsedAppearance()) {
     // Not necessarily tight, due to clipping, negative
     // outline-offset, and lots of other issues, but that's OK
     return GetVisualOverflowRect();
@@ -9056,7 +9056,7 @@ nsIFrame::FinishAndStoreOverflow(nsOverflowAreas& aOverflowAreas,
     nsPresContext *presContext = PresContext();
     if (presContext->GetTheme()->
           GetWidgetOverflow(presContext->DeviceContext(), this,
-                            disp->mAppearance, &r)) {
+                            disp->UsedAppearance(), &r)) {
       nsRect& vo = aOverflowAreas.VisualOverflow();
       vo.UnionRectEdges(vo, r);
     }

layout/generic/nsIFrame.h

@@ -1614,16 +1614,16 @@ public:
   bool IsThemed(const nsStyleDisplay* aDisp,
                   nsITheme::Transparency* aTransparencyState = nullptr) const {
     nsIFrame* mutable_this = const_cast<nsIFrame*>(this);
-    if (!aDisp->mAppearance)
+    if (!aDisp->UsedAppearance())
       return false;
     nsPresContext* pc = PresContext();
     nsITheme *theme = pc->GetTheme();
     if(!theme ||
-       !theme->ThemeSupportsWidget(pc, mutable_this, aDisp->mAppearance))
+       !theme->ThemeSupportsWidget(pc, mutable_this, aDisp->UsedAppearance()))
       return false;
     if (aTransparencyState) {
       *aTransparencyState =
-        theme->GetWidgetTransparency(mutable_this, aDisp->mAppearance);
+        theme->GetWidgetTransparency(mutable_this, aDisp->UsedAppearance());
     }
     return true;
   }

layout/generic/test/test_selection_preventDefault.html

@@ -20,7 +20,7 @@
     width: 80px;
     margin: 0;
     padding: 0;
-    -moz-appearance: none;
+    -moz-appearance: none; appearance: none;
   }
 </style>
 

layout/painting/nsCSSRendering.cpp

@@ -812,11 +812,11 @@ nsCSSRendering::PaintBorderWithStyleBorder(nsPresContext* aPresContext,
   // renderer draw the border.  DO not get the data from aForFrame, since the passed in style context
   // may be different!  Always use |aStyleContext|!
   const nsStyleDisplay* displayData = aStyleContext->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aPresContext->GetTheme();
     if (theme &&
         theme->ThemeSupportsWidget(aPresContext, aForFrame,
-                                   displayData->mAppearance)) {
+                                   displayData->UsedAppearance())) {
       return DrawResult::SUCCESS; // Let the theme handle it.
     }
   }
@@ -900,11 +900,11 @@ nsCSSRendering::CreateBorderRendererWithStyleBorder(nsPresContext* aPresContext,
                                                     Sides aSkipSides)
 {
   const nsStyleDisplay* displayData = aStyleContext->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aPresContext->GetTheme();
     if (theme &&
         theme->ThemeSupportsWidget(aPresContext, aForFrame,
-                                   displayData->mAppearance)) {
+                                   displayData->UsedAppearance())) {
       return Nothing();
     }
   }
@@ -1584,7 +1584,7 @@ nsCSSRendering::PaintBoxShadowOuter(nsPresContext* aPresContext,
       nativeRect.IntersectRect(frameRect, nativeRect);
       nsRenderingContext wrapperCtx(shadowContext);
       aPresContext->GetTheme()->DrawWidgetBackground(&wrapperCtx, aForFrame,
-          styleDisplay->mAppearance, aFrameArea, nativeRect);
+          styleDisplay->UsedAppearance(), aFrameArea, nativeRect);
 
       blurringArea.DoPaint();
       renderContext->Restore();
@@ -1928,7 +1928,7 @@ nsCSSRendering::PaintStyleImageLayer(const PaintBGParams& aParams,
     // a root, otherwise keep going in order to let the theme stuff
     // draw the background. The canvas really should be drawing the
     // bg, but there's no way to hook that up via css.
-    if (!aParams.frame->StyleDisplay()->mAppearance) {
+    if (!aParams.frame->StyleDisplay()->UsedAppearance()) {
       return DrawResult::SUCCESS;
     }
 
@@ -1960,11 +1960,11 @@ nsCSSRendering::CanBuildWebRenderDisplayItemsForStyleImageLayer(LayerManager* aM
 
   // We cannot draw native themed backgrounds
   const nsStyleDisplay* displayData = aFrame->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aPresCtx.GetTheme();
     if (theme && theme->ThemeSupportsWidget(&aPresCtx,
                                             aFrame,
-                                            displayData->mAppearance)) {
+                                            displayData->UsedAppearance())) {
       return false;
     }
   }
@@ -2005,7 +2005,7 @@ nsCSSRendering::BuildWebRenderDisplayItemsForStyleImageLayer(const PaintBGParams
     // a root, otherwise keep going in order to let the theme stuff
     // draw the background. The canvas really should be drawing the
     // bg, but there's no way to hook that up via css.
-    if (!aParams.frame->StyleDisplay()->mAppearance) {
+    if (!aParams.frame->StyleDisplay()->UsedAppearance()) {
       return DrawResult::SUCCESS;
     }
 
@@ -2513,18 +2513,18 @@ nsCSSRendering::PaintStyleImageLayerWithSC(const PaintBGParams& aParams,
   // renderer draw the background and bail out.
   // XXXzw this ignores aParams.bgClipRect.
   const nsStyleDisplay* displayData = aParams.frame->StyleDisplay();
-  if (displayData->mAppearance) {
+  if (displayData->UsedAppearance()) {
     nsITheme *theme = aParams.presCtx.GetTheme();
     if (theme && theme->ThemeSupportsWidget(&aParams.presCtx,
                                             aParams.frame,
-                                            displayData->mAppearance)) {
+                                            displayData->UsedAppearance())) {
       nsRect drawing(aParams.borderArea);
       theme->GetWidgetOverflow(aParams.presCtx.DeviceContext(),
-                               aParams.frame, displayData->mAppearance,
+                               aParams.frame, displayData->UsedAppearance(),
                                &drawing);
       drawing.IntersectRect(drawing, aParams.dirtyRect);
       theme->DrawWidgetBackground(&aRenderingCtx, aParams.frame,
-                                  displayData->mAppearance, aParams.borderArea,
+                                  displayData->UsedAppearance(), aParams.borderArea,
                                   drawing);
       return DrawResult::SUCCESS;
     }