widget/reftests/progressbar-fallback-default-style-ref.html
author Rob Wu <rob@robwu.nl>
Sat, 24 Sep 2016 11:16:32 +0200
changeset 320058 a41f871e2d1b37754bbd1001c36c075511b49342
parent 167399 be8ad29ffc6961bf00400f3fe714e46927cbaba2
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.progress-element {
      /**
       * The purpose of this test is to not show the native style.
       * -moz-appearance: progressbar;
       */
      display: inline-block;
      height: 1em;
      width: 10em;
      vertical-align: -0.2em;

      /* Default style in case of there is -moz-appearance: none; */
      border: 2px solid;
      -moz-border-top-colors: ThreeDShadow #e6e6e6;
      -moz-border-right-colors: ThreeDHighlight #e6e6e6;
      -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
      -moz-border-left-colors: ThreeDShadow #e6e6e6;
      background-color: #e6e6e6;
    }

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

      height: 100%;
      width: 100%;

      box-sizing: border-box;

      /* Default style in case of there is -moz-appearance: none; */
      background-color: #0064b4;
    }

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