Bug 418833 - Make non-native checkbox and radio input styles look right in Fennec. r=snorp
authorMike Conley <mconley@mozilla.com>
Thu, 10 Nov 2016 20:46:46 -0500
changeset 323627 ec772ba1b1d931df819b4bb4896b1493976c67be
parent 323626 a9da196a78847a286f46b2e818ea1f18c43ac9ec
child 323628 9f7debc99bf8e9012d0a4dd1858d8ad6d001ab57
push id21
push usermaklebus@msu.edu
push dateThu, 01 Dec 2016 06:22:08 +0000
reviewerssnorp
bugs418833
milestone53.0a1
Bug 418833 - Make non-native checkbox and radio input styles look right in Fennec. r=snorp <input>'s of type checkbox and radio are rendered as native widgets by default on Desktop, but on Fennec, we fallback to using the built-in, non-native checkboxes. The earlier patches in this series made it possible for agent, user and page stylesheets to make changes to the non-native checkbox and radio input fields. Unfortunately, some of the default agent styles for those checkbox and radio elements on Fennec were accidentally setting rules that they shouldn't. That wasn't a problem before because the inputs couldn't be styled before. Now that they can, we're failing a bunch of reftests because the inputs look wrong in certain situations. For example: 1) We were setting background: var(--form_background) for every radio and checkbox input. --form_background is just a colour though, and that meant that the rest of the background styles were being overwritten. This has been fixed by setting background-color: var(--form_background) instead. The same also applied to some usage of --form_background_disabled. 2) We were setting border-radius: var(--form_border_radius) on all input elements, but this was putting rounded corners on the checkbox and radio inputs as well. This rule has been modified to skip checkbox and radio inputs. MozReview-Commit-ID: CnpTRXcCxoY
mobile/android/themes/core/content.css
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -95,24 +95,30 @@ select[size="1"] xul|scrollbarbutton {
 }
 
 /* Override inverse OS themes */
 textarea,
 button,
 xul|button,
 * > input:not([type="image"]) {
   -moz-appearance: none !important;  /* See bug 598421 for fixing the platform */
+}
+
+textarea,
+button,
+xul|button,
+* > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])) {
   border-radius: var(--form_border_radius);
 }
 
 select[size],
 select[multiple],
 select[size][multiple],
 textarea,
-* > input:not([type="image"]):not([type="image"]) {
+* > input:not([type="image"]) {
   border-style: solid;
   border-color: var(--form_border);
   color: var(--form_text);
   background-color: var(--form_background);
 }
 
 /* Selects are handled by the form helper, see bug 685197 */
 select option, select optgroup {
@@ -128,21 +134,21 @@ select[size="1"],
 button {
   border-style: solid;
   border-color: var(--form_border);
   color: var(--form_text);
   background-color: var(--form_background);
 }
 
 input[type="checkbox"] {
-  background: var(--form_background);
+  background-color: var(--form_background);
 }
 
 input[type="radio"] {
-  background: var(--form_background)
+  background-color: var(--form_background)
 }
 
 select {
   border-width: 1px;
   padding: 1px;
   border-radius: var(--form_border_radius);
 }
 
@@ -228,21 +234,21 @@ button:focus {
 }
 
 input[type="checkbox"]:focus,
 input[type="radio"]:focus {
   border-color: var(--form_border) !important;
 }
 
 input[type="checkbox"]:focus {
-  background: var(--form_background);
+  background-color: var(--form_background);
 }
 
 input[type="radio"]:focus {
-  background: var(--form_background);
+  background-color: var(--form_background);
 }
 
 /* we need to be specific for selects because the above rules are specific too */
 textarea:disabled,
 select[size]:disabled,
 select[multiple]:disabled,
 select[size][multiple]:disabled,
 select:not([size]):not([multiple]):disabled,
@@ -251,38 +257,38 @@ select[size="1"]:disabled,
 button:disabled,
 button:disabled:active,
 * > input:not([type="image"]):disabled,
 * > input:not([type="image"]):disabled:active {
   color: var(--form_text_disabled);
   border-color: var(--form_border);
   border-style: solid;
   border-width: 1px;
-  background: var(--form_background_disabled);
+  background-color: var(--form_background_disabled);
 }
 
 select:not([size]):not([multiple]):disabled,
 select[size="0"]:disabled,
 select[size="1"]:disabled {
-  background: var(--form_background_disabled);
+  background-color: var(--form_background_disabled);
 }
 
 input[type="button"]:disabled,
 input[type="button"]:disabled:active,
 input[type="submit"]:disabled,
 input[type="submit"]:disabled:active,
 input[type="reset"]:disabled,
 input[type="reset"]:disabled:active,
 button:disabled,
 button:disabled:active {
   padding-inline-start: 7px;
   padding-inline-end: 7px;
   padding-block-start: 0;
   padding-block-end: 0;
-  background: var(--form_background_disabled);
+  background-color: var(--form_background_disabled);
 }
 
 input[type="radio"]:disabled,
 input[type="radio"]:disabled:active,
 input[type="radio"]:disabled:hover,
 input[type="radio"]:disabled:hover:active,
 input[type="checkbox"]:disabled,
 input[type="checkbox"]:disabled:active,