overflow-areas-1.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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. outline: 2px solid black; /* The outlined area is the overflow area. */
  16. width: 1px; /* (To attempt to trigger overflow) */
  17. display: block; /* Put each button on its own line, w/ some margin, */
  18. margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */
  19. font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
  20. }
  21. .oh { overflow: hidden }
  22. .oa { overflow: auto }
  23. .os { overflow: scroll }
  24. </style>
  25. </head>
  26. <body>
  27. <input type="reset">
  28. <input type="submit">
  29. <input type="button" value="InputTypeButton">
  30. <button>ActualButton</button>
  31. <input class="oh" type="reset">
  32. <input class="oh" type="submit">
  33. <input class="oh" type="button" value="InputTypeButton">
  34. <button class="oh">ActualButton</button>
  35. <input class="oa" type="reset">
  36. <input class="oa" type="submit">
  37. <input class="oa" type="button" value="InputTypeButton">
  38. <button class="oa">ActualButton</button>
  39. <input class="os" type="reset">
  40. <input class="os" type="submit">
  41. <input class="os" type="button" value="InputTypeButton">
  42. <button class="os">ActualButton</button>
  43. </body>
  44. </html>