From 2aa4a82499d4becd2284cdb482213d541b8804dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 28 Apr 2024 16:29:10 +0200
Subject: Adding upstream version 86.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../forms/input/number/clipped-text-ref.html       |  9 ++++
 .../reftests/forms/input/number/clipped-text.html  |  9 ++++
 layout/reftests/forms/input/number/flex-ref.html   | 22 ++++++++
 layout/reftests/forms/input/number/flex.html       | 23 ++++++++
 .../forms/input/number/focus-handling-ref.html     | 26 +++++++++
 .../forms/input/number/focus-handling.html         | 34 ++++++++++++
 .../from-number-to-other-type-unthemed-1-ref.html  |  6 +++
 .../from-number-to-other-type-unthemed-1.html      | 16 ++++++
 .../input/number/not-other-type-unthemed-1.html    |  6 +++
 .../number/not-other-type-unthemed-1a-notref.html  |  6 +++
 .../number/not-other-type-unthemed-1b-notref.html  |  6 +++
 .../input/number/number-auto-width-1-ref.html      |  8 +++
 .../forms/input/number/number-auto-width-1.html    |  8 +++
 .../forms/input/number/number-disabled-ref.html    |  9 ++++
 .../forms/input/number/number-disabled.html        |  9 ++++
 .../input/number/number-localized-notref.html      |  2 +
 .../forms/input/number/number-localized.html       |  2 +
 .../input/number/number-max-height-1-ref.html      | 17 ++++++
 .../forms/input/number/number-max-height-1.html    | 27 ++++++++++
 .../input/number/number-max-height-2-ref.html      | 17 ++++++
 .../forms/input/number/number-max-height-2.html    | 27 ++++++++++
 .../input/number/number-min-height-1-ref.html      | 17 ++++++
 .../forms/input/number/number-min-height-1.html    | 26 +++++++++
 .../input/number/number-min-height-2-ref.html      | 17 ++++++
 .../forms/input/number/number-min-height-2.html    | 26 +++++++++
 .../forms/input/number/number-placeholder-ref.html | 17 ++++++
 .../forms/input/number/number-placeholder.html     | 24 +++++++++
 .../input/number/number-pseudo-elements-ref.html   |  6 +++
 .../forms/input/number/number-pseudo-elements.html | 19 +++++++
 .../number/number-reframe-anon-text-field-ref.html | 17 ++++++
 .../number/number-reframe-anon-text-field.html     | 44 +++++++++++++++
 .../input/number/number-same-as-text-unthemed.html |  6 +++
 .../forms/input/number/number-selected-ref.html    | 18 +++++++
 .../forms/input/number/number-selected.html        | 18 +++++++
 .../number-significant-fractional-digits-ref.html  |  6 +++
 .../number-significant-fractional-digits.html      | 17 ++++++
 .../number-similar-to-text-unthemed-ref.html       |  8 +++
 .../number-similar-to-text-unthemed-rtl-ref.html   |  8 +++
 .../number-similar-to-text-unthemed-rtl.html       |  8 +++
 ...r-similar-to-text-unthemed-vertical-lr-ref.html |  8 +++
 ...umber-similar-to-text-unthemed-vertical-lr.html |  8 +++
 ...r-similar-to-text-unthemed-vertical-rl-ref.html |  8 +++
 ...umber-similar-to-text-unthemed-vertical-rl.html |  8 +++
 .../number/number-similar-to-text-unthemed.html    |  8 +++
 .../input/number/number-style-inheritance-ref.html |  6 +++
 .../input/number/number-style-inheritance.html     |  6 +++
 .../forms/input/number/padding-001-notref.html     | 10 ++++
 .../forms/input/number/padding-001-ref.html        |  9 ++++
 .../reftests/forms/input/number/padding-001.html   | 10 ++++
 .../forms/input/number/padding-002-ref.html        |  8 +++
 .../reftests/forms/input/number/padding-002.html   |  8 +++
 .../forms/input/number/pseudo-classes.html         | 37 +++++++++++++
 layout/reftests/forms/input/number/reftest.list    | 62 ++++++++++++++++++++++
 .../forms/input/number/show-value-ref.html         | 26 +++++++++
 layout/reftests/forms/input/number/show-value.html | 42 +++++++++++++++
 .../to-number-from-other-type-unthemed-1-ref.html  |  6 +++
 .../to-number-from-other-type-unthemed-1.html      | 15 ++++++
 57 files changed, 876 insertions(+)
 create mode 100644 layout/reftests/forms/input/number/clipped-text-ref.html
 create mode 100644 layout/reftests/forms/input/number/clipped-text.html
 create mode 100644 layout/reftests/forms/input/number/flex-ref.html
 create mode 100644 layout/reftests/forms/input/number/flex.html
 create mode 100644 layout/reftests/forms/input/number/focus-handling-ref.html
 create mode 100644 layout/reftests/forms/input/number/focus-handling.html
 create mode 100644 layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/number/not-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
 create mode 100644 layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
 create mode 100644 layout/reftests/forms/input/number/number-auto-width-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-auto-width-1.html
 create mode 100644 layout/reftests/forms/input/number/number-disabled-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-disabled.html
 create mode 100644 layout/reftests/forms/input/number/number-localized-notref.html
 create mode 100644 layout/reftests/forms/input/number/number-localized.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-1.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-2-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-2.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-1.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-2-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-2.html
 create mode 100644 layout/reftests/forms/input/number/number-placeholder-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-placeholder.html
 create mode 100644 layout/reftests/forms/input/number/number-pseudo-elements-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-pseudo-elements.html
 create mode 100644 layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-reframe-anon-text-field.html
 create mode 100644 layout/reftests/forms/input/number/number-same-as-text-unthemed.html
 create mode 100644 layout/reftests/forms/input/number/number-selected-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-selected.html
 create mode 100644 layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-significant-fractional-digits.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
 create mode 100644 layout/reftests/forms/input/number/number-style-inheritance-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-style-inheritance.html
 create mode 100644 layout/reftests/forms/input/number/padding-001-notref.html
 create mode 100644 layout/reftests/forms/input/number/padding-001-ref.html
 create mode 100644 layout/reftests/forms/input/number/padding-001.html
 create mode 100644 layout/reftests/forms/input/number/padding-002-ref.html
 create mode 100644 layout/reftests/forms/input/number/padding-002.html
 create mode 100644 layout/reftests/forms/input/number/pseudo-classes.html
 create mode 100644 layout/reftests/forms/input/number/reftest.list
 create mode 100644 layout/reftests/forms/input/number/show-value-ref.html
 create mode 100644 layout/reftests/forms/input/number/show-value.html
 create mode 100644 layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html

(limited to 'layout/reftests/forms/input/number')

diff --git a/layout/reftests/forms/input/number/clipped-text-ref.html b/layout/reftests/forms/input/number/clipped-text-ref.html
new file mode 100644
index 0000000000..61157dfe41
--- /dev/null
+++ b/layout/reftests/forms/input/number/clipped-text-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+  input {
+    -moz-appearance: textfield;
+    height: 30px;
+    font-size: 300px;
+  }
+</style>
+<input type=text value=1111>
diff --git a/layout/reftests/forms/input/number/clipped-text.html b/layout/reftests/forms/input/number/clipped-text.html
new file mode 100644
index 0000000000..0681c03988
--- /dev/null
+++ b/layout/reftests/forms/input/number/clipped-text.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+  input {
+    -moz-appearance: textfield;
+    height: 30px;
+    font-size: 300px;
+  }
+</style>
+<input type=number value=1111>
diff --git a/layout/reftests/forms/input/number/flex-ref.html b/layout/reftests/forms/input/number/flex-ref.html
new file mode 100644
index 0000000000..4928292d61
--- /dev/null
+++ b/layout/reftests/forms/input/number/flex-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<style>
+  label {
+    padding: 2px 4px;
+    display: flex;
+    flex-flow: column;
+    background: #ddd;
+    overflow: hidden;
+    min-height: 0;
+    min-width: 0;
+    width: 80px;
+  }
+  input {
+    flex: 1 1 auto;
+    margin: 4px;
+    min-height: 0;
+    min-width: 0;
+  }
+</style>
+<label>
+  <input type="text">
+</label>
diff --git a/layout/reftests/forms/input/number/flex.html b/layout/reftests/forms/input/number/flex.html
new file mode 100644
index 0000000000..c0a6c26642
--- /dev/null
+++ b/layout/reftests/forms/input/number/flex.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<style>
+  label {
+    padding: 2px 4px;
+    display: flex;
+    flex-flow: column;
+    background: #ddd;
+    overflow: hidden;
+    min-height: 0;
+    min-width: 0;
+    width: 80px;
+  }
+  input {
+    flex: 1 1 auto;
+    margin: 4px;
+    min-height: 0;
+    min-width: 0;
+    -moz-appearance: textfield;
+  }
+</style>
+<label>
+  <input type="number">
+</label>
diff --git a/layout/reftests/forms/input/number/focus-handling-ref.html b/layout/reftests/forms/input/number/focus-handling-ref.html
new file mode 100644
index 0000000000..e07f83f993
--- /dev/null
+++ b/layout/reftests/forms/input/number/focus-handling-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- In this case we're using reftest-wait to make sure the test doesn't         
+       get snapshotted before it's been focused. We're not testing                 
+       invalidation so we don't need to listen for MozReftestInvalidate.           
+  -->
+  <head>
+    <meta charset="utf-8">
+    <script>
+
+function end() {
+  setTimeout(function() {
+    document.documentElement.className = "";
+  }, 0);
+}
+
+    </script>
+  </head>
+  <body>
+    <input style="-moz-appearance:none;"><br>
+    <input autofocus onfocus="end();"
+           style="-moz-appearance:none;">
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/focus-handling.html b/layout/reftests/forms/input/number/focus-handling.html
new file mode 100644
index 0000000000..6d6f8f0d51
--- /dev/null
+++ b/layout/reftests/forms/input/number/focus-handling.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- In this case we're using reftest-wait to make sure the test doesn't         
+       get snapshotted before it's been focused. We're not testing                 
+       invalidation so we don't need to listen for MozReftestInvalidate.           
+  -->                                                                              
+  <head>
+    <meta charset="utf-8">
+    <script>
+
+function begin() {
+  setTimeout(function() {
+    document.getElementsByTagName('input')[1].focus();
+  }, 0);
+}
+
+function end() {
+  setTimeout(function() {
+    document.documentElement.className = "";
+  }, 0);
+}
+
+    </script>
+  </head>
+  <body>
+    <input type='number' autofocus onfocus="begin();"
+           style="-moz-appearance:none;"><br>
+    <input type='number' onfocus="end();"
+           style="-moz-appearance:none;">
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
new file mode 100644
index 0000000000..ffb5ffa58d
--- /dev/null
+++ b/layout/reftests/forms/input/number/from-number-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/number/from-number-to-other-type-unthemed-1.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
new file mode 100644
index 0000000000..561b39bec3
--- /dev/null
+++ b/layout/reftests/forms/input/number/from-number-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 number element) -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById('i').type='checkbox';
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setToCheckbox);
+  </script>
+  <body>
+    <input type='number' id='i' style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
new file mode 100644
index 0000000000..7f0d427b41
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" value="1" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
new file mode 100644
index 0000000000..7c5a4dcaca
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" value="1" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
new file mode 100644
index 0000000000..ffb5ffa58d
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-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/number/number-auto-width-1-ref.html b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
new file mode 100644
index 0000000000..50b7b7e04b
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="-moz-appearance:none; width:auto;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-auto-width-1.html b/layout/reftests/forms/input/number/number-auto-width-1.html
new file mode 100644
index 0000000000..5c9cc0abed
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-auto-width-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none; width:auto;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-disabled-ref.html b/layout/reftests/forms/input/number/number-disabled-ref.html
new file mode 100644
index 0000000000..f3c9d4d562
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-disabled-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" disabled
+           style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-disabled.html b/layout/reftests/forms/input/number/number-disabled.html
new file mode 100644
index 0000000000..b4acb20a75
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-disabled.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" disabled
+           style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-localized-notref.html b/layout/reftests/forms/input/number/number-localized-notref.html
new file mode 100644
index 0000000000..8eadc65e08
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-localized-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=number value=1.25 step=0.01>
diff --git a/layout/reftests/forms/input/number/number-localized.html b/layout/reftests/forms/input/number/number-localized.html
new file mode 100644
index 0000000000..b6a9d7bf23
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-localized.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=number value=1.25 step=0.01 lang=de>
diff --git a/layout/reftests/forms/input/number/number-max-height-1-ref.html b/layout/reftests/forms/input/number/number-max-height-1-ref.html
new file mode 100644
index 0000000000..5f17a62425
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 308px;
+  height: 108px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-1.html b/layout/reftests/forms/input/number/number-max-height-1.html
new file mode 100644
index 0000000000..bf671a0f9e
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  height: 300px;
+  max-height: 100px;
+  box-sizing: content-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-2-ref.html b/layout/reftests/forms/input/number/number-max-height-2-ref.html
new file mode 100644
index 0000000000..8b654e7f98
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 294px;
+  height: 94px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-2.html b/layout/reftests/forms/input/number/number-max-height-2.html
new file mode 100644
index 0000000000..ff118ea238
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  height: 300px;
+  max-height: 100px;
+  box-sizing: border-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-1-ref.html b/layout/reftests/forms/input/number/number-min-height-1-ref.html
new file mode 100644
index 0000000000..5f17a62425
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 308px;
+  height: 108px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-1.html b/layout/reftests/forms/input/number/number-min-height-1.html
new file mode 100644
index 0000000000..75923b98b1
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  min-height: 100px;
+  box-sizing: content-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-2-ref.html b/layout/reftests/forms/input/number/number-min-height-2-ref.html
new file mode 100644
index 0000000000..8b654e7f98
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 294px;
+  height: 94px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-2.html b/layout/reftests/forms/input/number/number-min-height-2.html
new file mode 100644
index 0000000000..9f69e1eaee
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  min-height: 100px;
+  box-sizing: border-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-placeholder-ref.html b/layout/reftests/forms/input/number/number-placeholder-ref.html
new file mode 100644
index 0000000000..6076272436
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-placeholder-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  width: 15em;
+  color: blue;
+  font-style: italic;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number" value="123">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-placeholder.html b/layout/reftests/forms/input/number/number-placeholder.html
new file mode 100644
index 0000000000..5018255ca3
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-placeholder.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  width: 15em;
+}
+
+input[type=number]::placeholder {
+  color: blue;
+  opacity: 1.0;
+}
+
+input[type=number]::-moz-placeholder {
+  font-style: italic;
+  opacity: 1.0;
+}
+    </style>
+  </head>
+  <body>
+    <input type="number" placeholder="123">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements-ref.html b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
new file mode 100644
index 0000000000..263aeff1f8
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements.html b/layout/reftests/forms/input/number/number-pseudo-elements.html
new file mode 100644
index 0000000000..0212ba9d6d
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-pseudo-elements.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+/* None of these selectors should match from content */
+input[type=number]::-moz-complex-control-wrapper,
+input[type=number]::-moz-number-spin-box,
+input[type=number]::-moz-number-spin-up,
+input[type=number]::-moz-number-spin-down {
+  background-color: red;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
new file mode 100644
index 0000000000..aa58e491ef
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  font-size: 30pt;
+  background-color: lightblue;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html
new file mode 100644
index 0000000000..52945d6a63
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <style>
+
+input {
+  font-size: 30pt;
+  background-color: lightblue;
+}
+
+    </style>
+    <script>
+
+document.addEventListener("DOMContentLoaded", function() {
+  document.body.style.backgroundImage = "none";
+});
+
+function PostRebuildAllStyleDataEvent() {
+  // trigger http://mxr.mozilla.org/mozilla-central/source/layout/base/RestyleManager.cpp?rev=a8b06549f680#1490
+  var m = document.createElementNS("http://www.w3.org/1998/Math/MathML", "math");
+  document.head.appendChild(m);
+  document.head.removeChild(m);
+}
+
+function reframe() {
+  PostRebuildAllStyleDataEvent();
+  document.documentElement.className = "";
+}
+
+document.addEventListener("MozReftestInvalidate", function() {
+  // Calling reframe now would be too early to reproduce the bug that we're
+  // testing for. Note that in the event that we start faling this test this
+  // timeout may make the failure seem intermittent when in fact we would
+  // always fail if it was longer.
+  setTimeout(reframe, 500);
+});
+
+    </script>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
new file mode 100644
index 0000000000..fddcc33eb0
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none; width:200px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-selected-ref.html b/layout/reftests/forms/input/number/number-selected-ref.html
new file mode 100644
index 0000000000..3b9b33b23d
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-selected-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+  document.getElementById("i").select();
+  document.documentElement.className = "";
+});
+
+    </script>
+  </head>
+  <body>
+    <input id="i" type="text" value="123">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-selected.html b/layout/reftests/forms/input/number/number-selected.html
new file mode 100644
index 0000000000..25ab24be4b
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-selected.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+  document.getElementById("i").select();
+  document.documentElement.className = "";
+});
+
+    </script>
+  </head>
+  <body>
+    <input id="i" type="number" value="123">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
new file mode 100644
index 0000000000..d576830254
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" value="1.00100000000001" style="width:100%;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits.html b/layout/reftests/forms/input/number/number-significant-fractional-digits.html
new file mode 100644
index 0000000000..5e8db0bc57
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-significant-fractional-digits.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+  document.getElementById("i").stepUp();
+  document.documentElement.className = "";
+});
+
+    </script>
+  </head>
+  <body>
+    <input id="i" type="number" value="1.001" step="0.00000000000001"
+           style="width:100%;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
new file mode 100644
index 0000000000..abb0b240dc
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="-moz-appearance:none; width:200px;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
new file mode 100644
index 0000000000..79644edc8b
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body style="direction: rtl">
+    <input type="text" style="-moz-appearance:none; width:200px;" value="1">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
new file mode 100644
index 0000000000..36ffc06299
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body style="direction: rtl">
+    <input type="number" style="-moz-appearance:none; width:200px;" value="1">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
new file mode 100644
index 0000000000..6deed48916
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+  <body>
+    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
new file mode 100644
index 0000000000..7a78830629
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+  <body>
+    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
new file mode 100644
index 0000000000..73a5373877
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+  <body>
+    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
new file mode 100644
index 0000000000..3bc3a388a1
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+  <body>
+    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
new file mode 100644
index 0000000000..f8c2ce65da
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none; width:200px;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-style-inheritance-ref.html b/layout/reftests/forms/input/number/number-style-inheritance-ref.html
new file mode 100644
index 0000000000..00c8dba43a
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-style-inheritance-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="width: 100px; text-decoration: underline;" value="1234">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-style-inheritance.html b/layout/reftests/forms/input/number/number-style-inheritance.html
new file mode 100644
index 0000000000..b21ff1f1c8
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-style-inheritance.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="width: 100px; -moz-appearance: textfield; text-decoration: underline;" value="1234">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/padding-001-notref.html b/layout/reftests/forms/input/number/padding-001-notref.html
new file mode 100644
index 0000000000..de85ee169b
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-001-notref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+input {
+  box-sizing: border-box;
+  padding: 2em;
+  height: 1em;
+  -moz-appearance: textfield;
+}
+</style>
+<input type=number>
diff --git a/layout/reftests/forms/input/number/padding-001-ref.html b/layout/reftests/forms/input/number/padding-001-ref.html
new file mode 100644
index 0000000000..90c2f78ee2
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-001-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+input {
+  box-sizing: border-box;
+  padding: 2em;
+  height: 1em;
+}
+</style>
+<input type=text value=1111>
diff --git a/layout/reftests/forms/input/number/padding-001.html b/layout/reftests/forms/input/number/padding-001.html
new file mode 100644
index 0000000000..cc2f5c7094
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-001.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+input {
+  box-sizing: border-box;
+  padding: 2em;
+  height: 1em;
+  -moz-appearance: textfield;
+}
+</style>
+<input type=number value=1111>
diff --git a/layout/reftests/forms/input/number/padding-002-ref.html b/layout/reftests/forms/input/number/padding-002-ref.html
new file mode 100644
index 0000000000..0a42417770
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-002-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+input {
+  padding: 10px 0 0;
+  -moz-appearance: textfield;
+}
+</style>
+<input type=text value=1111>
diff --git a/layout/reftests/forms/input/number/padding-002.html b/layout/reftests/forms/input/number/padding-002.html
new file mode 100644
index 0000000000..5c94be0883
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-002.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+input {
+  padding: 10px 0 0;
+  -moz-appearance: textfield;
+}
+</style>
+<input type=number value=1111>
diff --git a/layout/reftests/forms/input/number/pseudo-classes.html b/layout/reftests/forms/input/number/pseudo-classes.html
new file mode 100644
index 0000000000..71555581bc
--- /dev/null
+++ b/layout/reftests/forms/input/number/pseudo-classes.html
@@ -0,0 +1,37 @@
+<!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 pseudo-classes on number controls</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1250315">
+  <link rel="help" href="https://drafts.csswg.org/selectors-4/#rw-pseudos">
+  <link rel="match" href="about:blank">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+#t1:read-only { display:none; }
+#t1:read-write { display:block; }
+
+#t2:read-write { display:none; }
+#t2:read-only { display:block; }
+
+#t3:disabled { display:none; }
+#t3:enabled { display:block; }
+
+#t4:enabled { display:none; }
+#t4:disabled { display:block; }
+
+  </style>
+</head>
+<body>
+
+<input id=t1 type=number readonly>
+<input id=t2 type=number>
+<input id=t3 type=number disabled>
+<input id=t4 type=number>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list
new file mode 100644
index 0000000000..4f38d171cf
--- /dev/null
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -0,0 +1,62 @@
+# 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
+
+# should look the same as type=text, except for the spin box
+== number-similar-to-text-unthemed.html number-similar-to-text-unthemed-ref.html
+== number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl-ref.html
+== number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr-ref.html
+== number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl-ref.html
+
+# dynamic type changes:
+fuzzy-if(cocoaWidget,0-63,0-4) fuzzy-if(skiaContent,0-2,0-5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1-ref.html
+fuzzy-if(skiaContent,0-2,0-5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1-ref.html
+
+# dynamic value changes:
+fuzzy-if(skiaContent,0-2,0-13) == show-value.html show-value-ref.html
+
+# disabled
+== number-disabled.html number-disabled-ref.html
+
+# auto width:
+== number-auto-width-1.html number-auto-width-1-ref.html
+== flex.html flex-ref.html
+
+# min-height/max-height tests:
+skip-if(Android) == number-min-height-1.html number-min-height-1-ref.html
+skip-if(Android) == number-min-height-2.html number-min-height-2-ref.html
+skip-if(Android) == number-max-height-1.html number-max-height-1-ref.html
+skip-if(Android) == number-max-height-2.html number-max-height-2-ref.html
+
+# number of significant fractional digits:
+fuzzy-if(!nativeThemePref,0-1,0-1) == number-significant-fractional-digits.html number-significant-fractional-digits-ref.html
+
+# focus
+fuzzy-if(skiaContent,0-2,0-5) needs-focus == focus-handling.html focus-handling-ref.html
+
+# select
+fuzzy-if(skiaContent,0-1,0-1) == number-selected.html number-selected-ref.html
+
+# pseudo-elements not usable from content:
+== number-pseudo-elements.html number-pseudo-elements-ref.html
+
+== number-placeholder.html number-placeholder-ref.html
+
+# check that if the anonymous text control is reframed, we reframe the whole
+# number control (the fuzzy is for the top-right and bottom-left of the border
+# bevel which gets slightly different antialiasing after invalidation):
+fuzzy(0-128,0-4) == number-reframe-anon-text-field.html number-reframe-anon-text-field-ref.html
+
+== pseudo-classes.html about:blank
+
+# Style inheritance:
+== number-style-inheritance.html number-style-inheritance-ref.html
+
+# l10n
+!= number-localized.html number-localized-notref.html
+
+== padding-001.html padding-001-ref.html
+!= padding-001.html padding-001-notref.html
+== padding-002.html padding-002-ref.html
+
+== clipped-text.html clipped-text-ref.html
diff --git a/layout/reftests/forms/input/number/show-value-ref.html b/layout/reftests/forms/input/number/show-value-ref.html
new file mode 100644
index 0000000000..c3d2c5564c
--- /dev/null
+++ b/layout/reftests/forms/input/number/show-value-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">                                                         
+    <style>                                                                        
+                                                                                   
+input {                                                                            
+  -moz-appearance: none;                                                           
+}                                                                                  
+                                                                                   
+    </style>                                                                       
+  </head>
+  <body>
+    <input value='142'><br>
+    <input value='142'><br>
+    <input value='142'><br>
+    <input value='142'><br>
+    <input value='142'><br>
+    <form>
+      <input value='142'>
+    </form>
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/show-value.html b/layout/reftests/forms/input/number/show-value.html
new file mode 100644
index 0000000000..5aae9922e8
--- /dev/null
+++ b/layout/reftests/forms/input/number/show-value.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <head>
+    <meta charset="utf-8">
+    <style>
+
+input {
+  -moz-appearance: none;
+}
+
+    </style>
+    <script>
+// Using "142" as the magic number as "1" in a monospace font should not have
+// stray leading or trailing antialised pixels that get clipped unexpectedly.
+
+function run() {
+  var numbers = document.getElementsByTagName('input');
+  numbers[2].style.display = 'inline-block'; // none -> inline-block
+  numbers[3].setAttribute('value', '142');
+  numbers[4].value = '142';
+  numbers[5].varue = '1337'; // deliberately misspelt - should not set value
+  document.forms[0].reset(); // numbers[5] value should be 42 again.
+  document.documentElement.className = '';
+}
+
+document.addEventListener("MozReftestInvalidate", run);
+
+    </script>
+  </head>
+  <body onload="run();">
+    <input type='number' value='142'><br>
+    <input value='142' type='number'><br>
+    <input type='number' value='142' style="display: none;"><br>
+    <input type='number' value='1337'><br>
+    <input type='number' value='1337'><br>
+    <form>
+      <input type='number' value='142'>
+    </form>
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
new file mode 100644
index 0000000000..263aeff1f8
--- /dev/null
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
new file mode 100644
index 0000000000..b0beffa56c
--- /dev/null
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element changed to number state doesn't look like checkbox state -->
+  <script type="text/javascript">
+    function setToNumber()
+    {
+      document.getElementById('i').type='number';
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setToNumber);
+  </script>
+  <body>
+    <input type='checkbox' id='i' style="-moz-appearance:none;">
+  </body>
+</html>
-- 
cgit v1.2.3