Bug 1365614 part 2 - Backout bug 1357655. Removes support for [-webkit-]appearance for now b/c web compat issues. r=bz a=gchang
authorMats Palmgren <mats@mozilla.com>
Wed, 24 May 2017 14:54:50 +0200
changeset 394055 40bcde7aff0da5df22c2f7388cead96656a9a7ed
parent 394054 4183fa9f04182521e485da0402cc841cec008f43
child 394056 7166b44658df0723b16d43b7f884deb73c99f0ba
push id7348
push usermpalmgren@mozilla.com
push dateWed, 24 May 2017 12:55:06 +0000
treeherdermozilla-beta@7166b44658df [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, gchang
bugs1365614, 1357655
milestone54.0
Bug 1365614 part 2 - Backout bug 1357655. Removes support for [-webkit-]appearance for now b/c web compat issues. r=bz a=gchang
layout/reftests/native-theme/progress-overflow-small.html
layout/reftests/native-theme/reftest.list
layout/style/nsCSSProps.cpp
layout/style/nsRuleNode.cpp
layout/style/nsStyleStruct.cpp
layout/style/res/forms.css
layout/style/res/number-control.css
layout/style/test/property_database.js
toolkit/content/minimal-xul.css
widget/reftests/507947.html
widget/reftests/664925.xhtml
widget/reftests/reftest.list
--- a/layout/reftests/native-theme/progress-overflow-small.html
+++ b/layout/reftests/native-theme/progress-overflow-small.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <div style="-moz-appearance: progressbar; appearance: auto; width:180px; height:6px;">
-      <div style="-moz-appearance: progresschunk; appearance: auto; width:50%; height:100%;">
+    <div style="-moz-appearance: progressbar; width:180px; height:6px;">
+      <div style="-moz-appearance: progresschunk; width:50%; height:100%;">
       </div>
     </div>
   </body>
 </html>
--- a/layout/reftests/native-theme/reftest.list
+++ b/layout/reftests/native-theme/reftest.list
@@ -73,12 +73,12 @@ skip-if(!winWidget) == scroll-thumb-mini
 
 == checkbox-dynamic-1.html checkbox-dynamic-1-ref.html
 
 # These tests have been written to test the overflow of the window widget
 # (bug 568825) but we can't test it on Windows and Cocoa because they have
 # animated progress bars.
 # Nothing shows up on Android, presumably because that appearance type is
 # not implemented.
-pref(layout.css.moz-appearance.enabled,true) pref(layout.css.appearance.enabled,true) skip-if(cocoaWidget) skip-if(winWidget) == progress-overflow.html progress-overflow-ref.html
-pref(layout.css.moz-appearance.enabled,true) pref(layout.css.appearance.enabled,true) fails-if(Android) skip-if(cocoaWidget) skip-if(winWidget) != progress-overflow-small.html progress-nobar.html
+pref(layout.css.moz-appearance.enabled,true) skip-if(cocoaWidget) skip-if(winWidget) == progress-overflow.html progress-overflow-ref.html
+pref(layout.css.moz-appearance.enabled,true) fails-if(Android) skip-if(cocoaWidget) skip-if(winWidget) != progress-overflow-small.html progress-nobar.html
 
 == 676387-1.xul 676387-1-ref.xul
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -739,18 +739,18 @@ const KTableEntry nsCSSProps::kAnimation
 
 const KTableEntry nsCSSProps::kAnimationPlayStateKTable[] = {
   { eCSSKeyword_running, NS_STYLE_ANIMATION_PLAY_STATE_RUNNING },
   { eCSSKeyword_paused, NS_STYLE_ANIMATION_PLAY_STATE_PAUSED },
   { eCSSKeyword_UNKNOWN, -1 }
 };
 
 const KTableEntry nsCSSProps::kAppearanceKTable[] = {
+  { eCSSKeyword_auto,    NS_THEME_AUTO },
   { eCSSKeyword_none,    NS_THEME_NONE },
-  { eCSSKeyword_auto,    NS_THEME_AUTO },
   { eCSSKeyword_UNKNOWN, -1 }
 };
 
 const KTableEntry nsCSSProps::kMozAppearanceKTable[] = {
   { eCSSKeyword_none,                   NS_THEME_NONE },
   { eCSSKeyword_button,                 NS_THEME_BUTTON },
   { eCSSKeyword_radio,                  NS_THEME_RADIO },
   { eCSSKeyword_checkbox,               NS_THEME_CHECKBOX },
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -6151,22 +6151,22 @@ nsRuleNode::ComputeDisplayData(void* aSt
 
   // -moz-appearance: enum, inherit, initial
   SetValue(*aRuleData->ValueForMozAppearance(),
            display->mMozAppearance, conditions,
            SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
            parentDisplay->mMozAppearance,
            NS_THEME_NONE);
 
-  // appearance: none | auto
+  // appearance: auto | none
   SetValue(*aRuleData->ValueForAppearance(),
            display->mAppearance, conditions,
            SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
            parentDisplay->mAppearance,
-           NS_THEME_NONE);
+           NS_THEME_AUTO);
 
   // binding: url, none, inherit
   const nsCSSValue* bindingValue = aRuleData->ValueForBinding();
   if (eCSSUnit_URL == bindingValue->GetUnit()) {
     mozilla::css::URLValue* url = bindingValue->GetURLStructValue();
     NS_ASSERTION(url, "What's going on here?");
 
     if (MOZ_LIKELY(url->GetURI())) {
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -3210,17 +3210,17 @@ StyleAnimation::operator==(const StyleAn
 // --------------------
 // nsStyleDisplay
 //
 nsStyleDisplay::nsStyleDisplay(const nsPresContext* aContext)
   : mDisplay(StyleDisplay::Inline)
   , mOriginalDisplay(StyleDisplay::Inline)
   , mContain(NS_STYLE_CONTAIN_NONE)
   , mMozAppearance(NS_THEME_NONE)
-  , mAppearance(NS_THEME_NONE)
+  , mAppearance(NS_THEME_AUTO)
   , mPosition(NS_STYLE_POSITION_STATIC)
   , mFloat(StyleFloat::None)
   , mOriginalFloat(StyleFloat::None)
   , mBreakType(StyleClear::None)
   , mBreakInside(NS_STYLE_PAGE_BREAK_AUTO)
   , mBreakBefore(false)
   , mBreakAfter(false)
   , mOverflowX(NS_STYLE_OVERFLOW_VISIBLE)
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -83,17 +83,16 @@ label {
 
 /* default inputs, text inputs, and selects */
 
 /* Note: Values in nsNativeTheme IsWidgetStyled function
    need to match textfield background/border values here */
 
 input {
   -moz-appearance: textfield;
-  appearance: auto;
   /* The sum of border and padding on block-start and block-end
      must be the same here, for buttons, and for <select> (including its
      internal padding magic) */
   padding: 1px;
   border: 2px inset ThreeDLightShadow;
   background-color: -moz-Field;
   color: -moz-FieldText;
   font: -moz-field;
@@ -147,17 +146,16 @@ textarea {
   text-transform: none;
   word-spacing: normal;
   letter-spacing: normal;
   vertical-align: text-bottom;
   cursor: text;
   resize: both;
   -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas");
   -moz-appearance: textfield-multiline;
-  appearance: auto;
   text-indent: 0;
   -moz-user-select: text;
   text-shadow: none;
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-clip-box: content-box;
 }
 
@@ -247,17 +245,16 @@ select {
   line-height: normal !important;
   white-space: nowrap !important;
   word-wrap: normal !important;
   text-align: start;
   cursor: default;
   box-sizing: border-box;
   -moz-user-select: none;
   -moz-appearance: menulist;
-  appearance: auto;
   border-width: 2px;
   border-style: inset;
   text-indent: 0;
   overflow: -moz-hidden-unscrollable;
   text-shadow: none;
   /* No text-decoration reaching inside, by default */
   display: inline-block;
   page-break-inside: avoid;
@@ -274,39 +271,36 @@ select[size][multiple] {
   background-color: -moz-Field;
   color: -moz-FieldText;
   vertical-align: text-bottom;
   padding-block-start: 1px;
   padding-block-end: 1px;
   padding-inline-start: 0;
   padding-inline-end: 0;
   -moz-appearance: listbox;
-  appearance: auto;
 }
 
 select[size="0"],
 select[size="1"] {
   /* Except this is not a listbox */
   background-color: -moz-Combobox;
   color: -moz-ComboboxText;
   vertical-align: baseline;
   padding: 0;
   -moz-appearance: menulist;
-  appearance: auto;
 }
 
 select > button {
   inline-size: 12px;
   white-space: nowrap;
   position: static !important;
   background-image: url("arrow.gif") !important;
   background-repeat: no-repeat !important;
   background-position: center !important;
   -moz-appearance: menulist-button;
-  appearance: auto;
 
   /* Make sure to size correctly if the combobox has a non-auto height. */
   block-size: 100% ! important;
   box-sizing: border-box ! important;
 
   /*
     Make sure to align properly with the display frame.  Note that we
     want the baseline of the combobox to match the baseline of the
@@ -549,28 +543,26 @@ input[type="file"]:dir(rtl) > xul|label 
   padding-inline-start: 0px;
   padding-inline-end: 5px;
 }
 
 /* radio buttons */
 input[type="radio"] {
   display: inline-block;
   -moz-appearance: radio;
-  appearance: auto;
   margin-block-start: 3px;
   margin-block-end: 0px;
   margin-inline-start: 5px;
   margin-inline-end: 3px;
 }
 
 /* check boxes */
 input[type="checkbox"] {
   display: inline-block;
   -moz-appearance: checkbox;
-  appearance: auto;
   margin-block-start: 3px;
   margin-block-end: 3px;
   margin-inline-start: 4px;
   margin-inline-end: 3px;
 }
 
 /* common features of radio buttons and check boxes */
 
@@ -668,17 +660,16 @@ input[type="search"] {
 /* Non text-related properties for buttons: these ones are shared with
    input[type="color"] */
 button,
 input[type="color"]:-moz-system-metric(color-picker-available),
 input[type="reset"],
 input[type="button"],
 input[type="submit"] {
   -moz-appearance: button;
-  appearance: auto;
   /* The sum of border and padding on block-start and block-end
      must be the same here, for text inputs, and for <select>.
      Note -moz-focus-inner padding does not affect button size. */
   padding-block-start: 0px;
   padding-inline-end: 8px;
   padding-block-end: 0px;
   padding-inline-start: 8px;
   border: 2px outset ThreeDLightShadow;
@@ -893,17 +884,16 @@ output:-moz-ui-invalid {
     -moz-user-input: none !important;
   }
 
   input[type="file"] { height: 2em; }
 }
 
 progress {
   -moz-appearance: progressbar;
-  appearance: auto;
   display: inline-block;
   vertical-align: -0.2em;
 
   /* Default style in case of there is -moz-appearance: none; */
   border: 2px solid;
   /* #e6e6e6 is a light gray. */
   -moz-border-top-colors: ThreeDShadow #e6e6e6;
   -moz-border-right-colors: ThreeDHighlight #e6e6e6;
@@ -916,42 +906,39 @@ progress {
   /* Prevent styling that would change the type of frame we construct. */
   display: inline-block ! important;
   float: none ! important;
   position: static ! important;
   overflow: visible ! important;
   box-sizing: border-box ! important;
 
   -moz-appearance: progresschunk;
-  appearance: auto;
   height: 100%;
   width: 100%;
 
   /* Default style in case of there is -moz-appearance: none; */
   background-color: #0064b4; /* blue */
 }
 
 meter {
   -moz-appearance: meterbar;
-  appearance: auto;
   display: inline-block;
   vertical-align: -0.2em;
 
   background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
 }
 
 ::-moz-meter-bar {
   /* Block styles that would change the type of frame we construct. */
   display: inline-block ! important;
   float: none ! important;
   position: static ! important;
   overflow: visible ! important;
 
   -moz-appearance: meterchunk;
-  appearance: auto;
   height: 100%;
   width: 100%;
 }
 
 :-moz-meter-optimum::-moz-meter-bar {
   /* green. */
   background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
 }
@@ -961,17 +948,16 @@ meter {
 }
 :-moz-meter-sub-sub-optimum::-moz-meter-bar {
   /* red. */
   background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
 }
 
 input[type=range] {
   -moz-appearance: range;
-  appearance: auto;
   display: inline-block;
   inline-size: 12em;
   block-size: 1.3em;
   margin-inline-start: 0.7em;
   margin-inline-end: 0.7em;
   margin-block-start: 0;
   margin-block-end: 0;
   /* Override some rules that apply on all input types: */
@@ -1079,17 +1065,16 @@ input[type=range]::-moz-range-progress {
  * logic to position it). Specifically the 'margin', 'top' and 'left'
  * properties are ignored.
  */
 input[type=range]::-moz-range-thumb {
   /* Native theming is atomic for range. Set -moz-appearance on the range
    * to get rid of it. The thumb's -moz-appearance is fixed.
    */
   -moz-appearance: range-thumb !important;
-  appearance: auto !important;
   /* Prevent styling that would change the type of frame we construct. */
   display: inline-block !important;
   float: none !important;
   position: static !important;
   width: 1em;
   height: 1em;
   border: 0.1em solid #999;
   border-radius: 0.5em;
@@ -1152,17 +1137,16 @@ input[type=number]::-moz-number-spin-box
   max-height: 1em;
   align-self: center;
   justify-content: center;
 }
 
 input[type=number]::-moz-number-spin-up {
   writing-mode: horizontal-tb;
   -moz-appearance: spinner-upbutton;
-  appearance: auto;
   display: block; /* bug 926670 */
   flex: none;
   cursor: default;
   /* Style for when native theming is off: */
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,4 L3,0 5,4" fill="dimgrey"/></svg>');
   background-repeat: no-repeat;
   background-position: center bottom;
   border: 1px solid darkgray;
@@ -1171,17 +1155,16 @@ input[type=number]::-moz-number-spin-up 
      as we probably don't want to turn the spinner sideways in vertical writing mode */
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
 
 input[type=number]::-moz-number-spin-down {
   writing-mode: horizontal-tb;
   -moz-appearance: spinner-downbutton;
-  appearance: auto;
   display: block; /* bug 926670 */
   flex: none;
   cursor: default;
   /* Style for when native theming is off: */
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,1 L3,5 5,1" fill="dimgrey"/></svg>');
   background-repeat: no-repeat;
   background-position: center top;
   border: 1px solid darkgray;
--- a/layout/style/res/number-control.css
+++ b/layout/style/res/number-control.css
@@ -4,16 +4,15 @@
 
 /* This file exists purely because we need the styling for input[type=number]
  * to apply only if the pref dom.forms.number is true. Once bug 677302 is
  * fixed this rule can move back to forms.css.
  */
 
 input[type="number"] {
   -moz-appearance: number-input;
-  appearance: auto;
   /* Has to revert some properties applied by the generic input rule. */
   -moz-binding: none;
   inline-size: 20ch; /* It'd be nice if this matched the default inline-size
                         of <input type=text>, but that's not easy to achieve
                         due to platform differences. */
 }
 
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -7778,18 +7778,18 @@ if (IsCSSPropertyPrefEnabled("layout.css
   gCSSProperties["display"].other_values.push("flow-root");
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.appearance.enabled")) {
   gCSSProperties["appearance"] = {
     domProp: "appearance",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "none" ],
-    other_values: [ "auto" ],
+    initial_values: [ "auto" ],
+    other_values: [ "none" ],
     invalid_values: [ "button" ]
   };
   gCSSProperties["-webkit-appearance"] = {
     domProp: "webkitAppearance",
     inherited: false,
     type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     alias_for: "appearance",
     subproperties: [ "appearance" ],
--- a/toolkit/content/minimal-xul.css
+++ b/toolkit/content/minimal-xul.css
@@ -17,17 +17,16 @@
  * THIS FILE IS LOCKED DOWN.  YOU ARE NOT ALLOWED TO MODIFY IT WITHOUT FIRST
  * HAVING YOUR CHANGES REVIEWED BY enndeakin@gmail.com
  */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
 @namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
 
 * {
-  appearance: auto; /* make -moz-appearance work on all XUL elements */
   -moz-user-focus: ignore;
   -moz-user-select: none;
   display: -moz-box;
   box-sizing: border-box;
 }
 
 :root {
   text-rendering: optimizeLegibility;
--- a/widget/reftests/507947.html
+++ b/widget/reftests/507947.html
@@ -1,2 +1,2 @@
 <!DOCTYPE html>
-<div style="height: 100px; -moz-appearance: toolbar; appearance: auto"></div>
+<div style="height: 100px; -moz-appearance: toolbar;"></div>
--- a/widget/reftests/664925.xhtml
+++ b/widget/reftests/664925.xhtml
@@ -1,1 +1,1 @@
-<html xmlns="http://www.w3.org/1999/xhtml"><div><td style="-moz-appearance: progressbar; appearance: auto"></td></div></html>
+<html xmlns="http://www.w3.org/1999/xhtml"><div><td style="-moz-appearance: progressbar;"></td></div></html>
--- a/widget/reftests/reftest.list
+++ b/widget/reftests/reftest.list
@@ -1,6 +1,6 @@
-pref(layout.css.moz-appearance.enabled,true) pref(layout.css.appearance.enabled,true) skip-if(!cocoaWidget) != 507947.html about:blank
+pref(layout.css.moz-appearance.enabled,true) skip-if(!cocoaWidget) != 507947.html about:blank
 pref(layout.css.moz-appearance.enabled,true) == progressbar-fallback-default-style.html progressbar-fallback-default-style-ref.html
 fuzzy-if(Android,17,1120) == meter-native-style.html meter-native-style-ref.html
 skip-if(!cocoaWidget) == meter-vertical-native-style.html meter-vertical-native-style-ref.html # dithering
 pref(layout.css.moz-appearance.enabled,true) == meter-fallback-default-style.html meter-fallback-default-style-ref.html
-pref(layout.css.moz-appearance.enabled,true) pref(layout.css.appearance.enabled,true) load 664925.xhtml
+pref(layout.css.moz-appearance.enabled,true) load 664925.xhtml