blob: 1cbb9aab9bb833cf41c66bd1f304e50c53211d58 [file] [log] [blame]
<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>