1 files changed, 72 insertions, 0 deletions
diff --git a/layout/forms/test/test_unstyled_control_height.html b/layout/forms/test/test_unstyled_control_height.html
new file mode 100644
index 0000000000..ad5cd125d2
--- /dev/null
+++ b/layout/forms/test/test_unstyled_control_height.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<meta charset="utf-8">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<style>
+  #container *, #container2 * {
+    white-space: nowrap;
+    appearance: none;
+  }
+  input {
+    /* Reduce the width so that container can fit all its children in 600px viewport width. */
+    width: 100px;
+  }
+  /* date by default uses a monospace font, which might have different metrics */
+  input, button, select {
+    font: Menu;
+  }
+  .small-font * {
+    font-size: 8px !important; /* important to override rule above */
+  }
+  .no-padding * {
+    padding: 0;
+  }
+</style>
+
+<!-- Each container should fit all its children in the same line to verify every
+     child has the same |top|. -->
+<div id="container">
+  <input>
+  <!-- Putting the <input> containing Burmese characters here is just to verify
+       our current behavior. They are slightly clipped. So if we fix it by
+       making the <input> taller, it's OK to remove it from this test. -->
+  <input value="漢字 jpg မြန်မာစာ">
+  <input type=date>
+  <button>Foo</button>
+  <select><option>Foo</option></select>
+</div>
+
+<br>
+<div id="container2">
+  <button>漢字 Foo မြန်မာစာ</button>
+  <select><option>漢字 Foo မြန်မာစာ</option></select>
+</div>
+
+<script>
+function testHeightMatches(id, desc) {
+  let commonHeight = null;
+  let commonTop = null;
+  for (let element of document.querySelectorAll(`#${id} > *`)) {
+    let rect = element.getBoundingClientRect();
+    if (commonHeight === null) {
+      commonHeight = rect.height;
+      commonTop = rect.top;
+    }
+    is(rect.height, commonHeight, `Height of the controls should match for ${element.outerHTML}${desc}`);
+    is(rect.top, commonTop, `Top of the controls should match for ${element.outerHTML}${desc}`);
+  }
+}
+
+for (id of ["container", "container2"]) {
+  const container = document.getElementById(id);
+
+  testHeightMatches(id, "");
+
+  container.className = "no-padding";
+
+  testHeightMatches(id, " without padding");
+
+  container.className = "small-font";
+
+  testHeightMatches(id, " with an small font");
+}
+</script>