Make <input type=button> magic clip not magic.

This implements the proposal in: whatwg/html#9976 MANUAL PUSH: see bug 1871425 Differential Revision: https://phabricator.services.mozilla.com/D195419 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1800077 gecko-commit: 6a14f603289807a62753cc8ceaa35d9ba09cbf61 gecko-reviewers: jwatt, zcorpan
web-platform-tests · Dec 21, 2023 · 412c23b · 412c23b
1 parent 5a0a131
commit 412c23b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/html/rendering/widgets/button-layout/computed-style.html b/html/rendering/widgets/button-layout/computed-style.html
@@ -7,6 +7,7 @@
  <input type="button">
  <input type="submit">
  <input type="color">
+ <input type="image">
  <button></button>
 </div>
 <script>
@@ -33,4 +34,19 @@
     }, `computed display of ${tag} with display: ${val}`);
   });
 }
-</script>
+
+for (let input of document.querySelectorAll("input")) {
+  test(() => {
+    if (input.type == "image") {
+      assert_equals(getComputedStyle(input).overflow, "visible", "Should not be clip by default");
+      return;
+    }
+    assert_equals(getComputedStyle(input).overflow, "clip", "Should be clip by default");
+    assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Should use 0 margin");
+    input.style.overflow = "visible";
+    input.style.overflowClipMargin = "10px";
+    assert_equals(getComputedStyle(input).overflow, "clip", "Clip be !important");
+    assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Clip margin should be !important too");
+  }, `<input type=${input.type}> overflow/overflow-clip-margin`);
+}
+</script>
diff --git a/html/rendering/widgets/button-layout/input-type-button-clip-ref.html b/html/rendering/widgets/button-layout/input-type-button-clip-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+  button {
+    width: 10ch;
+    overflow: clip;
+    text-overflow: ellipsis;
+  }
+</style>
+<button>aaaaaaaaaaaaaaaaaaaaaa</button>
diff --git a/html/rendering/widgets/button-layout/input-type-button-clip.html b/html/rendering/widgets/button-layout/input-type-button-clip.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>button input is clipped by default, and text-overflow: ellipsis works</title>
+<link rel="help" href="https://github.com/whatwg/html/issues/9976">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1800077">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="match" href="input-type-button-clip-ref.html">
+<style>
+  input {
+    width: 10ch;
+    text-overflow: ellipsis;
+  }
+</style>
+<input type="button" value="aaaaaaaaaaaaaaaaaaaaaa">