mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-08 00:07:30 +09:00
68 lines
2.3 KiB
HTML
68 lines
2.3 KiB
HTML
<!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>
|