summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/input/range
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/forms/input/range')
-rw-r--r--layout/reftests/forms/input/range/100pct-common-ref.html6
-rw-r--r--layout/reftests/forms/input/range/75pct-common-ref.html6
-rw-r--r--layout/reftests/forms/input/range/75pct-unthemed-common-ref.html6
-rw-r--r--layout/reftests/forms/input/range/auto-size-ref.html59
-rw-r--r--layout/reftests/forms/input/range/auto-size.html50
-rw-r--r--layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html6
-rw-r--r--layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html7
-rw-r--r--layout/reftests/forms/input/range/direction-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/direction-unthemed-1.html7
-rw-r--r--layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html16
-rw-r--r--layout/reftests/forms/input/range/max-prop.html20
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-1-ref.html36
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-1.html30
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-2-ref.html35
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-2.html40
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-3-ref.html35
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-3.html40
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1.html6
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html6
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html6
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html6
-rw-r--r--layout/reftests/forms/input/range/range-border-background-ref.html26
-rw-r--r--layout/reftests/forms/input/range/range-border-background.html26
-rw-r--r--layout/reftests/forms/input/range/range-orient-block.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-horizontal-rtl.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-inline.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-vertical-rtl.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-vertical.html3
-rw-r--r--layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html92
-rw-r--r--layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html99
-rw-r--r--layout/reftests/forms/input/range/range-track-bg-ref.html16
-rw-r--r--layout/reftests/forms/input/range/range-track-bg.html9
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-block.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-inline.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-vertical.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-block.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-inline.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-vertical.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl.html3
-rw-r--r--layout/reftests/forms/input/range/reftest.list61
-rw-r--r--layout/reftests/forms/input/range/reset-value-ref.html14
-rw-r--r--layout/reftests/forms/input/range/reset-value.html14
-rw-r--r--layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html9
-rw-r--r--layout/reftests/forms/input/range/stepDown-unthemed.html16
-rw-r--r--layout/reftests/forms/input/range/stepDown.html16
-rw-r--r--layout/reftests/forms/input/range/stepUp-unthemed.html16
-rw-r--r--layout/reftests/forms/input/range/stepUp.html16
-rw-r--r--layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html15
-rw-r--r--layout/reftests/forms/input/range/track-default-rendering-ref.html25
-rw-r--r--layout/reftests/forms/input/range/track-default-rendering.html22
-rw-r--r--layout/reftests/forms/input/range/value-prop-unthemed.html17
-rw-r--r--layout/reftests/forms/input/range/value-prop.html17
-rw-r--r--layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html17
-rw-r--r--layout/reftests/forms/input/range/valueAsNumber-prop.html17
61 files changed, 1055 insertions, 0 deletions
diff --git a/layout/reftests/forms/input/range/100pct-common-ref.html b/layout/reftests/forms/input/range/100pct-common-ref.html
new file mode 100644
index 0000000000..ef65c9297f
--- /dev/null
+++ b/layout/reftests/forms/input/range/100pct-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type=range value=100 max=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/75pct-common-ref.html b/layout/reftests/forms/input/range/75pct-common-ref.html
new file mode 100644
index 0000000000..929887d65a
--- /dev/null
+++ b/layout/reftests/forms/input/range/75pct-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type=range value=75>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
new file mode 100644
index 0000000000..a4b73e23ad
--- /dev/null
+++ b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type=range value=75 style="-moz-appearance:none">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/auto-size-ref.html b/layout/reftests/forms/input/range/auto-size-ref.html
new file mode 100644
index 0000000000..b1a4854b78
--- /dev/null
+++ b/layout/reftests/forms/input/range/auto-size-ref.html
@@ -0,0 +1,59 @@
+<!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>Reference: Testcase #1 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+ display: grid;
+ grid: 40px / auto;
+ float: left;
+ place-items: center start;
+ border: 1px solid;
+}
+grid.c {
+ grid: auto / 40px;
+ place-items: start center;
+}
+
+.v { writing-mode: vertical-lr; }
+
+/* fixed cross-size for the INPUT */
+input {
+ height: 30px;
+}
+.c input {
+ height: auto;
+ width: 30px;
+}
+
+ </style>
+</head>
+<body>
+
+<grid class=c><input type=range class=v></grid>
+<grid class=c><input type=range class=v></grid>
+<grid class=c><input type=range class=v></grid>
+
+<grid class=c><input type=range orient=vertical></grid>
+<grid class=c><input type=range orient=vertical></grid>
+<grid class=c><input type=range orient=vertical></grid>
+
+<grid><input type=range></grid>
+<grid><input type=range></grid>
+<grid><input type=range></grid>
+
+<grid><input type=range orient=horizontal class=v></grid>
+<grid><input type=range orient=horizontal class=v></grid>
+<grid><input type=range orient=horizontal class=v></grid>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/range/auto-size.html b/layout/reftests/forms/input/range/auto-size.html
new file mode 100644
index 0000000000..a5945a8188
--- /dev/null
+++ b/layout/reftests/forms/input/range/auto-size.html
@@ -0,0 +1,50 @@
+<!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 #1 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+ display: grid;
+ grid: 40px / auto;
+ float: left;
+ place-items: center start;
+ border: 1px solid;
+}
+grid.c {
+ grid: auto / 40px;
+ place-items: start center;
+}
+
+.v { writing-mode: vertical-lr; }
+
+ </style>
+</head>
+<body>
+
+<grid class=c><input type=range class=v></grid>
+<grid class=c><input type=range class=v style="width:max-content"></grid>
+<grid class=c><input type=range class=v style="width:min-content"></grid>
+
+<grid class=c><input type=range orient=vertical></grid>
+<grid class=c><input type=range orient=vertical style="width:max-content"></grid>
+<grid class=c><input type=range orient=vertical style="width:min-content"></grid>
+
+<grid><input type=range></grid>
+<grid><input type=range style="height:max-content"></grid>
+<grid><input type=range style="height:min-content"></grid>
+
+<grid><input type=range orient=horizontal class=v></grid>
+<grid><input type=range orient=horizontal class=v style="width:max-content"></grid>
+<grid><input type=range orient=horizontal class=v style="width:min-content"></grid>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
new file mode 100644
index 0000000000..3103fc7219
--- /dev/null
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
new file mode 100644
index 0000000000..d9514542f5
--- /dev/null
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: that range with value=70 is different to the default value=50. -->
+ <body>
+ <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1-ref.html b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
new file mode 100644
index 0000000000..f2758db17c
--- /dev/null
+++ b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type='range' value=30 style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1.html b/layout/reftests/forms/input/range/direction-unthemed-1.html
new file mode 100644
index 0000000000..162d555043
--- /dev/null
+++ b/layout/reftests/forms/input/range/direction-unthemed-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: that direction:rtl behaves correctly -->
+ <body>
+ <input type='range' value=70 style="-moz-appearance:none; direction:rtl;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
new file mode 100644
index 0000000000..ffb5ffa58d
--- /dev/null
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="checkbox" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
new file mode 100644
index 0000000000..0e1fffaf14
--- /dev/null
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should look
+ like that type (not like an input range element) -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById('i').type='checkbox';
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setToCheckbox);
+ </script>
+ <body>
+ <input type='range' id='i' style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/max-prop.html b/layout/reftests/forms/input/range/max-prop.html
new file mode 100644
index 0000000000..18a018330e
--- /dev/null
+++ b/layout/reftests/forms/input/range/max-prop.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'max' IDL property, the thumb of the range
+ should be moved to the appropriate position. This test also
+ sets the max to less than the current value which checks that the
+ rendering code handles repositioning correctly in the case that
+ sanitization of the value is needed for a non-value change. -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').max = "10";
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' max=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-1-ref.html b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html
new file mode 100644
index 0000000000..73af6dcb09
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+div {
+ margin: 0;
+ padding: 0;
+}
+
+.range {
+ display: inline-block;
+ position: relative;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+}
+
+.range-progress {
+ display: inline-block;
+ position: absolute;
+ top: 5px;
+ width: 50px;
+ height: 10px;
+ background-color: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <div class="range">
+ <div class="range-progress"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-1.html b/layout/reftests/forms/input/range/moz-range-progress-1.html
new file mode 100644
index 0000000000..8adc101128
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-progress {
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-track,
+input[type=range]::-moz-range-thumb {
+ visibility: hidden;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-2-ref.html b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html
new file mode 100644
index 0000000000..fd914edfd5
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=0>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-2.html b/layout/reftests/forms/input/range/moz-range-progress-2.html
new file mode 100644
index 0000000000..ffe43266ce
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-progress {
+ height: 10px;
+ background-color: red;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=0>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-3-ref.html b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html
new file mode 100644
index 0000000000..623f608101
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-3.html b/layout/reftests/forms/input/range/moz-range-progress-3.html
new file mode 100644
index 0000000000..365c62c99b
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-3.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: red;
+}
+
+input[type=range]::-moz-range-progress {
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
new file mode 100644
index 0000000000..3103fc7219
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
new file mode 100644
index 0000000000..24dccffeae
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
new file mode 100644
index 0000000000..8bf48f7e98
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" value="50" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
new file mode 100644
index 0000000000..ffb5ffa58d
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="checkbox" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/range-border-background-ref.html b/layout/reftests/forms/input/range/range-border-background-ref.html
new file mode 100644
index 0000000000..4f1f44c7a7
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-border-background-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+input { height: 2em; }
+</style>
+<div style="float:left">
+<input type=range><br>
+<span style="display:inline-block; background-color:rgba(0,255,0,0.3);"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top; background: none"></span><br>
+</div>
+
+<div style="float:left">
+<span><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br>
+</div>
+
+<div style="float:left">
+<input type=range><br>
+<span style="display:inline-block; background-color: -moz-Field; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==)"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top; background: none"></span><br>
+</div>
+
+<div style="float:left">
+<input type=range><br>
+<span style="display:inline-block; border:1px solid green"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br>
+</div>
diff --git a/layout/reftests/forms/input/range/range-border-background.html b/layout/reftests/forms/input/range/range-border-background.html
new file mode 100644
index 0000000000..bd4ea3419e
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-border-background.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+input { height: 2em; }
+</style>
+<div style="float:left">
+<input type=range style="background-color:rgba(0,255,0,0.3)"><br>
+<input type=range style="-webkit-appearance:none; background-color:rgba(0,255,0,0.3); margin:0"><br>
+</div>
+
+<div style="float:left">
+<span style="background:red"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br>
+</div>
+
+<div style="float:left">
+<input type=range style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==)"><br>
+<input type=range style="-webkit-appearance:none; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==); margin:0"><br>
+</div>
+
+<div style="float:left">
+<input type=range style="border:1px solid red"><br>
+<input type=range style="-webkit-appearance:none; border:1px solid green; margin:0"><br>
+</div>
diff --git a/layout/reftests/forms/input/range/range-orient-block.html b/layout/reftests/forms/input/range/range-orient-block.html
new file mode 100644
index 0000000000..df4a3e250f
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html
new file mode 100644
index 0000000000..01fe1f75ca
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=horizontal max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/input/range/range-orient-horizontal.html b/layout/reftests/forms/input/range/range-orient-horizontal.html
new file mode 100644
index 0000000000..be7bb4b0bb
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-inline.html b/layout/reftests/forms/input/range/range-orient-inline.html
new file mode 100644
index 0000000000..ef1012bd4a
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-vertical-rtl.html b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html
new file mode 100644
index 0000000000..205e7de023
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=vertical max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/input/range/range-orient-vertical.html b/layout/reftests/forms/input/range/range-orient-vertical.html
new file mode 100644
index 0000000000..321822f2b8
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html
new file mode 100644
index 0000000000..9951b8f57d
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: INPUT type=range percent intrinsic block-size</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959">
+ <style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace;
+}
+
+input { margin: 2px; }
+
+input.b {
+ min-height: 0;
+ background: lime;
+}
+
+input.mb {
+ min-height: 0;
+ max-height: 100%;
+ background: lime;
+}
+
+.n {
+ -webkit-appearance: none;
+}
+
+div {
+ display: inline-block;
+ border:1px solid;
+}
+
+.grid {
+ display: inline-grid;
+ grid: auto / min-content;
+ place-items: start;
+}
+input[orient="vertical"] {
+ -webkit-appearance: slider-vertical;
+ -webkit-appearance: range;
+ appearance: auto;
+}
+
+</style></head><body>
+
+<div style="height:30px"><div>
+ <input type="range" class="b n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
+ <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
+</div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
+ <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+<br>
+<br>
+
+<div style="height:30px"><div>
+ <input type="range" class="mb n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
+ <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+</body></html>
diff --git a/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html
new file mode 100644
index 0000000000..d87d9e2e55
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Test: INPUT type=range percent intrinsic block-size</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959">
+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero">
+ <link rel="match" href="range-percent-intrinsic-size-2b-ref.html">
+ <style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace;
+}
+
+input { margin: 2px; }
+
+input.b {
+ height: 50%;
+ min-height: -moz-min-content;
+ min-height: min-content;
+ background: lime;
+}
+
+input.mb {
+ max-height: 50%;
+ min-height: -moz-min-content;
+ min-height: min-content;
+ background: lime;
+}
+
+input.b.min-auto, input.mb.min-auto, {
+ min-height: auto;
+}
+
+.n {
+ -webkit-appearance: none;
+}
+
+div {
+ display: inline-block;
+ border:1px solid;
+}
+
+.grid {
+ display: inline-grid;
+ grid: auto / min-content;
+ place-items: start;
+}
+input[orient="vertical"] {
+ -webkit-appearance: slider-vertical;
+ -webkit-appearance: range;
+ appearance: auto;
+}
+
+</style></head><body>
+
+<div style="height:30px"><div>
+ <input type="range" class="b n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(min-content,30px) / auto">
+ <input type="range" class="b n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="b n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="b n min-auto" orient="vertical">
+</div>
+
+<br>
+<br>
+
+<div style="height:30px"><div>
+ <input type="range" class="mb n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: minmax(min-content,30px) / auto">
+ <input type="range" class="mb n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="mb n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="mb n min-auto" orient="vertical">
+</div>
+
+</body></html>
diff --git a/layout/reftests/forms/input/range/range-track-bg-ref.html b/layout/reftests/forms/input/range/range-track-bg-ref.html
new file mode 100644
index 0000000000..e99d3d0bfd
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-track-bg-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<style>
+input[orient="horizontal"]::-moz-range-track {
+ background-color: green;
+ block-size: 0.2em;
+ inline-size: 100%;
+}
+input[orient="vertical"]::-moz-range-track {
+ background-color: green;
+ inline-size: 0.2em;
+ block-size: 100%;
+}
+</style>
+<input type="range" orient="horizontal">
+<input type="range" orient="vertical">
diff --git a/layout/reftests/forms/input/range/range-track-bg.html b/layout/reftests/forms/input/range/range-track-bg.html
new file mode 100644
index 0000000000..b0a08e2b74
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-track-bg.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<style>
+input::-moz-range-track {
+ background-color: green;
+}
+</style>
+<input type="range">
+<input type="range" orient="vertical">
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-block.html b/layout/reftests/forms/input/range/range-vlr-orient-block.html
new file mode 100644
index 0000000000..b2d009bd82
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html
new file mode 100644
index 0000000000..406eb646ec
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-inline.html b/layout/reftests/forms/input/range/range-vlr-orient-inline.html
new file mode 100644
index 0000000000..0c26b41225
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr;direction:rtl" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-vertical.html b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
new file mode 100644
index 0000000000..f7bf70ff3a
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr;direction:rtl" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr.html b/layout/reftests/forms/input/range/range-vlr.html
new file mode 100644
index 0000000000..e3cc4b90fb
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr;direction:rtl" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-block.html b/layout/reftests/forms/input/range/range-vrl-orient-block.html
new file mode 100644
index 0000000000..07edd12586
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html
new file mode 100644
index 0000000000..66637c6526
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-inline.html b/layout/reftests/forms/input/range/range-vrl-orient-inline.html
new file mode 100644
index 0000000000..96ea874327
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl;direction:rtl" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-vertical.html b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
new file mode 100644
index 0000000000..a5ede81c33
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl;direction:rtl" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl.html b/layout/reftests/forms/input/range/range-vrl.html
new file mode 100644
index 0000000000..679170685e
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl;direction:rtl" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/reftest.list b/layout/reftests/forms/input/range/reftest.list
new file mode 100644
index 0000000000..181097dc15
--- /dev/null
+++ b/layout/reftests/forms/input/range/reftest.list
@@ -0,0 +1,61 @@
+
+# sanity checks:
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1c-notref.html
+
+# dynamic type changes:
+fuzzy(0-1,0-40) == to-range-from-other-type-unthemed-1.html to-range-from-other-type-unthemed-1-ref.html
+== from-range-to-other-type-unthemed-1.html from-range-to-other-type-unthemed-1-ref.html
+
+# for different values:
+!= different-fraction-of-range-unthemed-1.html different-fraction-of-range-unthemed-1-notref.html
+== same-fraction-of-range-unthemed-1.html same-fraction-of-range-unthemed-1-ref.html
+
+# dynamic value changes:
+fuzzy(0-1,0-40) == value-prop-unthemed.html 75pct-unthemed-common-ref.html
+== value-prop.html 75pct-common-ref.html
+fuzzy(0-1,0-40) == valueAsNumber-prop-unthemed.html 75pct-unthemed-common-ref.html
+== valueAsNumber-prop.html 75pct-common-ref.html
+fuzzy(0-1,0-40) == stepDown-unthemed.html 75pct-unthemed-common-ref.html
+== stepDown.html 75pct-common-ref.html
+fuzzy(0-1,0-40) == stepUp-unthemed.html 75pct-unthemed-common-ref.html
+== stepUp.html 75pct-common-ref.html
+random-if(Android) == max-prop.html 100pct-common-ref.html # Snapping in different ways in debug and opt builds, bug 1621141
+fuzzy(0-1,0-4) == reset-value.html reset-value-ref.html
+
+# 'direction' property:
+== direction-unthemed-1.html direction-unthemed-1-ref.html
+
+# ::-moz-range-progress pseudo-element:
+== moz-range-progress-1.html moz-range-progress-1-ref.html
+== moz-range-progress-2.html moz-range-progress-2-ref.html
+== moz-range-progress-3.html moz-range-progress-3-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= range-orient-horizontal.html range-orient-vertical.html
+!= range-orient-horizontal.html range-orient-horizontal-rtl.html
+== range-orient-block.html range-orient-vertical.html
+== range-orient-inline.html range-orient-horizontal.html
+== range-vlr.html range-orient-vertical.html
+== range-vlr-orient-block.html range-orient-horizontal.html
+== range-vlr-orient-inline.html range-orient-vertical.html
+== range-vlr-orient-horizontal.html range-orient-horizontal.html
+== range-vlr-orient-vertical.html range-orient-vertical.html
+== range-vrl.html range-orient-vertical-rtl.html
+== range-vrl-orient-block.html range-orient-horizontal-rtl.html
+== range-vrl-orient-inline.html range-orient-vertical-rtl.html
+== range-vrl-orient-horizontal.html range-orient-horizontal-rtl.html
+== range-vrl-orient-vertical.html range-orient-vertical-rtl.html
+
+skip-if(Android) == range-border-background.html range-border-background-ref.html # Android doesn't have a native theme for -webkit-appearance:range
+
+# 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
+
+fails-if(Android) fuzzy(0-2,0-80) == auto-size.html auto-size-ref.html # Snapping, bug 1621141
+== range-track-bg.html range-track-bg-ref.html
+!= track-default-rendering.html track-default-rendering-ref.html
diff --git a/layout/reftests/forms/input/range/reset-value-ref.html b/layout/reftests/forms/input/range/reset-value-ref.html
new file mode 100644
index 0000000000..74675c2d7a
--- /dev/null
+++ b/layout/reftests/forms/input/range/reset-value-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-us">
+ <head>
+ <title>1080352</title>
+ </head>
+ <body>
+ <form id="form">
+ <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br>
+ <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br>
+
+ <input type='reset'><br>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/reset-value.html b/layout/reftests/forms/input/range/reset-value.html
new file mode 100644
index 0000000000..2ccb367657
--- /dev/null
+++ b/layout/reftests/forms/input/range/reset-value.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-us">
+ <head>
+ <title>1080352</title>
+ </head>
+ <body onload="inputRange.value=40;inputNumber.value=40; form.reset()">
+ <form id="form">
+ <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br>
+ <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br>
+
+ <input type='reset'><br>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
new file mode 100644
index 0000000000..6aefd17bca
--- /dev/null
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" value=70 style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
new file mode 100644
index 0000000000..3c9f0e7ce3
--- /dev/null
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: that range with value=90,min=90,max=120 looks the same as range
+ with value=70 (also tests that it doesn't look like type=text, since the
+ text displayed would be different in the type=text case). -->
+ <body>
+ <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepDown-unthemed.html b/layout/reftests/forms/input/range/stepDown-unthemed.html
new file mode 100644
index 0000000000..6d4d6708a5
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepDown-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepDown();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=100 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepDown.html b/layout/reftests/forms/input/range/stepDown.html
new file mode 100644
index 0000000000..e482af4905
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepDown.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepDown();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=100 step=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepUp-unthemed.html b/layout/reftests/forms/input/range/stepUp-unthemed.html
new file mode 100644
index 0000000000..1e4198cc66
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepUp-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepUp();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepUp.html b/layout/reftests/forms/input/range/stepUp.html
new file mode 100644
index 0000000000..139e6c797c
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepUp.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepUp();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
new file mode 100644
index 0000000000..3103fc7219
--- /dev/null
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
new file mode 100644
index 0000000000..86ff0c5214
--- /dev/null
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element changed to range state doesn't look like checkbox state -->
+ <script type="text/javascript">
+ function setToRange()
+ {
+ document.getElementById('i').type='range';
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setToRange);
+ </script>
+ <body>
+ <input type='checkbox' id='i' style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/track-default-rendering-ref.html b/layout/reftests/forms/input/range/track-default-rendering-ref.html
new file mode 100644
index 0000000000..d702d021c5
--- /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>
diff --git a/layout/reftests/forms/input/range/track-default-rendering.html b/layout/reftests/forms/input/range/track-default-rendering.html
new file mode 100644
index 0000000000..997b83d202
--- /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>
diff --git a/layout/reftests/forms/input/range/value-prop-unthemed.html b/layout/reftests/forms/input/range/value-prop-unthemed.html
new file mode 100644
index 0000000000..46387af2ea
--- /dev/null
+++ b/layout/reftests/forms/input/range/value-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').value = "75";
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/value-prop.html b/layout/reftests/forms/input/range/value-prop.html
new file mode 100644
index 0000000000..66be837045
--- /dev/null
+++ b/layout/reftests/forms/input/range/value-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').value = "75";
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
new file mode 100644
index 0000000000..a2a6eb6cce
--- /dev/null
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').valueAsNumber = 75;
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop.html b/layout/reftests/forms/input/range/valueAsNumber-prop.html
new file mode 100644
index 0000000000..c00fe8bf4c
--- /dev/null
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').valueAsNumber = 75;
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25>
+ </body>
+</html>