meter-appearance-none-optimum-value-rendering-ref.html

<!doctype html>
<title>meter rendering</title>
<style>
  #meter {
    block-size: 1em;
    box-sizing: border-box;
    display: inline-block;
    inline-size: 5em;
    vertical-align: -0.2em;
  }

  #inner {
    block-size: 100%;
    box-sizing: inherit;
    display: grid;
    grid-template-rows: 1fr [line1] 2fr [line2] 1fr;
    inline-size: 100%;
    position: relative;
  }

  #bar {
    align-self: unsafe center;
    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
    block-size: 100%;
    box-sizing: border-box;
    grid-row-end: line2;
    grid-row-start: line1;
    inline-size: 100%;
    overflow: hidden;
    position: absolute;
  }

  #value {
    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
    block-size: 100%;
    box-sizing: border-box;
    inline-size: 50%;
  }
</style>

<div id="meter">
  <div id="inner">
    <div id="bar">
      <div id="value">
      </div>
    </div>
  </div>
</div>

chromium/third_party/blink/web_tests/wpt_internal/html/semantics/forms/the-meter-element/reference/meter-appearance-none-optimum-value-rendering-ref.html