widget/reftests/meter-fallback-default-style-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3   <style>
   4     div.meter-element {
   5       /**
   6        * The purpose of this test is to not show the native style.
   7        * -moz-appearance: meterbar;
   8        */
   9       display: inline-block;
  10       height: 1em;
  11       width: 5em;
  12       vertical-align: -0.2em;
  13
  14       background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
  15     }
  16
  17     div.meter-bar {
  18       /**
  19        * The purpose of this test is to not show the native style.
  20        * -moz-appearance: meterchunk;
  21        */
  22
  23       height: 100%;
  24       width: 100%;
  25
  26       background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
  27     }
  28
  29     div.meter-element { padding: 5px; }
  30     body > div:nth-child(1)  { -moz-appearance: none; }
  31     body > div:nth-child(2) > .meter-bar { -moz-appearance: none; }
  32     body > div:nth-child(3)  { background: red; }
  33     body > div:nth-child(4) > .meter-bar { background: red; }
  34     body > div:nth-child(5)  { border: 2px solid red; }
  35     body > div:nth-child(6) > .meter-bar { border: 5px solid red; width: calc(100% - 10px); }
  36   </style>
  37   <body>
  38     <div class="meter-element">
  39       <div class="meter-bar"></div>
  40     </div>
  41     <div class="meter-element">
  42       <div class="meter-bar"></div>
  43     </div>
  44     <div class="meter-element">
  45       <div class="meter-bar"></div>
  46     </div>
  47     <div class="meter-element">
  48       <div class="meter-bar"></div>
  49     </div>
  50     <div class="meter-element">
  51       <div class="meter-bar"></div>
  52     </div>
  53     <div class="meter-element">
  54       <div class="meter-bar"></div>
  55     </div>
  56   </body>
  57 </html>