From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 19:32:43 +0200
Subject: Adding upstream version 1:115.7.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/forms/button/1317351-ref.html      | 21 ++++++++
 layout/reftests/forms/button/1317351.html          | 30 +++++++++++
 layout/reftests/forms/button/1349646-ref.html      | 27 ++++++++++
 layout/reftests/forms/button/1349646.html          | 27 ++++++++++
 .../forms/button/appearance-revert-ref.html        |  2 +
 .../reftests/forms/button/appearance-revert.html   |  2 +
 .../forms/button/author-padding-notref.html        |  2 +
 layout/reftests/forms/button/author-padding.html   |  3 ++
 .../button/button-display-flex-fullsize-1-ref.html | 57 ++++++++++++++++++++
 .../button/button-display-flex-fullsize-1.html     | 51 ++++++++++++++++++
 .../button/button-display-grid-fullsize-1-ref.html | 60 ++++++++++++++++++++++
 .../button/button-display-grid-fullsize-1.html     | 56 ++++++++++++++++++++
 .../forms/button/button-empty-columns-ref.html     |  2 +
 .../forms/button/button-empty-columns.html         |  2 +
 .../forms/button/button-visibility-1-ref.html      | 25 +++++++++
 .../reftests/forms/button/button-visibility-1.html | 26 ++++++++++
 layout/reftests/forms/button/disabled-1-ref.html   | 16 ++++++
 layout/reftests/forms/button/disabled-1.html       | 15 ++++++
 layout/reftests/forms/button/disabled-2-ref.html   | 17 ++++++
 layout/reftests/forms/button/disabled-2.html       | 17 ++++++
 .../reftests/forms/button/disabled-3-notref.html   |  9 ++++
 layout/reftests/forms/button/disabled-3.html       |  9 ++++
 .../reftests/forms/button/disabled-4-notref.html   |  9 ++++
 layout/reftests/forms/button/disabled-4.html       |  9 ++++
 .../reftests/forms/button/disabled-5-notref.html   |  9 ++++
 layout/reftests/forms/button/disabled-5.html       |  9 ++++
 .../reftests/forms/button/disabled-6-notref.html   |  9 ++++
 layout/reftests/forms/button/disabled-6.html       |  9 ++++
 .../button/display-grid-flex-columnset-ref.html    | 60 ++++++++++++++++++++++
 .../forms/button/display-grid-flex-columnset.html  | 60 ++++++++++++++++++++++
 .../forms/button/dynamic-text-indent-ref.html      |  4 ++
 .../reftests/forms/button/dynamic-text-indent.html | 12 +++++
 .../forms/button/first-letter-1-noref.html         |  5 ++
 .../reftests/forms/button/first-letter-1-ref.html  |  7 +++
 layout/reftests/forms/button/first-letter-1.html   |  6 +++
 .../forms/button/focus-non-themed-ref.html         | 10 ++++
 layout/reftests/forms/button/focus-non-themed.html |  9 ++++
 .../forms/button/line-height-button-0.5.html       |  7 +++
 .../forms/button/line-height-button-1.0.html       |  7 +++
 .../forms/button/line-height-button-1.5.html       |  7 +++
 .../forms/button/line-height-input-0.5.html        |  7 +++
 .../forms/button/line-height-input-1.0.html        |  7 +++
 .../forms/button/line-height-input-1.5.html        |  7 +++
 layout/reftests/forms/button/max-height-ref.html   | 11 ++++
 layout/reftests/forms/button/max-height.html       | 11 ++++
 layout/reftests/forms/button/min-height-ref.html   | 17 ++++++
 layout/reftests/forms/button/min-height.html       | 22 ++++++++
 .../forms/button/overflow-areas-1-ref.html         | 48 +++++++++++++++++
 layout/reftests/forms/button/overflow-areas-1.html | 51 ++++++++++++++++++
 .../forms/button/percent-height-child-ref.html     | 52 +++++++++++++++++++
 .../forms/button/percent-height-child.html         | 60 ++++++++++++++++++++++
 .../forms/button/percent-width-child-ref.html      | 53 +++++++++++++++++++
 .../reftests/forms/button/percent-width-child.html | 59 +++++++++++++++++++++
 layout/reftests/forms/button/reftest.list          | 59 +++++++++++++++++++++
 .../forms/button/vertical-centering-ref.html       | 23 +++++++++
 .../reftests/forms/button/vertical-centering.html  | 33 ++++++++++++
 .../forms/button/width-auto-size-em-ltr-ref.html   | 18 +++++++
 .../forms/button/width-auto-size-em-ltr.html       | 20 ++++++++
 .../forms/button/width-auto-size-em-rtl-ref.html   | 19 +++++++
 .../forms/button/width-auto-size-em-rtl.html       | 21 ++++++++
 .../forms/button/width-auto-size-ltr-ref.html      | 19 +++++++
 .../reftests/forms/button/width-auto-size-ltr.html | 20 ++++++++
 .../forms/button/width-auto-size-rtl-ref.html      | 20 ++++++++
 .../reftests/forms/button/width-auto-size-rtl.html | 21 ++++++++
 .../width-erode-all-focuspadding-rtl-ref.html      | 21 ++++++++
 .../button/width-erode-all-focuspadding-rtl.html   | 22 ++++++++
 .../reftests/forms/button/width-exact-fit-ltr.html | 21 ++++++++
 .../reftests/forms/button/width-exact-fit-rtl.html | 22 ++++++++
 68 files changed, 1488 insertions(+)
 create mode 100644 layout/reftests/forms/button/1317351-ref.html
 create mode 100644 layout/reftests/forms/button/1317351.html
 create mode 100644 layout/reftests/forms/button/1349646-ref.html
 create mode 100644 layout/reftests/forms/button/1349646.html
 create mode 100644 layout/reftests/forms/button/appearance-revert-ref.html
 create mode 100644 layout/reftests/forms/button/appearance-revert.html
 create mode 100644 layout/reftests/forms/button/author-padding-notref.html
 create mode 100644 layout/reftests/forms/button/author-padding.html
 create mode 100644 layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html
 create mode 100644 layout/reftests/forms/button/button-display-flex-fullsize-1.html
 create mode 100644 layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html
 create mode 100644 layout/reftests/forms/button/button-display-grid-fullsize-1.html
 create mode 100644 layout/reftests/forms/button/button-empty-columns-ref.html
 create mode 100644 layout/reftests/forms/button/button-empty-columns.html
 create mode 100644 layout/reftests/forms/button/button-visibility-1-ref.html
 create mode 100644 layout/reftests/forms/button/button-visibility-1.html
 create mode 100644 layout/reftests/forms/button/disabled-1-ref.html
 create mode 100644 layout/reftests/forms/button/disabled-1.html
 create mode 100644 layout/reftests/forms/button/disabled-2-ref.html
 create mode 100644 layout/reftests/forms/button/disabled-2.html
 create mode 100644 layout/reftests/forms/button/disabled-3-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-3.html
 create mode 100644 layout/reftests/forms/button/disabled-4-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-4.html
 create mode 100644 layout/reftests/forms/button/disabled-5-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-5.html
 create mode 100644 layout/reftests/forms/button/disabled-6-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-6.html
 create mode 100644 layout/reftests/forms/button/display-grid-flex-columnset-ref.html
 create mode 100644 layout/reftests/forms/button/display-grid-flex-columnset.html
 create mode 100644 layout/reftests/forms/button/dynamic-text-indent-ref.html
 create mode 100644 layout/reftests/forms/button/dynamic-text-indent.html
 create mode 100644 layout/reftests/forms/button/first-letter-1-noref.html
 create mode 100644 layout/reftests/forms/button/first-letter-1-ref.html
 create mode 100644 layout/reftests/forms/button/first-letter-1.html
 create mode 100644 layout/reftests/forms/button/focus-non-themed-ref.html
 create mode 100644 layout/reftests/forms/button/focus-non-themed.html
 create mode 100644 layout/reftests/forms/button/line-height-button-0.5.html
 create mode 100644 layout/reftests/forms/button/line-height-button-1.0.html
 create mode 100644 layout/reftests/forms/button/line-height-button-1.5.html
 create mode 100644 layout/reftests/forms/button/line-height-input-0.5.html
 create mode 100644 layout/reftests/forms/button/line-height-input-1.0.html
 create mode 100644 layout/reftests/forms/button/line-height-input-1.5.html
 create mode 100644 layout/reftests/forms/button/max-height-ref.html
 create mode 100644 layout/reftests/forms/button/max-height.html
 create mode 100644 layout/reftests/forms/button/min-height-ref.html
 create mode 100644 layout/reftests/forms/button/min-height.html
 create mode 100644 layout/reftests/forms/button/overflow-areas-1-ref.html
 create mode 100644 layout/reftests/forms/button/overflow-areas-1.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-ref.html
 create mode 100644 layout/reftests/forms/button/percent-height-child.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-ref.html
 create mode 100644 layout/reftests/forms/button/percent-width-child.html
 create mode 100644 layout/reftests/forms/button/reftest.list
 create mode 100644 layout/reftests/forms/button/vertical-centering-ref.html
 create mode 100644 layout/reftests/forms/button/vertical-centering.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-ltr.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-rtl.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-ltr.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-rtl.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
 create mode 100644 layout/reftests/forms/button/width-exact-fit-ltr.html
 create mode 100644 layout/reftests/forms/button/width-exact-fit-rtl.html

(limited to 'layout/reftests/forms/button')

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>
-- 
cgit v1.2.3