layout/reftests/forms/button/percent-height-child.html

   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
  17     font: 10px sans-serif;
  18     vertical-align: top;
  19
  20     color: black;
  21     background: gray;
  22     -moz-appearance: none;
  23 }
  24 button::-moz-focus-inner {
  25     padding: 0;
  26     border: 0;
  27 }
  28
  29 div.p80 {
  30     height: 80%;
  31     background: pink;
  32 }
  33
  34 div.p100 {
  35     height: 100%;
  36     background: yellow;
  37 }
  38 </style>
  39 </head>
  40 <body>
  41 <!--Button has explicit height for us to resolve against: -->
  42 <button style="height: 100px">
  43   <div class="p80">abc</div>
  44 </button>
  45
  46 <button style="height: 100px">
  47   <div class="p100">abc</div>
  48 </button>
  49
  50 <!--Button is using intrinsic height: -->
  51 <button>
  52   <div class="p80">abc</div>
  53 </button>
  54
  55 <button>
  56   <div class="p100">abc</div>
  57 </button>
  58
  59 </body>
  60 </html>