layout/reftests/forms/button/overflow-areas-1.html

   1 <!DOCTYPE html>
   2 <!-- Any copyright is dedicated to the Public Domain.
   3    - http://creativecommons.org/publicdomain/zero/1.0/ -->
   4 <html>
   5 <!-- For buttons whose painting gets clipped to their border-box area,
   6      we should *also* clip their overflow area (as exposed via 'outline').
   7      This test exposes these areas so they can be visualized, and checks that
   8      they match when we expect them to. -->
   9 <head>
  10   <title>Testcase for bug 1261284</title>
  11   <style>
  12     input, button {
  13       border: 0;             /* Combined, these mean the gray area is the */
  14       background: lightgray; /* border-box size. */
  15
  16       outline: 2px solid black; /* The outlined area is the overflow area. */
  17       width: 1px;   /* (To attempt to trigger overflow) */
  18
  19       display: block;     /* Put each button on its own line, w/ some margin, */
  20       margin-bottom: 5px; /* so that any overflow doesn't get stomped on.     */
  21
  22       font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
  23     }
  24
  25     .oh { overflow: hidden }
  26     .oa { overflow: auto }
  27     .os { overflow: scroll }
  28   </style>
  29 </head>
  30 <body>
  31   <input type="reset">
  32   <input type="submit">
  33   <input type="button" value="InputTypeButton">
  34   <button>ActualButton</button>
  35
  36   <input  class="oh" type="reset">
  37   <input  class="oh" type="submit">
  38   <input  class="oh" type="button" value="InputTypeButton">
  39   <button class="oh">ActualButton</button>
  40
  41   <input  class="oa" type="reset">
  42   <input  class="oa" type="submit">
  43   <input  class="oa" type="button" value="InputTypeButton">
  44   <button class="oa">ActualButton</button>
  45
  46   <input  class="os" type="reset">
  47   <input  class="os" type="submit">
  48   <input  class="os" type="button" value="InputTypeButton">
  49   <button class="os">ActualButton</button>
  50 </body>
  51 </html>