summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/button
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/forms/button
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/forms/button')
-rw-r--r--layout/reftests/forms/button/disabled-1-ref.html16
-rw-r--r--layout/reftests/forms/button/disabled-1.html15
-rw-r--r--layout/reftests/forms/button/disabled-2-ref.html17
-rw-r--r--layout/reftests/forms/button/disabled-2.html17
-rw-r--r--layout/reftests/forms/button/disabled-3-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-3.html9
-rw-r--r--layout/reftests/forms/button/disabled-4-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-4.html9
-rw-r--r--layout/reftests/forms/button/disabled-5-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-5.html9
-rw-r--r--layout/reftests/forms/button/disabled-6-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-6.html9
-rw-r--r--layout/reftests/forms/button/display-grid-flex-columnset-ref.html61
-rw-r--r--layout/reftests/forms/button/display-grid-flex-columnset.html61
-rw-r--r--layout/reftests/forms/button/first-letter-1-noref.html5
-rw-r--r--layout/reftests/forms/button/first-letter-1-ref.html7
-rw-r--r--layout/reftests/forms/button/first-letter-1.html6
-rw-r--r--layout/reftests/forms/button/focus-area-percent-units-1-ref.html52
-rw-r--r--layout/reftests/forms/button/focus-area-percent-units-1.html62
-rw-r--r--layout/reftests/forms/button/focus-area-percent-units-2-ref.html68
-rw-r--r--layout/reftests/forms/button/focus-area-percent-units-2.html51
-rw-r--r--layout/reftests/forms/button/line-height-button-0.5.html7
-rw-r--r--layout/reftests/forms/button/line-height-button-1.0.html7
-rw-r--r--layout/reftests/forms/button/line-height-button-1.5.html7
-rw-r--r--layout/reftests/forms/button/line-height-input-0.5.html7
-rw-r--r--layout/reftests/forms/button/line-height-input-1.0.html7
-rw-r--r--layout/reftests/forms/button/line-height-input-1.5.html7
-rw-r--r--layout/reftests/forms/button/max-height-ref.html11
-rw-r--r--layout/reftests/forms/button/max-height.html11
-rw-r--r--layout/reftests/forms/button/min-height-ref.html17
-rw-r--r--layout/reftests/forms/button/min-height.html22
-rw-r--r--layout/reftests/forms/button/overflow-areas-1-ref.html48
-rw-r--r--layout/reftests/forms/button/overflow-areas-1.html51
-rw-r--r--layout/reftests/forms/button/percent-height-child-1-ref.html52
-rw-r--r--layout/reftests/forms/button/percent-height-child-1.html60
-rw-r--r--layout/reftests/forms/button/percent-height-child-2-ref.html54
-rw-r--r--layout/reftests/forms/button/percent-height-child-2.html63
-rw-r--r--layout/reftests/forms/button/percent-width-child-1-ref.html53
-rw-r--r--layout/reftests/forms/button/percent-width-child-1.html59
-rw-r--r--layout/reftests/forms/button/percent-width-child-2-ref.html55
-rw-r--r--layout/reftests/forms/button/percent-width-child-2.html62
-rw-r--r--layout/reftests/forms/button/reftest-stylo.list61
-rw-r--r--layout/reftests/forms/button/reftest.list48
-rw-r--r--layout/reftests/forms/button/vertical-centering-ref.html23
-rw-r--r--layout/reftests/forms/button/vertical-centering.html33
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-ltr-ref.html19
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-ltr.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-rtl-ref.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-rtl.html21
-rw-r--r--layout/reftests/forms/button/width-auto-size-ltr-ref.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-ltr.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-rtl-ref.html21
-rw-r--r--layout/reftests/forms/button/width-auto-size-rtl.html21
-rw-r--r--layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html20
-rw-r--r--layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html21
-rw-r--r--layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html21
-rw-r--r--layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html22
-rw-r--r--layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html20
-rw-r--r--layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html21
-rw-r--r--layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html21
-rw-r--r--layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html22
-rw-r--r--layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html20
-rw-r--r--layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html21
-rw-r--r--layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html21
-rw-r--r--layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html22
-rw-r--r--layout/reftests/forms/button/width-exact-fit-ltr.html21
-rw-r--r--layout/reftests/forms/button/width-exact-fit-rtl.html22
67 files changed, 1792 insertions, 0 deletions
diff --git a/layout/reftests/forms/button/disabled-1-ref.html b/layout/reftests/forms/button/disabled-1-ref.html
new file mode 100644
index 000000000..c408ec16f
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+ button {
+ color: GrayText;
+ border-width: 0;
+ background: transparent;
+ }
+</style>
+</head>
+<body>
+ <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-1.html b/layout/reftests/forms/button/disabled-1.html
new file mode 100644
index 000000000..6bcba667b
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+ button {
+ border-width: 0;
+ background: transparent;
+ }
+</style>
+</head>
+<body>
+ <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2-ref.html b/layout/reftests/forms/button/disabled-2-ref.html
new file mode 100644
index 000000000..53958f76b
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+ <button>Some text</button>
+ <button>Some text</button>
+ <button>Reset</button>
+ <button>Submit Query</button>
+ <br>
+ <button disabled>Some text</button>
+ <button disabled>Some text</button>
+ <button disabled>Reset</button>
+ <button disabled>Submit Query</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2.html b/layout/reftests/forms/button/disabled-2.html
new file mode 100644
index 000000000..a77287dfe
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+ <button>Some text</button>
+ <input type="button" value="Some text">
+ <input type="reset">
+ <input type="submit">
+ <br>
+ <button disabled>Some text</button>
+ <input disabled type="button" value="Some text">
+ <input disabled type="reset">
+ <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3-notref.html b/layout/reftests/forms/button/disabled-3-notref.html
new file mode 100644
index 000000000..bd8b45774
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3.html b/layout/reftests/forms/button/disabled-3.html
new file mode 100644
index 000000000..440d43b53
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4-notref.html b/layout/reftests/forms/button/disabled-4-notref.html
new file mode 100644
index 000000000..41fe9e610
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input disabled type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4.html b/layout/reftests/forms/button/disabled-4.html
new file mode 100644
index 000000000..38f71544a
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5-notref.html b/layout/reftests/forms/button/disabled-5-notref.html
new file mode 100644
index 000000000..d944d0421
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input disabled type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5.html b/layout/reftests/forms/button/disabled-5.html
new file mode 100644
index 000000000..ded7c1905
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6-notref.html b/layout/reftests/forms/button/disabled-6-notref.html
new file mode 100644
index 000000000..c6f0abce6
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6.html b/layout/reftests/forms/button/disabled-6.html
new file mode 100644
index 000000000..2a1d9cfa7
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset-ref.html b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
new file mode 100644
index 000000000..a176dd3e8
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 984869</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+.grid, .igrid {
+ display: grid;
+ grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+ display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset, .block-columnset {
+ -moz-columns: 2;
+ -ms-columns: 2;
+ -webkit-columns: 2;
+ columns: 2;
+}
+
+.block-columnset, .b { display: block; }
+
+a {
+ position: absolute;
+ right:0; bottom:0;
+ width:5px; height:5px;
+ background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+ </style>
+</head>
+<body>
+
+<button><wrap class="grid">x<span>y</span>z</wrap></button>
+<button><wrap class="iflex">x<span>y</span>z</wrap></button>
+<button><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="iflex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+<button class="b"><wrap class="grid">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="flex">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel b"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="flex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset.html b/layout/reftests/forms/button/display-grid-flex-columnset.html
new file mode 100644
index 000000000..86c8f587a
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 984869</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+.grid, .igrid {
+ display: grid;
+ grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+ display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset {
+ -moz-columns: 2;
+ -ms-columns: 2;
+ -webkit-columns: 2;
+ columns: 2;
+}
+
+.b { display: block; }
+
+a {
+ position: absolute;
+ right:0; bottom:0;
+ width:5px; height:5px;
+ background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+ </style>
+</head>
+<body>
+
+<button class="igrid">x<span>y</span>z</button>
+<button class="iflex">x<span>y</span>z</button>
+<button class="columnset">x<br><span>y</span>z</button>
+
+<button class="rel igrid">x<span>y</span>z<a></a></button>
+<button class="rel iflex">x<span>y</span>z<a></a></button>
+<button class="rel columnset">x<br><span>y</span>z<a></a></button>
+
+<button class="grid">x<span>y</span>z</button>
+<button class="flex">x<span>y</span>z</button>
+<button class="b columnset">x<br><span>y</span>z</button>
+
+<button class="rel grid">x<span>y</span>z<a></a></button>
+<button class="rel flex">x<span>y</span>z<a></a></button>
+<button class="rel b columnset">x<br><span>y</span>z<a></a></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/first-letter-1-noref.html b/layout/reftests/forms/button/first-letter-1-noref.html
new file mode 100644
index 000000000..d59db575f
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-noref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<style>
+ body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1-ref.html b/layout/reftests/forms/button/first-letter-1-ref.html
new file mode 100644
index 000000000..34ffa64f2
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+ button { display: block; }
+ button::first-letter { color: green; }
+ body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1.html b/layout/reftests/forms/button/first-letter-1.html
new file mode 100644
index 000000000..3dbf1667f
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<style>
+ button::first-letter { color: green; }
+ body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
new file mode 100644
index 000000000..6c66d5f17
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <title>Reference case for bug 1272983</title>
+ <style>
+ /* Set explicit font size so that em units are predictable: */
+ body, button { font: 10px sans-serif; }
+
+ /* Set margin to 0 for all cases. In the first 6, that's how we expect
+ the testcase to render; and in the 7th and 8th, our reference margin
+ will be applied via a child div instead of via the pseudo-element. */
+ button.mfi1::-moz-focus-inner,
+ button.mfi2::-moz-focus-inner,
+ button.mfi3::-moz-focus-inner,
+ button.mfi4::-moz-focus-inner,
+ button.mfi5::-moz-focus-inner,
+ button.mfi6::-moz-focus-inner,
+ button.mfi7::-moz-focus-inner,
+ button.mfi8::-moz-focus-inner { margin: 0; }
+
+ /* Use an explicit div instead of pseudo-element, for reference case's
+ version of margin values that we actually expect to take effect: */
+ button.mfi7 > div { margin: 10px; }
+ button.mfi8 > div { margin: 20px; /* = 2em * 20px/em */ }
+ </style>
+</head>
+<body>
+ <button class="mfi1">mfi1</button>
+ <button class="mfi2">mfi2</button>
+ <button class="mfi3">mfi3</button>
+ <button class="mfi4">mfi4</button>
+ <br>
+ <button class="mfi5">mfi5</button>
+ <button class="mfi6">mfi6</button>
+ <button class="mfi7"><div>mfi7</div></button>
+ <button class="mfi8"><div>mfi8</div></button>
+ <br>
+
+ <button class="mfo1">mfo1</button>
+ <button class="mfo2">mfo2</button>
+ <button class="mfo3">mfo3</button>
+ <button class="mfo4">mfo4</button>
+ <br>
+ <button class="mfo5">mfo5</button>
+ <button class="mfo6">mfo6</button>
+ <button class="mfo7">mfo7</button>
+ <button class="mfo8">mfo8</button>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1.html b/layout/reftests/forms/button/focus-area-percent-units-1.html
new file mode 100644
index 000000000..17d65b3b0
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
+ support CSS "margin" values that contain absolute lengths. Any percent or
+ "auto" margin values will simply make the margin collapse to zero.
+ This test verifies that this is indeed what happens (not anything worse).
+-->
+<head>
+ <title>Testcase for bug 1272983</title>
+ <style>
+ /* Set explicit font size so that em units are predictable: */
+ body, button { font: 10px sans-serif; }
+
+ /* Testing percent and auto margin values on "-moz-focus-inner": */
+ button.mfi1::-moz-focus-inner { margin: 50%; }
+ button.mfi2::-moz-focus-inner { margin: 50% 10px; }
+ button.mfi3::-moz-focus-inner { margin: 10px 50%; }
+ button.mfi4::-moz-focus-inner { margin: auto; }
+ button.mfi5::-moz-focus-inner { margin: auto 10px; }
+ button.mfi6::-moz-focus-inner { margin: 10px auto; }
+ button.mfi7::-moz-focus-inner { margin: 10px; }
+ button.mfi8::-moz-focus-inner { margin: 2em; }
+
+ /* Testing percent and auto margin values on "-moz-focus-outer":
+ (just for completeness -- really, 'margin' has no effect on
+ the behavior of -moz-focus-outer) */
+ button.mfo1::-moz-focus-outer { margin: 50%; }
+ button.mfo2::-moz-focus-outer { margin: 50% 10px; }
+ button.mfo3::-moz-focus-outer { margin: 10px 50%; }
+ button.mfo4::-moz-focus-outer { margin: auto; }
+ button.mfo5::-moz-focus-outer { margin: auto 10px; }
+ button.mfo6::-moz-focus-outer { margin: 10px auto; }
+ button.mfo7::-moz-focus-outer { margin: 10px; }
+ button.mfo8::-moz-focus-outer { margin: 2em; }
+ </style>
+</head>
+<body>
+ <button class="mfi1">mfi1</button>
+ <button class="mfi2">mfi2</button>
+ <button class="mfi3">mfi3</button>
+ <button class="mfi4">mfi4</button>
+ <br>
+ <button class="mfi5">mfi5</button>
+ <button class="mfi6">mfi6</button>
+ <button class="mfi7">mfi7</button>
+ <button class="mfi8">mfi8</button>
+ <br>
+
+ <button class="mfo1">mfo1</button>
+ <button class="mfo2">mfo2</button>
+ <button class="mfo3">mfo3</button>
+ <button class="mfo4">mfo4</button>
+ <br>
+ <button class="mfo5">mfo5</button>
+ <button class="mfo6">mfo6</button>
+ <button class="mfo7">mfo7</button>
+ <button class="mfo8">mfo8</button>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
new file mode 100644
index 000000000..6b6a6056d
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <title>Reference case for bug 1272983</title>
+ <style>
+ /* Set explicit font size so that em units are predictable: */
+ body, button { font: 10px sans-serif; }
+
+ /* Add outline to help visualize the padding outside of buttons: */
+ button { outline: 1px solid black; }
+
+ /* Set padding to 0 for all cases. In the first 3, that's how we expect
+ the testcase to render; and in the 4th and 5th, our reference padding
+ will be applied via a child div instead of via the pseudo-element. */
+ button.mfi1::-moz-focus-inner,
+ button.mfi2::-moz-focus-inner,
+ button.mfi3::-moz-focus-inner,
+ button.mfi4::-moz-focus-inner,
+ button.mfi5::-moz-focus-inner { padding: 0; }
+
+ /* Use an explicit div instead of pseudo-element, for reference case's
+ version of padding values that we actually expect to take effect: */
+ button.mfi4 > div { padding: 10px; }
+ button.mfi5 > div { padding: 2em; }
+
+ /* As above, set padding to 0 for all cases: */
+ button.mfo1::-moz-focus-outer,
+ button.mfo2::-moz-focus-outer,
+ button.mfo3::-moz-focus-outer,
+ button.mfo4::-moz-focus-outer,
+ button.mfo5::-moz-focus-outer { padding: 0; }
+
+ /* To make reference for -moz-focus-outer padding that we expect to
+ take effect, we'll put the padding on a wrapper-div (and bump the
+ button's outline to that div). */
+ div.mfo4-wrapper { padding: 10px; }
+ div.mfo5-wrapper { padding: 20px; /* = 2em * 10px/em */ }
+
+ button.mfo4,
+ button.mfo5 { outline: none; }
+ div.mfo4-wrapper,
+ div.mfo5-wrapper { display: inline-block; outline: 1px solid black; }
+ </style>
+</head>
+<body>
+ <button class="mfi1">mfi1</button>
+ <button class="mfi2">mfi2</button>
+ <button class="mfi3">mfi3</button>
+ <br>
+ <button class="mfi4"><div>mfi4</div></button>
+ <button class="mfi5"><div>mfi5</div></button>
+ <br>
+
+ <button class="mfo1">mfo1</button>
+ <button class="mfo2">mfo2</button>
+ <button class="mfo3">mfo3</button>
+ <br>
+ <div class="mfo4-wrapper">
+ <button class="mfo4">mfo4</button>
+ </div>
+ <div class="mfo5-wrapper">
+ <button class="mfo5">mfo5</button>
+ </div>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2.html b/layout/reftests/forms/button/focus-area-percent-units-2.html
new file mode 100644
index 000000000..3c0cb8612
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-2.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
+ support CSS "padding" values that contain absolute lengths. Any percent
+ padding values will simply make the padding collapse to zero.
+ This test verifies that this is indeed what happens (not anything worse).
+-->
+<head>
+ <title>Testcase for bug 1272983</title>
+ <style>
+ /* Set explicit font size so that em units are predictable: */
+ body, button { font: 10px sans-serif; }
+
+ /* Add outline to help visualize the padding outside of buttons: */
+ button { outline: 1px solid black; }
+
+ /* Testing percent and auto padding values on "-moz-focus-inner": */
+ button.mfi1::-moz-focus-inner { padding: 50%; }
+ button.mfi2::-moz-focus-inner { padding: 50% 10px; }
+ button.mfi3::-moz-focus-inner { padding: 10px 50%; }
+ button.mfi4::-moz-focus-inner { padding: 10px; }
+ button.mfi5::-moz-focus-inner { padding: 2em; }
+
+ /* Testing percent and auto padding values on "-moz-focus-outer": */
+ button.mfo1::-moz-focus-outer { padding: 50%; }
+ button.mfo2::-moz-focus-outer { padding: 50% 10px; }
+ button.mfo3::-moz-focus-outer { padding: 10px 50%; }
+ button.mfo4::-moz-focus-outer { padding: 10px; }
+ button.mfo5::-moz-focus-outer { padding: 2em; }
+ </style>
+</head>
+<body>
+ <button class="mfi1">mfi1</button>
+ <button class="mfi2">mfi2</button>
+ <button class="mfi3">mfi3</button>
+ <br>
+ <button class="mfi4">mfi4</button>
+ <button class="mfi5">mfi5</button>
+ <br>
+
+ <button class="mfo1">mfo1</button>
+ <button class="mfo2">mfo2</button>
+ <button class="mfo3">mfo3</button>
+ <br>
+ <button class="mfo4">mfo4</button>
+ <button class="mfo5">mfo5</button>
+ <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/line-height-button-0.5.html b/layout/reftests/forms/button/line-height-button-0.5.html
new file mode 100644
index 000000000..e3343d9e4
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 0.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.0.html b/layout/reftests/forms/button/line-height-button-1.0.html
new file mode 100644
index 000000000..2685624dc
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.0 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.5.html b/layout/reftests/forms/button/line-height-button-1.5.html
new file mode 100644
index 000000000..f86839fc3
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-input-0.5.html b/layout/reftests/forms/button/line-height-input-0.5.html
new file mode 100644
index 000000000..e3b6dd920
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 0.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.0.html b/layout/reftests/forms/button/line-height-input-1.0.html
new file mode 100644
index 000000000..18f8b4646
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.0 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.5.html b/layout/reftests/forms/button/line-height-input-1.5.html
new file mode 100644
index 000000000..ea486d14e
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/max-height-ref.html b/layout/reftests/forms/button/max-height-ref.html
new file mode 100644
index 000000000..ea12a8668
--- /dev/null
+++ b/layout/reftests/forms/button/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ button {
+ height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/max-height.html b/layout/reftests/forms/button/max-height.html
new file mode 100644
index 000000000..87ac8a979
--- /dev/null
+++ b/layout/reftests/forms/button/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ button {
+ max-height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/min-height-ref.html b/layout/reftests/forms/button/min-height-ref.html
new file mode 100644
index 000000000..5f0f2d654
--- /dev/null
+++ b/layout/reftests/forms/button/min-height-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+ border: 5px solid green;
+ background-color: blue;
+ height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/min-height.html b/layout/reftests/forms/button/min-height.html
new file mode 100644
index 000000000..cadffa78d
--- /dev/null
+++ b/layout/reftests/forms/button/min-height.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+ border: 5px solid green;
+ background-color: blue;
+}
+.btn1 {
+ min-height: 50px;
+}
+.btn2 {
+ height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1-ref.html b/layout/reftests/forms/button/overflow-areas-1-ref.html
new file mode 100644
index 000000000..a1eb50575
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <title>Reference case</title>
+ <style>
+ input, button {
+ border: 0; /* Combined, these mean the gray area is the */
+ background: lightgray; /* border-box size. */
+
+ outline: 2px solid black; /* The outlined area is the overflow area. */
+ width: 1px; /* (To attempt to trigger overflow) */
+
+ display: block; /* Put each button on its own line, w/ some margin, */
+ margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */
+
+ font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+ }
+
+ .oh { overflow: hidden }
+ </style>
+</head>
+<body>
+ <!-- For the reference case, we just put "overflow:hidden" on everything. -->
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <!-- ...with one exception: button with (default) overflow:visible.
+ Such buttons *do* actually allow their contents to overflow. -->
+ <button>ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1.html b/layout/reftests/forms/button/overflow-areas-1.html
new file mode 100644
index 000000000..b1a34dfe4
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- For buttons whose painting gets clipped to their border-box area,
+ we should *also* clip their overflow area (as exposed via 'outline').
+ This test exposes these areas so they can be visualized, and checks that
+ they match when we expect them to. -->
+<head>
+ <title>Testcase for bug 1261284</title>
+ <style>
+ input, button {
+ border: 0; /* Combined, these mean the gray area is the */
+ background: lightgray; /* border-box size. */
+
+ outline: 2px solid black; /* The outlined area is the overflow area. */
+ width: 1px; /* (To attempt to trigger overflow) */
+
+ display: block; /* Put each button on its own line, w/ some margin, */
+ margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */
+
+ font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+ }
+
+ .oh { overflow: hidden }
+ .oa { overflow: auto }
+ .os { overflow: scroll }
+ </style>
+</head>
+<body>
+ <input type="reset">
+ <input type="submit">
+ <input type="button" value="InputTypeButton">
+ <button>ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+
+ <input class="oa" type="reset">
+ <input class="oa" type="submit">
+ <input class="oa" type="button" value="InputTypeButton">
+ <button class="oa">ActualButton</button>
+
+ <input class="os" type="reset">
+ <input class="os" type="submit">
+ <input class="os" type="button" value="InputTypeButton">
+ <button class="os">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-1-ref.html b/layout/reftests/forms/button/percent-height-child-1-ref.html
new file mode 100644
index 000000000..b2b810958
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+ display: inline-block;
+ width: 80px;
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ text-align: center;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+}
+
+div.p80 {
+ background: pink;
+}
+
+div.p100 {
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<div class="button" style="height: 100px">
+ <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
+</div>
+
+<div class="button" style="height: 100px">
+ <div class="p100" style="height: 100px">abc</div>
+</div>
+
+<!--Button is using intrinsic height: -->
+<div class="button">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button">
+ <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-1.html b/layout/reftests/forms/button/percent-height-child-1.html
new file mode 100644
index 000000000..c676715c2
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-1.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent heights on content inside of
+ a <button> element (resolving the percent against the <button>).
+ (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+ width: 80px;
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+ -moz-appearance: none;
+}
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+div.p80 {
+ height: 80%;
+ background: pink;
+}
+
+div.p100 {
+ height: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<button style="height: 100px">
+ <div class="p80">abc</div>
+</button>
+
+<button style="height: 100px">
+ <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic height: -->
+<button>
+ <div class="p80">abc</div>
+</button>
+
+<button>
+ <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2-ref.html b/layout/reftests/forms/button/percent-height-child-2-ref.html
new file mode 100644
index 000000000..7491ed71e
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-2-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+ display: inline-block;
+ width: 78px;
+ border: 0;
+
+ /* Padding to match the -moz-focus-inner border/padding in testcase: */
+ padding: 7px 1px 3px;
+
+ font: 10px sans-serif;
+ text-align: center;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+}
+
+div.p80 {
+ background: pink;
+}
+
+div.p100 {
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<div class="button" style="height: 100px">
+ <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
+</div>
+
+<div class="button" style="height: 100px">
+ <div class="p100" style="height: 100px">abc</div>
+</div>
+
+<!--Button is using intrinsic height: -->
+<div class="button">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button">
+ <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2.html b/layout/reftests/forms/button/percent-height-child-2.html
new file mode 100644
index 000000000..7eecea1ad
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent heights on content inside of
+ a <button> element (resolving the percent against the <button>).
+ (In this testcase, the button has some focus-border/padding, which
+ occupies part of the button's content-box and which we'll have to
+ subtract out from the button's size before using it to resolve
+ percentages sizes.) -->
+<html>
+<head>
+<style>
+button {
+ width: 80px;
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+ -moz-appearance: none;
+}
+button::-moz-focus-inner {
+ padding: 6px 0 2px;
+ border: 1px dotted transparent;
+}
+
+div.p80 {
+ height: 80%;
+ background: pink;
+}
+
+div.p100 {
+ height: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<button style="height: 110px">
+ <div class="p80">abc</div>
+</button>
+
+<button style="height: 110px">
+ <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic height: -->
+<button>
+ <div class="p80">abc</div>
+</button>
+
+<button>
+ <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-1-ref.html b/layout/reftests/forms/button/percent-width-child-1-ref.html
new file mode 100644
index 000000000..dcc228994
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-1-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+ display: inline-block;
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ text-align: center;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+}
+
+div.p80 {
+ width: 80%;
+ background: pink;
+}
+
+div.p100 {
+ width: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<div class="button" style="width: 100px">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button" style="width: 100px">
+ <div class="p100">abc</div>
+</div>
+
+<!--Button is using intrinsic width: -->
+<div class="button">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button">
+ <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-1.html b/layout/reftests/forms/button/percent-width-child-1.html
new file mode 100644
index 000000000..fdd2b4923
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-1.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent widths on content inside of
+ a <button> element (resolving the percent against the <button>).
+ (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+ -moz-appearance: none;
+}
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+div.p80 {
+ width: 80%;
+ background: pink;
+}
+
+div.p100 {
+ width: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<button style="width: 100px">
+ <div class="p80">abc</div>
+</button>
+
+<button style="width: 100px">
+ <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic width: -->
+<button>
+ <div class="p80">abc</div>
+</button>
+
+<button>
+ <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2-ref.html b/layout/reftests/forms/button/percent-width-child-2-ref.html
new file mode 100644
index 000000000..19a24a737
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-2-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+ display: inline-block;
+ border: 0;
+
+ /* Padding to match the -moz-focus-inner border/padding in testcase: */
+ padding: 1px 7px 1px 3px;
+
+ font: 10px sans-serif;
+ text-align: center;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+}
+
+div.p80 {
+ width: 80%;
+ background: pink;
+}
+
+div.p100 {
+ width: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<div class="button" style="width: 100px">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button" style="width: 100px">
+ <div class="p100">abc</div>
+</div>
+
+<!--Button is using intrinsic width: -->
+<div class="button">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button">
+ <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2.html b/layout/reftests/forms/button/percent-width-child-2.html
new file mode 100644
index 000000000..d46ff62af
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent widths on content inside of
+ a <button> element (resolving the percent against the <button>).
+ (In this testcase, the button has some focus-border/padding, which
+ occupies part of the button's content-box and which we'll have to
+ subtract out from the button's size before using it to resolve
+ percentages sizes.) -->
+<html>
+<head>
+<style>
+button {
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+ -moz-appearance: none;
+}
+button::-moz-focus-inner {
+ padding: 0 6px 0 2px;
+ border: 1px dotted transparent;
+}
+
+div.p80 {
+ width: 80%;
+ background: pink;
+}
+
+div.p100 {
+ width: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<button style="width: 110px">
+ <div class="p80">abc</div>
+</button>
+
+<button style="width: 110px">
+ <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic width: -->
+<button>
+ <div class="p80">abc</div>
+</button>
+
+<button>
+ <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/reftest-stylo.list b/layout/reftests/forms/button/reftest-stylo.list
new file mode 100644
index 000000000..c76d15c91
--- /dev/null
+++ b/layout/reftests/forms/button/reftest-stylo.list
@@ -0,0 +1,61 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== first-letter-1.html first-letter-1.html
+== first-letter-1.html first-letter-1.html
+
+== focus-area-percent-units-1.html focus-area-percent-units-1.html
+== focus-area-percent-units-2.html focus-area-percent-units-2.html
+
+== max-height.html max-height.html
+== min-height.html min-height.html
+== overflow-areas-1.html overflow-areas-1.html
+
+# The buttons in these tests have some fancy shading applied to their corners
+# on B2G, despite their "-moz-appearance: none; background: gray", so they
+# don't quite match the reference case's normal <div>. That's why they're fuzzy.
+fuzzy-if(B2G||Mulet||Android,125,20) == percent-height-child-1.html percent-height-child-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-height-child-2.html percent-height-child-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(B2G||Mulet||Android,125,20) == percent-width-child-1.html percent-width-child-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-width-child-2.html percent-width-child-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+== vertical-centering.html vertical-centering.html
+
+== line-height-button-0.5.html line-height-button-0.5.html
+== line-height-button-1.5.html line-height-button-1.5.html
+== line-height-input-0.5.html line-height-input-0.5.html
+== line-height-input-1.5.html line-height-input-1.5.html
+
+# Looks like Android and B2G change the text color, but to something slightly
+# different from ColorGray
+fails-if(Android||B2G||Mulet) == disabled-1.html disabled-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== disabled-2.html disabled-2.html
+
+== disabled-3.html disabled-3.html
+== disabled-4.html disabled-4.html
+== disabled-5.html disabled-5.html
+== disabled-6.html disabled-6.html
+
+fails-if(B2G||Mulet) == width-auto-size-em-ltr.html width-auto-size-em-ltr.html
+# Bug 1145672
+# Bug 1150486
+fails-if(B2G||Mulet) == width-auto-size-ltr.html width-auto-size-ltr.html
+# Bug 1145672
+# Bug 1150486
+== width-exact-fit-ltr.html width-exact-fit-ltr.html
+== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr.html
+== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr.html
+== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr.html
+fails-if(B2G||Mulet) == width-auto-size-em-rtl.html width-auto-size-em-rtl.html
+# Bug 1145672
+# Bug 1150486
+fails-if(B2G||Mulet) == width-auto-size-rtl.html width-auto-size-rtl.html
+# Bug 1145672
+# Bug 1150486
+== width-exact-fit-rtl.html width-exact-fit-rtl.html
+== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl.html
+== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl.html
+== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl.html
diff --git a/layout/reftests/forms/button/reftest.list b/layout/reftests/forms/button/reftest.list
new file mode 100644
index 000000000..cefec2e85
--- /dev/null
+++ b/layout/reftests/forms/button/reftest.list
@@ -0,0 +1,48 @@
+== first-letter-1.html first-letter-1-ref.html
+!= first-letter-1.html first-letter-1-noref.html
+
+== focus-area-percent-units-1.html focus-area-percent-units-1-ref.html
+== focus-area-percent-units-2.html focus-area-percent-units-2-ref.html
+
+== max-height.html max-height-ref.html
+== min-height.html min-height-ref.html
+== overflow-areas-1.html overflow-areas-1-ref.html
+
+# The buttons in these tests have some fancy shading applied to their corners
+# on Android, despite their "-moz-appearance: none; background: gray", so they
+# don't quite match the reference case's normal <div>. That's why they're fuzzy.
+fuzzy-if(Android,125,20) == percent-height-child-1.html percent-height-child-1-ref.html
+pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-height-child-2.html percent-height-child-2-ref.html
+fuzzy-if(Android,125,20) == percent-width-child-1.html percent-width-child-1-ref.html
+pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-width-child-2.html percent-width-child-2-ref.html
+
+== vertical-centering.html vertical-centering-ref.html
+
+!= line-height-button-0.5.html line-height-button-1.0.html
+!= line-height-button-1.5.html line-height-button-1.0.html
+!= line-height-input-0.5.html line-height-input-1.0.html
+!= line-height-input-1.5.html line-height-input-1.0.html
+
+# Looks like Android changes the text color, but to something slightly
+# different from ColorGray
+fails-if(Android) == disabled-1.html disabled-1-ref.html
+== disabled-2.html disabled-2-ref.html
+
+!= disabled-3.html disabled-3-notref.html
+!= disabled-4.html disabled-4-notref.html
+!= disabled-5.html disabled-5-notref.html
+!= disabled-6.html disabled-6-notref.html
+
+== width-auto-size-em-ltr.html width-auto-size-em-ltr-ref.html
+== width-auto-size-ltr.html width-auto-size-ltr-ref.html
+== width-exact-fit-ltr.html width-auto-size-ltr-ref.html
+== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr-ref.html
+== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr-ref.html
+== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr-ref.html
+== width-auto-size-em-rtl.html width-auto-size-em-rtl-ref.html
+== width-auto-size-rtl.html width-auto-size-rtl-ref.html
+== width-exact-fit-rtl.html width-auto-size-rtl-ref.html
+== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl-ref.html
+== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl-ref.html
+== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl-ref.html
+== display-grid-flex-columnset.html display-grid-flex-columnset-ref.html
diff --git a/layout/reftests/forms/button/vertical-centering-ref.html b/layout/reftests/forms/button/vertical-centering-ref.html
new file mode 100644
index 000000000..aa6d76367
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+ height: 100px;
+ display: inline-block;
+ border: 0;
+ padding: 0;
+
+ font: 2em/100px sans-serif;
+ text-align: center;
+
+ background: transparent;
+ color: black;
+}
+</style>
+</head>
+<body>
+<div>button</div>
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/vertical-centering.html b/layout/reftests/forms/button/vertical-centering.html
new file mode 100644
index 000000000..08ca38519
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+input, div {
+ height: 100px;
+ display: inline-block;
+ border: 0;
+ padding: 0;
+
+ font: 2em sans-serif;
+
+ background: transparent;
+ color: black;
+}
+input {
+ -moz-appearance: none;
+}
+input::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+div {
+ line-height: 100px;
+ text-align: center;
+}
+</style>
+</head>
+<body>
+<input type='button' value='button' />
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
new file mode 100644
index 000000000..1e7ab40bb
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+ margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr.html b/layout/reftests/forms/button/width-auto-size-em-ltr.html
new file mode 100644
index 000000000..3285c3e95
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 1em;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
new file mode 100644
index 000000000..121471474
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+ margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl.html b/layout/reftests/forms/button/width-auto-size-em-rtl.html
new file mode 100644
index 000000000..fb72ef97e
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 1em;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
new file mode 100644
index 000000000..c1ba89860
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr.html b/layout/reftests/forms/button/width-auto-size-ltr.html
new file mode 100644
index 000000000..c8f3f7d11
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
new file mode 100644
index 000000000..3e09016dc
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl.html b/layout/reftests/forms/button/width-auto-size-rtl.html
new file mode 100644
index 000000000..7ae3092f9
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..c85da00e3
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 0px; /* for implicit focuspadding, fully eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
new file mode 100644
index 000000000..4978a57e4
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 62px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..762e443f8
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 0px; /* for implicit focuspadding, fully eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
new file mode 100644
index 000000000..d4b028b48
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 62px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..6f7047cce
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px -2px 1px 0; /* for implicit focuspadding, fully eroded and overflowed */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
new file mode 100644
index 000000000..daecef56e
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 60px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..1b36154cf
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 0 1px -2px; /* for implicit focuspadding, fully eroded and overflowed */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
new file mode 100644
index 000000000..b76a3957a
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 60px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..59cbd0208
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 2px; /* for implicit focuspadding, partly eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
new file mode 100644
index 000000000..c0d64b279
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 66px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..0765a673d
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 2px; /* for implicit focuspadding, partly eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
new file mode 100644
index 000000000..9b8826938
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 66px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html
new file mode 100644
index 000000000..58db0aa70
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 68px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
new file mode 100644
index 000000000..996a69d83
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 68px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>