Issue #1970 - Part 1: Remove unused moz-focus-outer code for buttons.

This commit is contained in:
Moonchild 2022-07-22 14:47:45 +00:00 • committed by roytam1
commit 8de47d99c4
6 changed files with 8 additions and 149 deletions

View file

@ -37,16 +37,5 @@
<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>

View file

@ -2,8 +2,8 @@
<!-- 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
<!-- 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).
-->
@ -22,18 +22,6 @@
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>
@ -47,16 +35,5 @@
<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>

View file

@ -24,24 +24,6 @@
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>
@ -52,17 +34,5 @@
<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>

View file

@ -2,8 +2,8 @@
<!-- 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
<!-- 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).
-->
@ -22,13 +22,6 @@
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>
@ -39,13 +32,5 @@
<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>