Bug 1365614 part 2 - Backout bug 1357655. Removes support for [-webkit-]appearance for now b/c web compat issues. r=bz
authorMats Palmgren <mats@mozilla.com>
Thu, 18 May 2017 11:09:00 +0800
changeset 360104 483bc7b92cabf217c22f438e533f9b779a53041a
parent 360103 1ff0bd62e46112a6f783309cd62b47f34ae3e548
child 360105 b1daab599fecafbadad7377f0ded446dd6ad7559
push id31868
push userryanvm@gmail.com
push dateTue, 23 May 2017 14:32:52 +0000
treeherdermozilla-central@3a82a745123f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs1365614, 1357655
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1365614 part 2 - Backout bug 1357655. Removes support for [-webkit-]appearance for now b/c web compat issues. r=bz MozReview-Commit-ID: Ig0RVKSQw4r
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
@@ -737,18 +737,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
@@ -6070,22 +6070,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?");
     display->mBinding.Set(url);
   }
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -3336,17 +3336,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;
 }
 
@@ -256,17 +254,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;
@@ -283,39 +280,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
@@ -558,28 +552,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 */
 
@@ -677,17 +669,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;
@@ -902,17 +893,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;
@@ -925,42 +915,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%);
 }
@@ -970,17 +957,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: */
@@ -1088,17 +1074,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;
@@ -1161,17 +1146,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;
@@ -1180,17 +1164,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
@@ -7866,18 +7866,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