Dactyloidae/layout/reftests/forms/button/focus-area-percent-units-1-ref.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; }

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

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