<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>