blob: 17d65b3b028d6d461f749f481aab8e553083e641 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!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>
|
