123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <!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>
|