| <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-meter-bar { background: gray; } |
| meter.styled::-webkit-meter-optimum-value { background: green; } |
| meter.styled::-webkit-meter-suboptimum-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> |
