Bug 1583660 - Reinstate default background color / size for -moz-range-track on Android. r=jwatt a=lizzard
authorMats Palmgren <mats@mozilla.com>
Wed, 02 Oct 2019 21:04:32 +0000
changeset 555537 c631aa99490fd4043fb8e951f42bbc5006ee0a2c
parent 555536 a1cd93fdc7ff51c8f184d55f70f04d5426fabf0f
child 555538 281ce5e6022b3239c517fb93b231e4109031c8ee
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjwatt, lizzard
bugs1583660, 1481593, 1317870
milestone70.0
Bug 1583660 - Reinstate default background color / size for -moz-range-track on Android. r=jwatt a=lizzard This reverts the changes from bug 1481593 / bug 1317870 which broke the default rendering on Android only (since it doesn't have a native theme for <input type=range>). Differential Revision: https://phabricator.services.mozilla.com/D47345
layout/reftests/forms/input/range/reftest.list
layout/reftests/forms/input/range/track-default-rendering-ref.html
layout/reftests/forms/input/range/track-default-rendering.html
mobile/android/themes/geckoview/content.css
--- a/layout/reftests/forms/input/range/reftest.list
+++ b/layout/reftests/forms/input/range/reftest.list
@@ -53,8 +53,9 @@ skip-if(Android) == range-border-backgro
 # Other range-percent-intrinsic-size-*.html tests lives in
 # testing/web-platform/tests/css/css-sizing/.  Vertical layout with
 # -webkit-appearance:none isn't supported in other UAs so this test
 # is an internal reftest for now.
 == range-percent-intrinsic-size-2b.html range-percent-intrinsic-size-2b-ref.html
 
 == auto-size.html auto-size-ref.html
 == range-track-bg.html range-track-bg-ref.html
+!= track-default-rendering.html track-default-rendering-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/track-default-rendering-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 -->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1583660</title>
+  <style>
+    input::-moz-range-thumb {
+      visibility:hidden;
+    }
+    input::-moz-range-track {
+      background: transparent;
+    }
+  </style>
+</head>
+<body>
+
+<input type=range>
+<input type=range orient=vertical>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/track-default-rendering.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 -->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1583660</title>
+  <style>
+    input::-moz-range-thumb {
+      visibility:hidden;
+    }
+  </style>
+</head>
+<body>
+
+<input type=range>
+<input type=range orient=vertical>
+
+</body>
+</html>
--- a/mobile/android/themes/geckoview/content.css
+++ b/mobile/android/themes/geckoview/content.css
@@ -291,16 +291,35 @@ input[type=number] > div > div, /* work 
 input[type=number]::-moz-number-spin-box {
   display: none;
 }
 
 button:-moz-native-anonymous.datetime-reset-button {
   display: none;
 }
 
+input[type=range]::-moz-range-track {
+  background-color: #999;
+}
+
+input[type=range][orient=block]::-moz-range-track {
+  inline-size: 0.2em;
+  block-size: 100%;
+}
+
+input[type=range][orient=horizontal]::-moz-range-track {
+  width: 100%;
+  height: 0.2em;
+}
+
+input[type=range][orient=vertical]::-moz-range-track {
+  width: 0.2em;
+  height: 100%;
+}
+
 /* Override accessiblecaret css in layout/style/ua.css */
 div:-moz-native-anonymous.moz-accessiblecaret > #text-overlay,
 div:-moz-native-anonymous.moz-accessiblecaret > #image {
   /* border: 0.1px solid red; */ /* Uncomment border to see the touch target. */
   padding-left: 59%; /* Enlarge the touch area. ((48-22)/2)px / 22px ~= 59% */
   padding-right: 59%; /* Enlarge the touch area. */
   left: -59%;
 }