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