30 lines
1.1 KiB
HTML
30 lines
1.1 KiB
HTML
<html>
|
|
<head>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
function test() {
|
|
// We touch offsetWidth here to ensure following code run after the first layout is done,
|
|
// because what we test is side-effect for the the layout and the painting.
|
|
document.documentElement.offsetWidth;
|
|
document.getElementById("target").value = 90;
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
</script>
|
|
<style>
|
|
meter.styled { -webkit-appearance: none; }
|
|
meter.styled::-webkit-meter-bar { background: gray; }
|
|
meter.styled::-webkit-meter-optimum-value { background: green; }
|
|
meter.styled::-webkit-meter-suboptimal-value { background: yellow; }
|
|
meter.styled::-webkit-meter-even-less-good-value { background: red; }
|
|
</style>
|
|
</head>
|
|
<body onload="test()">
|
|
<h1>Dynamically changing pseudo classes</h1>
|
|
<p>Following meter gauge should be solid green - Changing the paseudo class by changing value attribute</p>
|
|
<meter class="styled" id="target" min="0" max="100" low="30" high="60" optimum="100" value="10" ></meter>
|
|
</body>
|
|
</html>
|