Bug 731447. Make buttons display:inline-block by default so that underlines don't reach into them. r=dbaron
authorBoris Zbarsky <bzbarsky@mit.edu>
Fri, 01 Jun 2012 11:45:37 -0400
changeset 95480 3a73e65c935e6e93310c553a00608c6f91359c46
parent 95479 0320cd89c3579836680fd8cb85b81f10bf5aea64
child 95481 3946bc720e97cee91c6bcebc968adf98ff9ac10d
push id10139
push userbzbarsky@mozilla.com
push dateFri, 01 Jun 2012 15:45:54 +0000
treeherdermozilla-inbound@3946bc720e97 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs731447
milestone15.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 731447. Make buttons display:inline-block by default so that underlines don't reach into them. r=dbaron
browser/components/safebrowsing/content/test/browser_bug400731.js
layout/reftests/text-decoration/reftest.list
layout/reftests/text-decoration/underline-button-1-ref.html
layout/reftests/text-decoration/underline-button-1.html
layout/reftests/text-decoration/underline-button-2-ref.html
layout/reftests/text-decoration/underline-button-2.html
layout/style/forms.css
--- a/browser/components/safebrowsing/content/test/browser_bug400731.js
+++ b/browser/components/safebrowsing/content/test/browser_bug400731.js
@@ -14,27 +14,27 @@ function test() {
 function testMalware() {
   window.removeEventListener("DOMContentLoaded", testMalware, true);
 
   // Confirm that "Ignore this warning" is visible - bug 422410
   var el = content.document.getElementById("ignoreWarningButton");
   ok(el, "Ignore warning button should be present for malware");
   
   var style = content.getComputedStyle(el, null);
-  is(style.display, "inline", "Ignore Warning button should be display:inline for malware");
+  is(style.display, "inline-block", "Ignore Warning button should be display:inline-block for malware");
   
   // Now launch the phishing test
   window.addEventListener("DOMContentLoaded", testPhishing, true);
   content.location = "http://www.mozilla.org/firefox/its-a-trap.html";
 }
 
 function testPhishing() {
   window.removeEventListener("DOMContentLoaded", testPhishing, true);
   
   var el = content.document.getElementById("ignoreWarningButton");
   ok(el, "Ignore warning button should be present for phishing");
   
   var style = content.getComputedStyle(el, null);
-  is(style.display, "inline", "Ignore Warning button should be display:inline for phishing");
+  is(style.display, "inline-block", "Ignore Warning button should be display:inline-block for phishing");
   
   gBrowser.removeCurrentTab();
   finish();
 }
--- a/layout/reftests/text-decoration/reftest.list
+++ b/layout/reftests/text-decoration/reftest.list
@@ -92,8 +92,11 @@ fails == underline-block-propagation-2-q
 == decoration-css21.html decoration-css21-ref.html
 == decoration-color-override-quirks.html decoration-color-override-quirks-ref.html
 == decoration-color-override-standards.html decoration-color-override-standards-ref.html
 != decoration-color-override-standards-ref.html decoration-color-override-quirks-ref.html
 == decoration-css21-block.html decoration-css21-block-ref.html
 != inline-baseline-almost-standards.html inline-baseline-almost-standards-ref.html
 != inline-baseline-quirks.html inline-baseline-quirks-ref.html
 == 676538-1.html 676538-1-ref.html
+== underline-button-1.html underline-button-1-ref.html
+== underline-button-2.html underline-button-2-ref.html
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/text-decoration/underline-button-1-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<body>
+  <span style="text-decoration: underline">
+    Some</span><button>text</button><span
+      style="text-decoration: underline">and a button
+  </span>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/text-decoration/underline-button-1.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+<body>
+  <span style="text-decoration: underline">
+    Some<button>text</button>and a button
+  </span>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/text-decoration/underline-button-2-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<body>
+  <span style="text-decoration: underline">
+    Some</span><button style="text-decoration: underline">text</button><span
+      style="text-decoration: underline">and a button
+  </span>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/text-decoration/underline-button-2.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+<body>
+  <span style="text-decoration: underline">
+    Some<button style="display: inline">text</button>and a button
+  </span>
+</body>
+</html>
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -510,16 +510,18 @@ input[type="submit"] {
   text-align: center;
   text-shadow: none;
 }
 
 button {
   /* Buttons should lay out like "normal" html, mostly */
   white-space: inherit;
   text-indent: 0;
+  /* But no text-decoration reaching inside, by default */
+  display: inline-block;
 }
 
 *|*::-moz-button-content {
   display: block;
 }
 
 button:hover,
 input[type="reset"]:hover,