summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/button
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/forms/button
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/forms/button')
-rw-r--r--layout/reftests/forms/button/1317351-ref.html21
-rw-r--r--layout/reftests/forms/button/1317351.html30
-rw-r--r--layout/reftests/forms/button/1349646-ref.html27
-rw-r--r--layout/reftests/forms/button/1349646.html27
-rw-r--r--layout/reftests/forms/button/appearance-revert-ref.html2
-rw-r--r--layout/reftests/forms/button/appearance-revert.html2
-rw-r--r--layout/reftests/forms/button/author-padding-notref.html2
-rw-r--r--layout/reftests/forms/button/author-padding.html3
-rw-r--r--layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html57
-rw-r--r--layout/reftests/forms/button/button-display-flex-fullsize-1.html51
-rw-r--r--layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html60
-rw-r--r--layout/reftests/forms/button/button-display-grid-fullsize-1.html56
-rw-r--r--layout/reftests/forms/button/button-empty-columns-ref.html2
-rw-r--r--layout/reftests/forms/button/button-empty-columns.html2
-rw-r--r--layout/reftests/forms/button/button-visibility-1-ref.html25
-rw-r--r--layout/reftests/forms/button/button-visibility-1.html26
-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.html60
-rw-r--r--layout/reftests/forms/button/display-grid-flex-columnset.html60
-rw-r--r--layout/reftests/forms/button/dynamic-text-indent-ref.html4
-rw-r--r--layout/reftests/forms/button/dynamic-text-indent.html12
-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-non-themed-ref.html10
-rw-r--r--layout/reftests/forms/button/focus-non-themed.html9
-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-ref.html52
-rw-r--r--layout/reftests/forms/button/percent-height-child.html60
-rw-r--r--layout/reftests/forms/button/percent-width-child-ref.html53
-rw-r--r--layout/reftests/forms/button/percent-width-child.html59
-rw-r--r--layout/reftests/forms/button/reftest.list59
-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.html18
-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.html19
-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.html19
-rw-r--r--layout/reftests/forms/button/width-auto-size-ltr.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-rtl-ref.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-rtl.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-exact-fit-ltr.html21
-rw-r--r--layout/reftests/forms/button/width-exact-fit-rtl.html22
68 files changed, 1488 insertions, 0 deletions
diff --git a/layout/reftests/forms/button/1317351-ref.html b/layout/reftests/forms/button/1317351-ref.html
new file mode 100644
index 0000000000..3ad5be0a13
--- /dev/null
+++ b/layout/reftests/forms/button/1317351-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title></title>
+ <style type="text/css">
+
+html { padding: 100px }
+
+mask {
+ position: absolute;
+ top: 98px; left: 98px;
+ width: 300px;
+ height: 200px;
+ background: black;
+}
+ </style>
+</head>
+<body>
+<mask></mask>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/1317351.html b/layout/reftests/forms/button/1317351.html
new file mode 100644
index 0000000000..d0054024e8
--- /dev/null
+++ b/layout/reftests/forms/button/1317351.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title></title>
+ <style type="text/css">
+
+html { padding: 100px }
+
+input,button {
+ width: auto;
+ min-width: 50px;
+ writing-mode: vertical-rl;
+}
+
+mask {
+ position: absolute;
+ top: 98px; left: 98px;
+ width: 300px;
+ height: 200px;
+ background: black;
+}
+ </style>
+</head>
+<body>
+<input type="color">
+<button><div style="width:100%; height:100%"></div></button>
+
+<mask></mask>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/1349646-ref.html b/layout/reftests/forms/button/1349646-ref.html
new file mode 100644
index 0000000000..d36f19477a
--- /dev/null
+++ b/layout/reftests/forms/button/1349646-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+button {
+ padding: 0px;
+ border:none;
+ font-size: 64px;
+ background-color: green;
+}
+button::-moz-focus-inner {
+ padding-inline-start: 0px;
+ padding-inline-end: 0px;
+}
+button:-moz-focusring::-moz-focus-inner {
+ border: 4px solid;
+}
+</style>
+<div>
+ <button id="button1"><span>Menu1</span></button>
+</div>
+<script>
+window.onload = () => {
+ button1.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</html>
diff --git a/layout/reftests/forms/button/1349646.html b/layout/reftests/forms/button/1349646.html
new file mode 100644
index 0000000000..a51c69a010
--- /dev/null
+++ b/layout/reftests/forms/button/1349646.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+button {
+ padding: 0px;
+ border:none;
+ font-size: 64px;
+ background-color: green;
+}
+button::-moz-focus-inner {
+ padding-inline-start: 20px;
+ padding-inline-end: 20px;
+}
+button:-moz-focusring::-moz-focus-inner {
+ border: 4px solid;
+}
+</style>
+<div>
+ <button id="button1"><span>Menu1</span></button>
+</div>
+<script>
+window.onload = () => {
+ button1.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</html>
diff --git a/layout/reftests/forms/button/appearance-revert-ref.html b/layout/reftests/forms/button/appearance-revert-ref.html
new file mode 100644
index 0000000000..9e863880df
--- /dev/null
+++ b/layout/reftests/forms/button/appearance-revert-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button>Foo</button>
diff --git a/layout/reftests/forms/button/appearance-revert.html b/layout/reftests/forms/button/appearance-revert.html
new file mode 100644
index 0000000000..06f1d045d2
--- /dev/null
+++ b/layout/reftests/forms/button/appearance-revert.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button style="border: revert">Foo</button>
diff --git a/layout/reftests/forms/button/author-padding-notref.html b/layout/reftests/forms/button/author-padding-notref.html
new file mode 100644
index 0000000000..9e863880df
--- /dev/null
+++ b/layout/reftests/forms/button/author-padding-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button>Foo</button>
diff --git a/layout/reftests/forms/button/author-padding.html b/layout/reftests/forms/button/author-padding.html
new file mode 100644
index 0000000000..9b924488c0
--- /dev/null
+++ b/layout/reftests/forms/button/author-padding.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<!-- This technically assumes that no theme would have 300px of padding by default, looks like a safe enough assumption -->
+<button style="padding: 300px">Foo</button>
diff --git a/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html b/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html
new file mode 100644
index 0000000000..2c45c375ab
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>Reference: Testing for full height flex container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ }
+
+ .flex > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ flex-direction: column;
+ }
+ </style>
+</head>
+<body>
+ <button>
+ <div class="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+ <button>
+ <div class="flex vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-display-flex-fullsize-1.html b/layout/reftests/forms/button/button-display-flex-fullsize-1.html
new file mode 100644
index 0000000000..f351fc66b3
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-flex-fullsize-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>CSS Test: Testing for full height flex container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .flex {
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .flex > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ flex-direction: column;
+ }
+ </style>
+</head>
+<body>
+ <button class="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+ <button class="flex vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html b/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html
new file mode 100644
index 0000000000..1b3df75dff
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>Reference: Testing for full height grid container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .grid {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ }
+
+ .grid > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ }
+ </style>
+</head>
+<body>
+ <button>
+ <div class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+ <button>
+ <div class="grid vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-display-grid-fullsize-1.html b/layout/reftests/forms/button/button-display-grid-fullsize-1.html
new file mode 100644
index 0000000000..4998c213d2
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-grid-fullsize-1.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>CSS Test: Testing for full height grid container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .grid {
+ display: inline-grid;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .grid > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ }
+ </style>
+</head>
+<body>
+ <!-- 3 columns/1 row -->
+ <button class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+ <!-- 1 column/3 rows, using "fr" units to fill container -->
+ <button class="grid vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-empty-columns-ref.html b/layout/reftests/forms/button/button-empty-columns-ref.html
new file mode 100644
index 0000000000..0016d8cc8c
--- /dev/null
+++ b/layout/reftests/forms/button/button-empty-columns-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<button style="width: 100px; height: 5px;"></button>
diff --git a/layout/reftests/forms/button/button-empty-columns.html b/layout/reftests/forms/button/button-empty-columns.html
new file mode 100644
index 0000000000..6154310810
--- /dev/null
+++ b/layout/reftests/forms/button/button-empty-columns.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<button style="columns: 2; width: 100px; height: 5px;"></button>
diff --git a/layout/reftests/forms/button/button-visibility-1-ref.html b/layout/reftests/forms/button/button-visibility-1-ref.html
new file mode 100644
index 0000000000..441b5151cf
--- /dev/null
+++ b/layout/reftests/forms/button/button-visibility-1-ref.html
@@ -0,0 +1,25 @@
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Test for bug 1732921</title>
+ <style>
+ .parent {
+ border: 0px;
+ background: none;
+ will-change: transform;
+ }
+
+ .child {
+ visibility: visible;
+ }
+ </style>
+</head>
+
+<body>
+ <button class="parent">
+ <span class="child">foo</span>
+ </button>
+</body>
+
+</html>
diff --git a/layout/reftests/forms/button/button-visibility-1.html b/layout/reftests/forms/button/button-visibility-1.html
new file mode 100644
index 0000000000..84faf2ca03
--- /dev/null
+++ b/layout/reftests/forms/button/button-visibility-1.html
@@ -0,0 +1,26 @@
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Test for bug 1732921</title>
+ <style>
+ .parent {
+ border: 0px;
+ background: none;
+ visibility: hidden;
+ will-change: transform;
+ }
+
+ .child {
+ visibility: visible;
+ }
+ </style>
+</head>
+
+<body>
+ <button class="parent">
+ <span class="child">foo</span>
+ </button>
+</body>
+
+</html>
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 0000000000..c408ec16fb
--- /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 0000000000..6bcba667bd
--- /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 0000000000..53958f76b7
--- /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 0000000000..a77287dfee
--- /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 0000000000..bd8b457746
--- /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 0000000000..440d43b531
--- /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 0000000000..41fe9e6107
--- /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 0000000000..38f71544a2
--- /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 0000000000..d944d04216
--- /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 0000000000..ded7c1905d
--- /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 0000000000..c6f0abce66
--- /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 0000000000..2a1d9cfa7f
--- /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 0000000000..c843a84b6a
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
@@ -0,0 +1,60 @@
+<!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 {
+ -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 0000000000..ffada3bced
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset.html
@@ -0,0 +1,60 @@
+<!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 {
+ -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/dynamic-text-indent-ref.html b/layout/reftests/forms/button/dynamic-text-indent-ref.html
new file mode 100644
index 0000000000..1b1789cd3e
--- /dev/null
+++ b/layout/reftests/forms/button/dynamic-text-indent-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+ <button style="text-indent: 50px">Some text</button>
+</html>
diff --git a/layout/reftests/forms/button/dynamic-text-indent.html b/layout/reftests/forms/button/dynamic-text-indent.html
new file mode 100644
index 0000000000..9b0724ed51
--- /dev/null
+++ b/layout/reftests/forms/button/dynamic-text-indent.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <button>Some text</button>
+ <script>
+ onload = function() {
+ var obj = document.querySelector("button");
+ window.w = obj.getBoundingClientRect().width;
+ obj.style.textIndent = "50px";
+ document.documentElement.className = "";
+ }
+ </script>
+</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 0000000000..d59db575fa
--- /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 0000000000..34ffa64f22
--- /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 0000000000..3dbf1667fa
--- /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-non-themed-ref.html b/layout/reftests/forms/button/focus-non-themed-ref.html
new file mode 100644
index 0000000000..8f5577671c
--- /dev/null
+++ b/layout/reftests/forms/button/focus-non-themed-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+ button {
+ outline: none;
+ -moz-appearance: none;
+ appearance: none;
+ }
+ button::-moz-focus-inner { border: 0 }
+</style>
+<button autofocus>Foo</button>
diff --git a/layout/reftests/forms/button/focus-non-themed.html b/layout/reftests/forms/button/focus-non-themed.html
new file mode 100644
index 0000000000..0fa28a9259
--- /dev/null
+++ b/layout/reftests/forms/button/focus-non-themed.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ button {
+ outline: none;
+ -moz-appearance: none;
+ appearance: none;
+ }
+</style>
+<button autofocus>Foo</button>
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 0000000000..e3343d9e42
--- /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 0000000000..2685624dc0
--- /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 0000000000..f86839fc3c
--- /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 0000000000..e3b6dd9200
--- /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 0000000000..18f8b4646c
--- /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 0000000000..ea486d14ea
--- /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 0000000000..ea12a86681
--- /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 0000000000..87ac8a979c
--- /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 0000000000..5f0f2d654e
--- /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 0000000000..cadffa78d5
--- /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 0000000000..a1eb505753
--- /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 0000000000..b1a34dfe40
--- /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-ref.html b/layout/reftests/forms/button/percent-height-child-ref.html
new file mode 100644
index 0000000000..b2b8109587
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-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.html b/layout/reftests/forms/button/percent-height-child.html
new file mode 100644
index 0000000000..c676715c23
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child.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-width-child-ref.html b/layout/reftests/forms/button/percent-width-child-ref.html
new file mode 100644
index 0000000000..dcc2289944
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-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.html b/layout/reftests/forms/button/percent-width-child.html
new file mode 100644
index 0000000000..fdd2b49236
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child.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/reftest.list b/layout/reftests/forms/button/reftest.list
new file mode 100644
index 0000000000..cfd67fc662
--- /dev/null
+++ b/layout/reftests/forms/button/reftest.list
@@ -0,0 +1,59 @@
+# Tests for grid and flex sizing in buttons
+== button-display-flex-fullsize-1.html button-display-flex-fullsize-1-ref.html
+== button-display-grid-fullsize-1.html button-display-grid-fullsize-1-ref.html
+
+== first-letter-1.html first-letter-1-ref.html
+!= first-letter-1.html first-letter-1-noref.html
+
+== max-height.html max-height-ref.html
+== min-height.html min-height-ref.html
+
+# Android is off ever-so-slightly on the points where the text
+# runs into the border on this text, so a little fuzz is needed.
+fuzzy-if(Android,0-1,0-16) == 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,0-125,0-20) == percent-height-child.html percent-height-child-ref.html
+fuzzy-if(Android,0-125,0-20) == percent-width-child.html percent-width-child-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
+== 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
+
+!= author-padding.html author-padding-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-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
+== display-grid-flex-columnset.html display-grid-flex-columnset-ref.html
+== button-empty-columns.html button-empty-columns-ref.html
+== 1317351.html 1317351-ref.html
+
+== dynamic-text-indent.html dynamic-text-indent-ref.html
+
+fuzzy(0-5,0-1) == 1349646.html 1349646-ref.html
+
+== appearance-revert.html appearance-revert-ref.html
+
+needs-focus == focus-non-themed.html focus-non-themed-ref.html
+
+== button-visibility-1.html button-visibility-1-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 0000000000..aa6d763676
--- /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 0000000000..08ca385191
--- /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 0000000000..4a998c3435
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
@@ -0,0 +1,18 @@
+<!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;
+}
+
+</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 0000000000..3285c3e955
--- /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 0000000000..59f3ba424b
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
@@ -0,0 +1,19 @@
+<!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;
+}
+
+</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 0000000000..fb72ef97e9
--- /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 0000000000..48372131ea
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
@@ -0,0 +1,19 @@
+<!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;
+}
+
+</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 0000000000..c8f3f7d110
--- /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 0000000000..f644a196f2
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-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;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</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 0000000000..7ae3092f94
--- /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-rtl-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
new file mode 100644
index 0000000000..762e443f81
--- /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 0000000000..d4b028b48e
--- /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-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html
new file mode 100644
index 0000000000..4978a57e4e
--- /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: 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-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
new file mode 100644
index 0000000000..d4b028b48e
--- /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: 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>