Bug 1800077 - Make <input type=button> magic clip not magic. r=jwatt,…

…zcorpan

This implements the proposal in: whatwg/html#9976

MANUAL PUSH: see bug 1871425

Differential Revision: https://phabricator.services.mozilla.com/D195419

layout/forms/nsGfxButtonControlFrame.h

@@ -55,8 +55,6 @@ class nsGfxButtonControlFrame final : public nsHTMLButtonControlFrame,
 
   nsresult GetLabel(nsString& aLabel);
 
-  virtual bool IsInput() override { return true; }
-
  private:
   RefPtr<nsTextNode> mTextContent;
 };

layout/forms/nsHTMLButtonControlFrame.cpp

@@ -10,12 +10,10 @@
 #include "mozilla/PresShell.h"
 #include "nsContainerFrame.h"
 #include "nsIFormControlFrame.h"
-#include "nsIFrameInlines.h"
 #include "nsPresContext.h"
+#include "nsLayoutUtils.h"
 #include "nsGkAtoms.h"
 #include "nsButtonFrameRenderer.h"
-#include "nsCSSAnonBoxes.h"
-#include "nsNameSpaceManager.h"
 #include "nsDisplayList.h"
 #include <algorithm>
 
@@ -69,7 +67,8 @@ nsresult nsHTMLButtonControlFrame::HandleEvent(nsPresContext* aPresContext,
 }
 
 bool nsHTMLButtonControlFrame::ShouldClipPaintingToBorderBox() {
-  return IsInput() || StyleDisplay()->mOverflowX != StyleOverflow::Visible;
+  // FIXME(emilio): probably should account for per-axis clipping...
+  return StyleDisplay()->mOverflowX != StyleOverflow::Visible;
 }
 
 void nsHTMLButtonControlFrame::BuildDisplayList(

layout/forms/nsHTMLButtonControlFrame.h

@@ -87,8 +87,6 @@ class nsHTMLButtonControlFrame : public nsContainerFrame,
   nsHTMLButtonControlFrame(ComputedStyle* aStyle, nsPresContext* aPresContext,
                            nsIFrame::ClassID aID);
 
-  virtual bool IsInput() { return false; }
-
   // Indicates whether we should clip our children's painting to our
   // border-box (either because of "overflow" or because of legacy reasons
   // about how <input>-flavored buttons work).

layout/reftests/css-grid/grid-item-overflow-stretch-005-ref.html

@@ -30,8 +30,8 @@
   box-sizing: border-box;
 }
 
-.oa, .os, .oh { width:80px; height:30px; }
-.m.oa, .m.os, .m.oh { width:70px; height:8px; }
+.oa, .os, .oh, .ov { width:80px; height:30px; }
+.m.oa, .m.os, .m.oh, .m.ov { width:70px; height:8px; }
 .oa { overflow: auto; }
 .os { overflow: scroll; }
 .oh { overflow: hidden; }

layout/style/res/forms.css

@@ -505,6 +505,7 @@ input:is([type=color], [type=reset], [type=button], [type=submit]) {
   cursor: default;
   box-sizing: border-box;
   user-select: none;
+  overflow-clip-box: padding-box;
 }
 
 /* Text-related properties for buttons: these ones are not shared with
@@ -516,7 +517,6 @@ input:is([type=reset], [type=button], [type=submit]) {
   font: -moz-button;
   white-space: pre;
   text-align: center;
-  overflow-clip-box: padding-box;
   padding-inline: 4px;
 }
 
@@ -526,6 +526,12 @@ input[type=color] {
   padding: 4px;
 }
 
+/* https://github.com/whatwg/html/issues/9976 */
+input:not([type=image i]) {
+  overflow: clip !important;
+  overflow-clip-margin: 0px !important;
+}
+
 button,
 ::file-selector-button {
   /* Buttons should lay out like "normal" html, mostly */

layout/style/test/test_dynamic_change_causing_reflow.html

@@ -56,7 +56,7 @@
     <div id="flexItemMovementTarget2"></div>
     <div class="absposFlexItem"></div>
   </div>
-  <input id="inputElem">
+  <input id="inputElem" type="image">
   <textarea id="textareaElem">
     Some
     lines

testing/web-platform/tests/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>

testing/web-platform/tests/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>

testing/web-platform/tests/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">