Issue #1970 - Part 3: Update reftests.

This commit is contained in:
Moonchild 2022-07-22 16:38:07 +00:00 • committed by roytam1
commit 4712b75d5c
31 changed files with 53 additions and 663 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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'],

View file

@ -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>

View file

@ -1,41 +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>
</body>
</html>

View file

@ -1,39 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<!-- The ::-moz-focus-inner button pseudo-element only supports
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; }
</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>
</body>
</html>

View file

@ -1,38 +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; }
</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>
</body>
</html>

View file

@ -1,36 +0,0 @@
<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<!-- The ::-moz-focus-inner button pseudo-element only supports
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; }
</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>
</body>
</html>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 */
}

View file

@ -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 */
}

View file

@ -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>

View file

@ -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>