67 lines
4.0 KiB
HTML
67 lines
4.0 KiB
HTML
<html>
|
|
<head>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
</script>
|
|
<style>
|
|
meter.usestyle { -webkit-appearance: none; /* this forces styling; */ }
|
|
meter.tall { width: 30px; height: 40px; -webkit-appearance: none; /* this forces styling; */ }
|
|
ul, h2, p { margin: 0.2em; }
|
|
h1, h2 { font-size: medium; }
|
|
li { margin: 0.2em; list-style-type: none; }
|
|
meter.barstyled::-webkit-meter-bar { background: gray; border-style: solid; border-width: 2px; border-color: #222; }
|
|
meter.valstyled::-webkit-meter-optimum-value { background: green; border-style: solid; border-width: 2px; border-color: #7c7; }
|
|
meter#bar-paddings { -webkit-appearance: none; }
|
|
meter#bar-paddings::-webkit-meter-bar { padding: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Horizontal meters with the non-themed default style</h2>
|
|
<ul>
|
|
<li><meter class="usestyle" min="0" max="100" low="30" high="60" optimum="100" value="25" ></meter>
|
|
<meter class="usestyle" min="0" max="100" low="30" high="60" optimum="100" value="45" ></meter>
|
|
<meter class="usestyle" min="0" max="100" low="30" high="60" optimum="100" value="75" ></meter></li>
|
|
<li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="25" ></meter>
|
|
<meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="45" ></meter>
|
|
<meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="75" ></meter></li>
|
|
</ul>
|
|
<h2>Providing meter styles</h2>
|
|
<div style="background-color: #eee">
|
|
<ul>
|
|
<li><meter style="background-color: #aac; border-color: #224; border-style: solid; border-width: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has border</li>
|
|
<li><meter style="background-color: #aac; border-color: #224; padding: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has padding</li>
|
|
<li><meter style="background-color: #aac; border-color: #224; margin: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has margin</li>
|
|
</ul>
|
|
</div>
|
|
<h2>Providing bar and/or value styles</h2>
|
|
<div style="background-color: #eee">
|
|
<ul>
|
|
default -webkit-appearance, thus should use platform theme (only for Mac.)
|
|
<li><meter class="valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has bar style but should ignore it.</li>
|
|
<li><meter class="barstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has value style but should ignore it.</li>
|
|
<li><meter class="barstyled valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has both styles but should ignore them.</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
-webkit-appearance: none, thus custom styled elements should be shown.
|
|
<li><meter class="usestyle valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has bar style, should have solid value part.</li>
|
|
<li><meter class="usestyle barstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has value style, should be solid bar part.</li>
|
|
<li><meter class="usestyle barstyled valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> should have solid bar and value part.</li>
|
|
</ul>
|
|
</div>
|
|
<h2>Providing appearances</h2>
|
|
<div style="background-color: #eee">
|
|
<ul>
|
|
<li><meter style="-webkit-appearance: none" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has "none" appearance, should be styled with default style.</li>
|
|
<li><meter style="-webkit-appearance: meter" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has "meter" appearance, should be themed.</li>
|
|
</ul>
|
|
</div>
|
|
<h2>Providing bar paddings</h2>
|
|
<div style="background-color: #eee">
|
|
<meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" value="50" ></meter> has "padding" on the bar.
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|