percent-height-child-1.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/publicdomain/zero/1.0/
  5. -->
  6. <!-- This test verifies that we honor percent heights on content inside of
  7. a <button> element (resolving the percent against the <button>).
  8. (In this testcase, the button has no focus-border/padding.) -->
  9. <html>
  10. <head>
  11. <style>
  12. button {
  13. width: 80px;
  14. border: 0;
  15. padding: 0;
  16. font: 10px sans-serif;
  17. vertical-align: top;
  18. color: black;
  19. background: gray;
  20. -moz-appearance: none;
  21. }
  22. button::-moz-focus-inner {
  23. padding: 0;
  24. border: 0;
  25. }
  26. div.p80 {
  27. height: 80%;
  28. background: pink;
  29. }
  30. div.p100 {
  31. height: 100%;
  32. background: yellow;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <!--Button has explicit height for us to resolve against: -->
  38. <button style="height: 100px">
  39. <div class="p80">abc</div>
  40. </button>
  41. <button style="height: 100px">
  42. <div class="p100">abc</div>
  43. </button>
  44. <!--Button is using intrinsic height: -->
  45. <button>
  46. <div class="p80">abc</div>
  47. </button>
  48. <button>
  49. <div class="p100">abc</div>
  50. </button>
  51. </body>
  52. </html>