Bug 1357655 - Part 1: [css-ui] Make 'none' the initial value for 'appearance' for web and UA compatibility. Add 'appearance:auto' to UA sheets for form controls, XUL etc where needed. r=bz, a=gchang
authorMats Palmgren <mats@mozilla.com>
Fri, 21 Apr 2017 02:24:19 +0200
changeset 396016 3156446a325e9b4f752bfb588f4d6c9c3d089e2b
parent 396015 190b17491c5f2af655c5a52759f22f91393db557
child 396017 40bd1b4eb78c562a91b7b80e9200eaeb23867245
push id1468
push userasasaki@mozilla.com
push dateMon, 05 Jun 2017 19:31:07 +0000
treeherdermozilla-release@0641fc6ee9d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, gchang
bugs1357655
milestone54.0
Bug 1357655 - Part 1: [css-ui] Make 'none' the initial value for 'appearance' for web and UA compatibility. Add 'appearance:auto' to UA sheets for form controls, XUL etc where needed. r=bz, a=gchang MozReview-Commit-ID: 2h5ndqHresm
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
--- 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_none,    NS_THEME_NONE },
   { eCSSKeyword_auto,    NS_THEME_AUTO },
-  { eCSSKeyword_none,    NS_THEME_NONE },
   { 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: auto | none
+  // appearance: none | auto
   SetValue(*aRuleData->ValueForAppearance(),
            display->mAppearance, conditions,
            SETVAL_ENUMERATED | SETVAL_UNSET_INITIAL,
            parentDisplay->mAppearance,
-           NS_THEME_AUTO);
+           NS_THEME_NONE);
 
   // 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
@@ -3204,17 +3204,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_AUTO)
+  , mAppearance(NS_THEME_NONE)
   , 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,16 +83,17 @@ 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;
@@ -146,16 +147,17 @@ 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;
 }
 
@@ -245,16 +247,17 @@ 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;
@@ -271,36 +274,39 @@ 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
@@ -543,26 +549,28 @@ 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 */
 
@@ -692,16 +700,17 @@ 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;
@@ -916,16 +925,17 @@ 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;
@@ -938,39 +948,42 @@ 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%);
 }
@@ -980,16 +993,17 @@ 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: */
@@ -1097,16 +1111,17 @@ 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;
@@ -1169,16 +1184,17 @@ 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;
@@ -1187,16 +1203,17 @@ 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,15 +4,16 @@
 
 /* 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: [ "auto" ],
-    other_values: [ "none" ],
+    initial_values: [ "none" ],
+    other_values: [ "auto" ],
     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,16 +17,17 @@
  * 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;