OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <script> | 3 <script> |
4 if (window.testRunner) | 4 if (window.testRunner) |
5 testRunner.waitUntilDone(); | 5 testRunner.waitUntilDone(); |
6 | 6 |
7 function test() { | 7 function test() { |
8 // We touch offsetWidth here to ensure following code run after the first la
yout is done, | 8 // We touch offsetWidth here to ensure following code run after the first la
yout is done, |
9 // because what we test is side-effect for the the layout and the painting. | 9 // because what we test is side-effect for the the layout and the painting. |
10 document.documentElement.offsetWidth; | 10 document.documentElement.offsetWidth; |
11 document.getElementById("target").value = 90; | 11 document.getElementById("target").value = 90; |
12 if (window.testRunner) | 12 if (window.testRunner) |
13 testRunner.notifyDone(); | 13 testRunner.notifyDone(); |
14 } | 14 } |
15 </script> | 15 </script> |
16 <style> | 16 <style> |
17 meter.styled { -webkit-appearance: none; } | |
18 meter.styled::-webkit-meter-bar { background: gray; } | 17 meter.styled::-webkit-meter-bar { background: gray; } |
19 meter.styled::-webkit-meter-optimum-value { background: green; } | 18 meter.styled::-webkit-meter-optimum-value { background: green; } |
20 meter.styled::-webkit-meter-suboptimum-value { background: yellow; } | 19 meter.styled::-webkit-meter-suboptimum-value { background: yellow; } |
21 meter.styled::-webkit-meter-even-less-good-value { background: red; } | 20 meter.styled::-webkit-meter-even-less-good-value { background: red; } |
22 </style> | 21 </style> |
23 </head> | 22 </head> |
24 <body onload="test()"> | 23 <body onload="test()"> |
25 <h1>Dynamically changing pseudo classes</h1> | 24 <h1>Dynamically changing pseudo classes</h1> |
26 <p>Following meter gauge should be solid green - Changing the paseudo class by
changing value attribute</p> | 25 <p>Following meter gauge should be solid green - Changing the paseudo class by
changing value attribute</p> |
27 <meter class="styled" id="target" min="0" max="100" low="30" high="60" optimum
="100" value="10" ></meter> | 26 <meter class="styled" id="target" min="0" max="100" low="30" high="60" optimum
="100" value="10" ></meter> |
28 </body> | 27 </body> |
29 </html> | 28 </html> |
OLD | NEW |