indeterminate-style-height-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

  <link rel='stylesheet' href='resource://reftest/progress.css'>

  <style>

    div.progress-element {

      height: 12em;

      width: 2em;

    div.progress-bar {

      height: 100%;

    body > div:nth-child(1) > .progress-bar { position: relative;

                                              top: calc(12em - 20px); height: 20px; }

    body > div:nth-child(2) > .progress-bar { position: relative;

                                              top: calc(12em - 0px); height: 0px; }

    body > div:nth-child(3) > .progress-bar { position: relative;

                                              top: calc(12em - 50%); height: 50%; }

    body > div:nth-child(4) > .progress-bar { position: relative;

                                              top: calc(12em - 1em); height: 1em; }

    body > div:nth-child(5) > .progress-bar { position: relative;

                                              top: calc(12em - 100%); height: 100%; }

  </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>

  </body>

</html>