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

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/widget/reftests/meter-fallback-default-style-ref.html	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,57 @@
     1.4 +<!DOCTYPE html>
     1.5 +<html>
     1.6 +  <style>
     1.7 +    div.meter-element {
     1.8 +      /**
     1.9 +       * The purpose of this test is to not show the native style.
    1.10 +       * -moz-appearance: meterbar;
    1.11 +       */
    1.12 +      display: inline-block;
    1.13 +      height: 1em;
    1.14 +      width: 5em;
    1.15 +      vertical-align: -0.2em;
    1.16 +
    1.17 +      background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
    1.18 +    }
    1.19 +
    1.20 +    div.meter-bar {
    1.21 +      /**
    1.22 +       * The purpose of this test is to not show the native style.
    1.23 +       * -moz-appearance: meterchunk;
    1.24 +       */
    1.25 +
    1.26 +      height: 100%;
    1.27 +      width: 100%;
    1.28 +
    1.29 +      background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
    1.30 +    }
    1.31 +
    1.32 +    div.meter-element { padding: 5px; }
    1.33 +    body > div:nth-child(1)  { -moz-appearance: none; }
    1.34 +    body > div:nth-child(2) > .meter-bar { -moz-appearance: none; }
    1.35 +    body > div:nth-child(3)  { background: red; }
    1.36 +    body > div:nth-child(4) > .meter-bar { background: red; }
    1.37 +    body > div:nth-child(5)  { border: 2px solid red; }
    1.38 +    body > div:nth-child(6) > .meter-bar { border: 5px solid red; width: -moz-calc(100% - 10px); }
    1.39 +  </style>
    1.40 +  <body>
    1.41 +    <div class="meter-element">
    1.42 +      <div class="meter-bar"></div>
    1.43 +    </div>
    1.44 +    <div class="meter-element">
    1.45 +      <div class="meter-bar"></div>
    1.46 +    </div>
    1.47 +    <div class="meter-element">
    1.48 +      <div class="meter-bar"></div>
    1.49 +    </div>
    1.50 +    <div class="meter-element">
    1.51 +      <div class="meter-bar"></div>
    1.52 +    </div>
    1.53 +    <div class="meter-element">
    1.54 +      <div class="meter-bar"></div>
    1.55 +    </div>
    1.56 +    <div class="meter-element">
    1.57 +      <div class="meter-bar"></div>
    1.58 +    </div>
    1.59 +  </body>
    1.60 +</html>

mercurial