Merge branch '1970-form-focusring-styling'

author: Moonchild <moonchild@palemoon.org> 2022-07-29 13:24:43 +0000
committer: Moonchild <moonchild@palemoon.org> 2022-07-29 13:24:43 +0000
commit: d60f501490398dfce8d270f8345fa674eae9e64b (patch)
tree: aabd0ce7c9d13251c07e1680d2c24f666c865dc2 /layout/reftests
parent: 900107da1bea93a20765202169a5fc0b9620858e (diff)
parent: 071412ab291a9f6181780dd0e5e2316c4a292a7c (diff)
download: uxp-d60f501490398dfce8d270f8345fa674eae9e64b.tar.gz
33 files changed, 60 insertions, 753 deletions
diff --git a/layout/reftests/bugs/491180-1-ref.html b/layout/reftests/bugs/491180-1-ref.html
index 2cf61ad165..e9dcf7cc56 100644
--- a/layout/reftests/bugs/491180-1-ref.html
+++ b/layout/reftests/bugs/491180-1-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <html>
-  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; padding: 1px 0">
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; padding: 0">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </div>
diff --git a/layout/reftests/bugs/491180-2-ref.html b/layout/reftests/bugs/491180-2-ref.html
index 2b7a85630d..7ab4aa58c5 100644
--- a/layout/reftests/bugs/491180-2-ref.html
+++ b/layout/reftests/bugs/491180-2-ref.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
 <html>
-  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; padding: 1px 0; white-space: pre; overflow: hidden">Some text</div>
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; padding: 0; white-space: pre; overflow: hidden">Some text</div>
   </div>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
index 98cd026d6d..c0dbcbac03 100644
--- a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
@@ -147,79 +147,79 @@ button {
 var buttonSizes =
 [
   ['32px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['2px', '4px'],
+  ['0px', '0px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
   ['32px', '20px'],
   ['10px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
   ['32px', '4px'],
   ['10px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['2px', '4px'],
-  ['4px', '32px'],
-  ['2px', '32px'],
-  ['4px', '4px'],
-  ['2px', '4px'],
-  ['4px', '32px'],
-  ['2px', '32px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
   ['4px', '32px'],
   ['2px', '32px'],
+  ['0px', '0px'],
+  ['2px', '0px'],
+  ['0px', '32px'],
+  ['0px', '32px'],
+  ['0px', '32px'],
+  ['0px', '32px'],
   ['20px', '32px'],
   ['20px', '10px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['4px', '32px'],
   ['4px', '10px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '32px'],
-  ['8px', '10px'],
-  ['8px', '32px'],
-  ['8px', '10px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['0px', '32px'],
+  ['0px', '10px'],
+  ['0px', '32px'],
+  ['0px', '10px'],
   ['20px', '4px'],
   ['20px', '4px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
   ['20px', '4px'],
   ['20px', '2px'],
   ['20px', '4px'],
   ['20px', '2px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['32px', '20px'],
   ['10px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
   ['32px', '20px'],
   ['10px', '20px'],
   ['32px', '20px'],
   ['10px', '20px'],
   ['4px', '20px'],
   ['2px', '20px'],
-  ['4px', '20px'],
-  ['4px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
   ['4px', '20px'],
   ['2px', '20px'],
   ['4px', '20px'],
diff --git a/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
index dbd50f8f4b..57dd5ac56c 100644
--- a/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
+++ b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
@@ -89,14 +89,14 @@ canvas {
 </tr></table>
 
 <table><tr>
-  <!-- 2px border, 2px padding, 4px ::-moz-focus-inner padding, 2px ::-moz-focus-inner border -->
-  <td><div style="width: 10px"><input type="button" style="width: 5px"></div></td>
+  <!-- 2px border, 2px padding -->
+  <td><div style="width: 4px"><input type="button" style="width: 2px"></div></td>
   <td>empty input type="button", width: 50%</td>
 </tr></table>
 
 <table><tr>
-  <!-- 2px border, 2px padding, 4px ::-moz-focus-inner padding, 2px ::-moz-focus-inner border -->
-  <td><div style="width: 10px"><input type="button" style="width: 5px"></div></td>
+  <!-- 2px border, 2px padding -->
+  <td><div style="width: 4px"><input type="button" style="width: 2px"></div></td>
   <td>empty input type="button", max-width: 50%</td>
 </tr></table>
 
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
deleted file mode 100644
index 6c66d5f178..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-<html>
-<head>
-  <title>Reference case for bug 1272983</title>
-  <style>
-    /* Set explicit font size so that em units are predictable: */
-    body, button { font: 10px sans-serif; }
-
-    /* Set margin to 0 for all cases. In the first 6, that's how we expect
-       the testcase to render; and in the 7th and 8th, our reference margin
-       will be applied via a child div instead of via the pseudo-element. */
-    button.mfi1::-moz-focus-inner,
-    button.mfi2::-moz-focus-inner,
-    button.mfi3::-moz-focus-inner,
-    button.mfi4::-moz-focus-inner,
-    button.mfi5::-moz-focus-inner,
-    button.mfi6::-moz-focus-inner,
-    button.mfi7::-moz-focus-inner,
-    button.mfi8::-moz-focus-inner { margin: 0; }
-
-    /* Use an explicit div instead of pseudo-element, for reference case's
-       version of margin values that we actually expect to take effect: */
-    button.mfi7 > div { margin: 10px; }
-    button.mfi8 > div { margin: 20px; /* = 2em * 20px/em */ }
-  </style>
-</head>
-<body>
-  <button class="mfi1">mfi1</button>
-  <button class="mfi2">mfi2</button>
-  <button class="mfi3">mfi3</button>
-  <button class="mfi4">mfi4</button>
-  <br>
-  <button class="mfi5">mfi5</button>
-  <button class="mfi6">mfi6</button>
-  <button class="mfi7"><div>mfi7</div></button>
-  <button class="mfi8"><div>mfi8</div></button>
-  <br>
-
-  <button class="mfo1">mfo1</button>
-  <button class="mfo2">mfo2</button>
-  <button class="mfo3">mfo3</button>
-  <button class="mfo4">mfo4</button>
-  <br>
-  <button class="mfo5">mfo5</button>
-  <button class="mfo6">mfo6</button>
-  <button class="mfo7">mfo7</button>
-  <button class="mfo8">mfo8</button>
-  <br>
-</body>
-</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1.html b/layout/reftests/forms/button/focus-area-percent-units-1.html
deleted file mode 100644
index 17d65b3b02..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-1.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-<html>
-<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
-     support CSS "margin" values that contain absolute lengths.  Any percent or
-     "auto" margin values will simply make the margin collapse to zero.
-     This test verifies that this is indeed what happens (not anything worse).
--->
-<head>
-  <title>Testcase for bug 1272983</title>
-  <style>
-    /* Set explicit font size so that em units are predictable: */
-    body, button { font: 10px sans-serif; }
-
-    /* Testing percent and auto margin values on "-moz-focus-inner": */
-    button.mfi1::-moz-focus-inner { margin: 50%; }
-    button.mfi2::-moz-focus-inner { margin: 50% 10px; }
-    button.mfi3::-moz-focus-inner { margin: 10px 50%; }
-    button.mfi4::-moz-focus-inner { margin: auto; }
-    button.mfi5::-moz-focus-inner { margin: auto 10px; }
-    button.mfi6::-moz-focus-inner { margin: 10px auto; }
-    button.mfi7::-moz-focus-inner { margin: 10px; }
-    button.mfi8::-moz-focus-inner { margin: 2em; }
-
-    /* Testing percent and auto margin values on "-moz-focus-outer":
-       (just for completeness -- really, 'margin' has no effect on
-       the behavior of -moz-focus-outer) */
-    button.mfo1::-moz-focus-outer { margin: 50%; }
-    button.mfo2::-moz-focus-outer { margin: 50% 10px; }
-    button.mfo3::-moz-focus-outer { margin: 10px 50%; }
-    button.mfo4::-moz-focus-outer { margin: auto; }
-    button.mfo5::-moz-focus-outer { margin: auto 10px; }
-    button.mfo6::-moz-focus-outer { margin: 10px auto; }
-    button.mfo7::-moz-focus-outer { margin: 10px; }
-    button.mfo8::-moz-focus-outer { margin: 2em; }
-  </style>
-</head>
-<body>
-  <button class="mfi1">mfi1</button>
-  <button class="mfi2">mfi2</button>
-  <button class="mfi3">mfi3</button>
-  <button class="mfi4">mfi4</button>
-  <br>
-  <button class="mfi5">mfi5</button>
-  <button class="mfi6">mfi6</button>
-  <button class="mfi7">mfi7</button>
-  <button class="mfi8">mfi8</button>
-  <br>
-
-  <button class="mfo1">mfo1</button>
-  <button class="mfo2">mfo2</button>
-  <button class="mfo3">mfo3</button>
-  <button class="mfo4">mfo4</button>
-  <br>
-  <button class="mfo5">mfo5</button>
-  <button class="mfo6">mfo6</button>
-  <button class="mfo7">mfo7</button>
-  <button class="mfo8">mfo8</button>
-  <br>
-</body>
-</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
deleted file mode 100644
index 6b6a6056d4..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-<html>
-<head>
-  <title>Reference case for bug 1272983</title>
-  <style>
-    /* Set explicit font size so that em units are predictable: */
-    body, button { font: 10px sans-serif; }
-
-    /* Add outline to help visualize the padding outside of buttons: */
-    button { outline: 1px solid black; }
-
-    /* Set padding to 0 for all cases. In the first 3, that's how we expect
-       the testcase to render; and in the 4th and 5th, our reference padding
-       will be applied via a child div instead of via the pseudo-element. */
-    button.mfi1::-moz-focus-inner,
-    button.mfi2::-moz-focus-inner,
-    button.mfi3::-moz-focus-inner,
-    button.mfi4::-moz-focus-inner,
-    button.mfi5::-moz-focus-inner { padding: 0; }
-
-    /* Use an explicit div instead of pseudo-element, for reference case's
-       version of padding values that we actually expect to take effect: */
-    button.mfi4 > div { padding: 10px; }
-    button.mfi5 > div { padding: 2em; }
-
-    /* As above, set padding to 0 for all cases: */
-    button.mfo1::-moz-focus-outer,
-    button.mfo2::-moz-focus-outer,
-    button.mfo3::-moz-focus-outer,
-    button.mfo4::-moz-focus-outer,
-    button.mfo5::-moz-focus-outer { padding: 0; }
-
-    /* To make reference for -moz-focus-outer padding that we expect to
-       take effect, we'll put the padding on a wrapper-div (and bump the
-       button's outline to that div). */
-    div.mfo4-wrapper { padding: 10px; }
-    div.mfo5-wrapper { padding: 20px; /* = 2em * 10px/em */ }
-
-    button.mfo4,
-    button.mfo5 { outline: none; }
-    div.mfo4-wrapper,
-    div.mfo5-wrapper { display: inline-block; outline: 1px solid black; }
-  </style>
-</head>
-<body>
-  <button class="mfi1">mfi1</button>
-  <button class="mfi2">mfi2</button>
-  <button class="mfi3">mfi3</button>
-  <br>
-  <button class="mfi4"><div>mfi4</div></button>
-  <button class="mfi5"><div>mfi5</div></button>
-  <br>
-
-  <button class="mfo1">mfo1</button>
-  <button class="mfo2">mfo2</button>
-  <button class="mfo3">mfo3</button>
-  <br>
-  <div class="mfo4-wrapper">
-    <button class="mfo4">mfo4</button>
-  </div>
-  <div class="mfo5-wrapper">
-    <button class="mfo5">mfo5</button>
-  </div>
-  <br>
-</body>
-</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2.html b/layout/reftests/forms/button/focus-area-percent-units-2.html
deleted file mode 100644
index 3c0cb8612f..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-2.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-<html>
-<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
-     support CSS "padding" values that contain absolute lengths.  Any percent
-     padding values will simply make the padding collapse to zero.
-     This test verifies that this is indeed what happens (not anything worse).
--->
-<head>
-  <title>Testcase for bug 1272983</title>
-  <style>
-    /* Set explicit font size so that em units are predictable: */
-    body, button { font: 10px sans-serif; }
-
-    /* Add outline to help visualize the padding outside of buttons: */
-    button { outline: 1px solid black; }
-
-    /* Testing percent and auto padding values on "-moz-focus-inner": */
-    button.mfi1::-moz-focus-inner { padding: 50%; }
-    button.mfi2::-moz-focus-inner { padding: 50% 10px; }
-    button.mfi3::-moz-focus-inner { padding: 10px 50%; }
-    button.mfi4::-moz-focus-inner { padding: 10px; }
-    button.mfi5::-moz-focus-inner { padding: 2em; }
-
-    /* Testing percent and auto padding values on "-moz-focus-outer": */
-    button.mfo1::-moz-focus-outer { padding: 50%; }
-    button.mfo2::-moz-focus-outer { padding: 50% 10px; }
-    button.mfo3::-moz-focus-outer { padding: 10px 50%; }
-    button.mfo4::-moz-focus-outer { padding: 10px; }
-    button.mfo5::-moz-focus-outer { padding: 2em; }
-  </style>
-</head>
-<body>
-  <button class="mfi1">mfi1</button>
-  <button class="mfi2">mfi2</button>
-  <button class="mfi3">mfi3</button>
-  <br>
-  <button class="mfi4">mfi4</button>
-  <button class="mfi5">mfi5</button>
-  <br>
-
-  <button class="mfo1">mfo1</button>
-  <button class="mfo2">mfo2</button>
-  <button class="mfo3">mfo3</button>
-  <br>
-  <button class="mfo4">mfo4</button>
-  <button class="mfo5">mfo5</button>
-  <br>
-</body>
-</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2-ref.html b/layout/reftests/forms/button/percent-height-child-2-ref.html
deleted file mode 100644
index 7491ed71e4..0000000000
--- a/layout/reftests/forms/button/percent-height-child-2-ref.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-<style>
-div.button {
-    display: inline-block;
-    width: 78px;
-    border: 0;
-
-    /* Padding to match the -moz-focus-inner border/padding in testcase: */
-    padding: 7px 1px 3px;
-
-    font: 10px sans-serif;
-    text-align: center;
-    vertical-align: top;
-
-    color: black;
-    background: gray;
-}
-
-div.p80 {
-    background: pink;
-}
-
-div.p100 {
-    background: yellow;
-}
-</style>
-</head>
-<body>
-<!--Button has explicit height for us to resolve against: -->
-<div class="button" style="height: 100px">
-  <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
-</div>
-
-<div class="button" style="height: 100px">
-  <div class="p100" style="height: 100px">abc</div>
-</div>
-
-<!--Button is using intrinsic height: -->
-<div class="button">
-  <div class="p80">abc</div>
-</div>
-
-<div class="button">
-  <div class="p100">abc</div>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2.html b/layout/reftests/forms/button/percent-height-child-2.html
deleted file mode 100644
index 7eecea1ad4..0000000000
--- a/layout/reftests/forms/button/percent-height-child-2.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!-- This test verifies that we honor percent heights on content inside of
-     a <button> element (resolving the percent against the <button>).
-     (In this testcase, the button has some focus-border/padding, which
-     occupies part of the button's content-box and which we'll have to
-     subtract out from the button's size before using it to resolve
-     percentages sizes.) -->
-<html>
-<head>
-<style>
-button {
-    width: 80px;
-    border: 0;
-    padding: 0;
-
-    font: 10px sans-serif;
-    vertical-align: top;
-
-    color: black;
-    background: gray;
-    -moz-appearance: none;
-}
-button::-moz-focus-inner {
-    padding: 6px 0 2px;
-    border: 1px dotted transparent;
-}
-
-div.p80 {
-    height: 80%;
-    background: pink;
-}
-
-div.p100 {
-    height: 100%;
-    background: yellow;
-}
-</style>
-</head>
-<body>
-<!--Button has explicit height for us to resolve against: -->
-<button style="height: 110px">
-  <div class="p80">abc</div>
-</button>
-
-<button style="height: 110px">
-  <div class="p100">abc</div>
-</button>
-
-<!--Button is using intrinsic height: -->
-<button>
-  <div class="p80">abc</div>
-</button>
-
-<button>
-  <div class="p100">abc</div>
-</button>
-
-</body>
-</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2-ref.html b/layout/reftests/forms/button/percent-width-child-2-ref.html
deleted file mode 100644
index 19a24a7375..0000000000
--- a/layout/reftests/forms/button/percent-width-child-2-ref.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-<head>
-<style>
-div.button {
-    display: inline-block;
-    border: 0;
-
-    /* Padding to match the -moz-focus-inner border/padding in testcase: */
-    padding: 1px 7px 1px 3px;
-
-    font: 10px sans-serif;
-    text-align: center;
-    vertical-align: top;
-
-    color: black;
-    background: gray;
-}
-
-div.p80 {
-    width: 80%;
-    background: pink;
-}
-
-div.p100 {
-    width: 100%;
-    background: yellow;
-}
-</style>
-</head>
-<body>
-<!--Button has explicit width for us to resolve against: -->
-<div class="button" style="width: 100px">
-  <div class="p80">abc</div>
-</div>
-
-<div class="button" style="width: 100px">
-  <div class="p100">abc</div>
-</div>
-
-<!--Button is using intrinsic width: -->
-<div class="button">
-  <div class="p80">abc</div>
-</div>
-
-<div class="button">
-  <div class="p100">abc</div>
-</div>
-
-</body>
-</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2.html b/layout/reftests/forms/button/percent-width-child-2.html
deleted file mode 100644
index d46ff62af5..0000000000
--- a/layout/reftests/forms/button/percent-width-child-2.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<!-- This test verifies that we honor percent widths on content inside of
-     a <button> element (resolving the percent against the <button>).
-     (In this testcase, the button has some focus-border/padding, which
-     occupies part of the button's content-box and which we'll have to
-     subtract out from the button's size before using it to resolve
-     percentages sizes.) -->
-<html>
-<head>
-<style>
-button {
-    border: 0;
-    padding: 0;
-
-    font: 10px sans-serif;
-    vertical-align: top;
-
-    color: black;
-    background: gray;
-    -moz-appearance: none;
-}
-button::-moz-focus-inner {
-    padding: 0 6px 0 2px;
-    border: 1px dotted transparent;
-}
-
-div.p80 {
-    width: 80%;
-    background: pink;
-}
-
-div.p100 {
-    width: 100%;
-    background: yellow;
-}
-</style>
-</head>
-<body>
-<!--Button has explicit width for us to resolve against: -->
-<button style="width: 110px">
-  <div class="p80">abc</div>
-</button>
-
-<button style="width: 110px">
-  <div class="p100">abc</div>
-</button>
-
-<!--Button is using intrinsic width: -->
-<button>
-  <div class="p80">abc</div>
-</button>
-
-<button>
-  <div class="p100">abc</div>
-</button>
-
-</body>
-</html>
diff --git a/layout/reftests/forms/button/reftest.list b/layout/reftests/forms/button/reftest.list
index db314516df..7492c8f08c 100644
--- a/layout/reftests/forms/button/reftest.list
+++ b/layout/reftests/forms/button/reftest.list
@@ -1,9 +1,6 @@
 == first-letter-1.html first-letter-1-ref.html
 != first-letter-1.html first-letter-1-noref.html
 
-== focus-area-percent-units-1.html focus-area-percent-units-1-ref.html
-== focus-area-percent-units-2.html focus-area-percent-units-2-ref.html
-
 == max-height.html max-height-ref.html
 == min-height.html min-height-ref.html
 == overflow-areas-1.html overflow-areas-1-ref.html
@@ -31,13 +28,7 @@ pref(browser.display.focus_ring_width,1) == percent-width-child-2.html  percent-
 == width-auto-size-em-ltr.html width-auto-size-em-ltr-ref.html
 == width-auto-size-ltr.html width-auto-size-ltr-ref.html
 == width-exact-fit-ltr.html width-auto-size-ltr-ref.html
-== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr-ref.html
-== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr-ref.html
-== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr-ref.html
 == width-auto-size-em-rtl.html width-auto-size-em-rtl-ref.html
 == width-auto-size-rtl.html width-auto-size-rtl-ref.html
 == width-exact-fit-rtl.html width-auto-size-rtl-ref.html
-== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl-ref.html
-== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl-ref.html
-== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl-ref.html
 == display-grid-flex-columnset.html display-grid-flex-columnset-ref.html
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
index 1e7ab40bba..4a998c3435 100644
--- a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
@@ -11,7 +11,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 2em; width: 5em; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
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
index 1214714744..59f3ba424b 100644
--- a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
@@ -12,7 +12,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 2em; width: 5em; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
index c1ba89860e..48372131ea 100644
--- a/layout/reftests/forms/button/width-auto-size-ltr-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
@@ -12,7 +12,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
index 3e09016dc3..f644a196f2 100644
--- a/layout/reftests/forms/button/width-auto-size-rtl-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
@@ -13,7 +13,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
deleted file mode 100644
index c85da00e3c..0000000000
--- a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE HTML>
-<style>
-
-div.button {
-  display: inline-block;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 0px; /* for implicit focuspadding, fully eroded */
-}
-
-</style>
-
-<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
deleted file mode 100644
index 4978a57e4e..0000000000
--- a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<style>
-
-button {
-  -moz-appearance: none;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-  width: 62px;
-  border-radius: 0; /* override mobile/android/themes/core/content.css */
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-}
-
-</style>
-
-<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
deleted file mode 100644
index 6f7047cce3..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE HTML>
-<style>
-
-div.button {
-  display: inline-block;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px -2px 1px 0; /* for implicit focuspadding, fully eroded and overflowed */
-}
-
-</style>
-
-<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
deleted file mode 100644
index daecef56e4..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<style>
-
-button {
-  -moz-appearance: none;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-  width: 60px;
-  border-radius: 0; /* override mobile/android/themes/core/content.css */
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-}
-
-</style>
-
-<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
deleted file mode 100644
index 1b36154cfc..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html dir=rtl>
-<style>
-
-div.button {
-  display: inline-block;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 0 1px -2px; /* for implicit focuspadding, fully eroded and overflowed */
-}
-
-</style>
-
-<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
deleted file mode 100644
index b76a3957a5..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html dir=rtl>
-<style>
-
-button {
-  -moz-appearance: none;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-  width: 60px;
-  border-radius: 0; /* override mobile/android/themes/core/content.css */
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-}
-
-</style>
-
-<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
deleted file mode 100644
index 59cbd02086..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE HTML>
-<style>
-
-div.button {
-  display: inline-block;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 2px; /* for implicit focuspadding, partly eroded */
-}
-
-</style>
-
-<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
deleted file mode 100644
index c0d64b2797..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<style>
-
-button {
-  -moz-appearance: none;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-  width: 66px;
-  border-radius: 0; /* override mobile/android/themes/core/content.css */
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-}
-
-</style>
-
-<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
deleted file mode 100644
index 0765a673df..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE HTML>
-<html dir=rtl>
-<style>
-
-div.button {
-  display: inline-block;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 2px; /* for implicit focuspadding, partly eroded */
-}
-
-</style>
-
-<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
deleted file mode 100644
index 9b88269385..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE HTML>
-<html dir=rtl>
-<style>
-
-button {
-  -moz-appearance: none;
-  background: yellow;
-  border: 2px solid fuchsia;
-  padding: 2px;
-  font-size: 10px;
-  width: 66px;
-  border-radius: 0; /* override mobile/android/themes/core/content.css */
-}
-
-span {
-  display: inline-block; vertical-align: middle;
-  height: 20px; width: 50px; border: 2px solid blue;
-}
-
-</style>
-
-<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html
index 58db0aa70c..4978a57e4e 100644
--- a/layout/reftests/forms/button/width-exact-fit-ltr.html
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -7,7 +7,7 @@ button {
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
-  width: 68px;
+  width: 62px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
index 996a69d831..d4b028b48e 100644
--- a/layout/reftests/forms/button/width-exact-fit-rtl.html
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -8,7 +8,7 @@ button {
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
-  width: 68px;
+  width: 62px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
diff --git a/layout/reftests/forms/select/vertical-centering-ref.html b/layout/reftests/forms/select/vertical-centering-ref.html
index f5d8554563..82bbb7d3d0 100644
--- a/layout/reftests/forms/select/vertical-centering-ref.html
+++ b/layout/reftests/forms/select/vertical-centering-ref.html
@@ -7,15 +7,12 @@
   select {
     -moz-appearance: none;
     border: none;
-    font-family: Ahem;
-    font-size: 20px;
+    font: 20px/1 Ahem;
     box-sizing: content-box;
-    /*
-     * Why are these top/bottom paddings 7px rather than 10px?  1px each is
-     * eaten up by padding on the combobox display area, but I have no idea
-     * where the extra 4px somewhere else are coming from...
-     */
-    padding: 7px 0 7px 0;
+    /* The testcase has 20px-tall text, which should be centered in a 40px-tall
+     content-box (with 10px of extra space above and below).  We emulate that
+     by having explicit 10px of padding on top and bottom. */
+    padding: 10px 0 10px 0;
   }
 </style>
 <select>
diff --git a/layout/reftests/forms/select/vertical-centering.html b/layout/reftests/forms/select/vertical-centering.html
index 6a2daa9e7b..fb464395d5 100644
--- a/layout/reftests/forms/select/vertical-centering.html
+++ b/layout/reftests/forms/select/vertical-centering.html
@@ -7,11 +7,10 @@
   select {
     -moz-appearance: none;
     border: none;
-    font-family: Ahem;
-    font-size: 20px;
-    padding: 0;
+    font: 20px/1 Ahem;
     box-sizing: content-box;
     height: 40px;
+    padding: 0;
   }
 </style>
 <select>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
index 1c3bc73906..7567da08a6 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
@@ -10,12 +10,12 @@
 .rtl button,
 .ltr input[type="button"],
 .rtl input[type="button"] {
-  padding: 0px 6px;
+  padding: 0px 8px;
 }
 
 .v-rl button,
 .v-rl input[type="button"] {
-  padding: 6px 0px;
+  padding: 8px 0px;
 }
 </style>
 <div class=ltr>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
index ddd3c7ec43..9b6bfe1a87 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
@@ -10,13 +10,13 @@
 .rtl input[type="color"]:-moz-system-metric(color-picker-available) {
   width: 64px;
   height: 23px;
-  padding: 0px 6px;
+  padding: 0px 8px;
 }
 
 .v-rl input[type="color"]:-moz-system-metric(color-picker-available) {
   height: 64px;
   width: 23px;
-  padding: 6px 0px;
+  padding: 8px 0px;
 }
 </style>
 <div class=ltr>
author	Moonchild <moonchild@palemoon.org>	2022-07-29 13:24:43 +0000
committer	Moonchild <moonchild@palemoon.org>	2022-07-29 13:24:43 +0000
commit	d60f501490398dfce8d270f8345fa674eae9e64b (patch)
tree	aabd0ce7c9d13251c07e1680d2c24f666c865dc2 /layout/reftests
parent	900107da1bea93a20765202169a5fc0b9620858e (diff)
parent	071412ab291a9f6181780dd0e5e2316c4a292a7c (diff)
download	uxp-d60f501490398dfce8d270f8345fa674eae9e64b.tar.gz