widget/reftests/meter-fallback-default-style-ref.html
author Rob Wu <rob@robwu.nl>
Sat, 24 Sep 2016 11:16:32 +0200
changeset 320058 a41f871e2d1b37754bbd1001c36c075511b49342
parent 128082 434c6e6948135ece3d1c81c393f7d381114ff7fc
permissions -rw-r--r--
Bug 1299411 - Decouple Port implementation from API r=aswan Decoupled the API from the implementation. From now on it is possible to create Port instances without generating an API. This allows us to internally use Ports to pass around messages with minimal overhead (in the form of unnecessary clones of messages). This will be used by native messaging. This commit has no behavioral change, it is mostly moving around some code and storing the internal message listener in a set. MozReview-Commit-ID: 4h0LNJvTH9R

<!DOCTYPE html>
<html>
  <style>
    div.meter-element {
      /**
       * The purpose of this test is to not show the native style.
       * -moz-appearance: meterbar;
       */
      display: inline-block;
      height: 1em;
      width: 5em;
      vertical-align: -0.2em;

      background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
    }

    div.meter-bar {
      /**
       * The purpose of this test is to not show the native style.
       * -moz-appearance: meterchunk;
       */

      height: 100%;
      width: 100%;

      background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
    }

    div.meter-element { padding: 5px; }
    body > div:nth-child(1)  { -moz-appearance: none; }
    body > div:nth-child(2) > .meter-bar { -moz-appearance: none; }
    body > div:nth-child(3)  { background: red; }
    body > div:nth-child(4) > .meter-bar { background: red; }
    body > div:nth-child(5)  { border: 2px solid red; }
    body > div:nth-child(6) > .meter-bar { border: 5px solid red; width: -moz-calc(100% - 10px); }
  </style>
  <body>
    <div class="meter-element">
      <div class="meter-bar"></div>
    </div>
    <div class="meter-element">
      <div class="meter-bar"></div>
    </div>
    <div class="meter-element">
      <div class="meter-bar"></div>
    </div>
    <div class="meter-element">
      <div class="meter-bar"></div>
    </div>
    <div class="meter-element">
      <div class="meter-bar"></div>
    </div>
    <div class="meter-element">
      <div class="meter-bar"></div>
    </div>
  </body>
</html>