<html>
<head>
</head>
<body>
  <h1>Meters with border values</h1>
  <ul>
    <li>min,low,optimal,high,max</li>
    <li><b>9</b>|10,20,30,40,50: <meter min="10" low="20" optimum="30" high="40" max="50" value="9" ></meter></li>
    <li><b>10</b>,20,30,40,50: <meter min="10" low="20" optimum="30" high="40" max="50" value="10" ></meter></li>
    <li>10,<b>20</b>,30,40,50: <meter min="10" low="20" optimum="30" high="40" max="50" value="20" ></meter>(should be green)</li>
    <li>10,20,<b>30</b>,40,50: <meter min="10" low="20" optimum="30" high="40" max="50" value="30" ></meter>(should be green)</li>
    <li>10,20,30,<b>40</b>,50: <meter min="10" low="20" optimum="30" high="40" max="50" value="40" ></meter>(should be green)</li>
    <li>10,20,30,40,<b>50</b>: <meter min="10" low="20" optimum="30" high="40" max="50" value="50" ></meter>(should be yellow)</li>
    <li>10,20,30,40,50|<b>51</b>: <meter min="10" low="20" optimum="30" high="40" max="50" value="51" ></meter>(should be yellow)</li>

    <li>10,<b>10</b>,30,40,50: <meter min="10" low="10" optimum="30" high="40" max="50" value="10" ></meter></li>
    <li>10,20,30,<b>40</b>,40: <meter min="10" low="20" optimum="30" high="40" max="40" value="40" ></meter>(should be green)</li>

    <li><b>9</b>|10,10,10,20,30: <meter min="10" low="10" optimum="10" high="20" max="30" value="9" ></meter></li>
    <li>10,10,<b>10</b>,20,30: <meter min="10" low="10" optimum="10" high="20" max="30" value="10" ></meter></li>
    <li>10,20,<b>30</b>,30,30: <meter min="10" low="20" optimum="30" high="30" max="30" value="30" ></meter>(should be green)</li>
    <li>10,20,30,30,30|<b>31</b>: <meter min="10" low="20" optimum="30" high="30" max="30" value="31" ></meter>(should be green)</li>
    <li>10,20,<b>20</b>,20,30: <meter min="10" low="20" optimum="20" high="20" max="30" value="20" ></meter>(should be green)</li>
  </ul>
</body>
</html>
