1 files changed, 30 insertions, 0 deletions
diff --git a/dom/html/test/forms/test_input_number_placeholder_shown.html b/dom/html/test/forms/test_input_number_placeholder_shown.html
new file mode 100644
index 0000000000..c9c2a7f515
--- /dev/null
+++ b/dom/html/test/forms/test_input_number_placeholder_shown.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>Test for :placeholder-shown on input elements and invalid values.</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<style>
+input {
+  border: 1px solid purple;
+}
+input:placeholder-shown {
+  border-color: blue;
+}
+</style>
+<input type="number" placeholder="foo">
+<script>
+  SimpleTest.waitForExplicitFinish();
+  SimpleTest.waitForFocus(function() {
+    test();
+    SimpleTest.finish();
+  });
+
+  function test() {
+    let input = document.querySelector('input');
+    input.focus();
+    is(getComputedStyle(input).borderLeftColor, "rgb(0, 0, 255)",
+       ":placeholder-shown should apply")
+    sendString("x");
+    isnot(getComputedStyle(input).borderLeftColor, "rgb(0, 0, 255)",
+          ":placeholder-shown should not apply, even though the value is invalid")
+  }
+</script>