|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <style> |
|
4 div.meter-element { |
|
5 /** |
|
6 * The purpose of this test is to not show the native style. |
|
7 * -moz-appearance: meterbar; |
|
8 */ |
|
9 display: inline-block; |
|
10 height: 1em; |
|
11 width: 5em; |
|
12 vertical-align: -0.2em; |
|
13 |
|
14 background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%); |
|
15 } |
|
16 |
|
17 div.meter-bar { |
|
18 /** |
|
19 * The purpose of this test is to not show the native style. |
|
20 * -moz-appearance: meterchunk; |
|
21 */ |
|
22 |
|
23 height: 100%; |
|
24 width: 100%; |
|
25 |
|
26 background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%); |
|
27 } |
|
28 |
|
29 div.meter-element { padding: 5px; } |
|
30 body > div:nth-child(1) { -moz-appearance: none; } |
|
31 body > div:nth-child(2) > .meter-bar { -moz-appearance: none; } |
|
32 body > div:nth-child(3) { background: red; } |
|
33 body > div:nth-child(4) > .meter-bar { background: red; } |
|
34 body > div:nth-child(5) { border: 2px solid red; } |
|
35 body > div:nth-child(6) > .meter-bar { border: 5px solid red; width: -moz-calc(100% - 10px); } |
|
36 </style> |
|
37 <body> |
|
38 <div class="meter-element"> |
|
39 <div class="meter-bar"></div> |
|
40 </div> |
|
41 <div class="meter-element"> |
|
42 <div class="meter-bar"></div> |
|
43 </div> |
|
44 <div class="meter-element"> |
|
45 <div class="meter-bar"></div> |
|
46 </div> |
|
47 <div class="meter-element"> |
|
48 <div class="meter-bar"></div> |
|
49 </div> |
|
50 <div class="meter-element"> |
|
51 <div class="meter-bar"></div> |
|
52 </div> |
|
53 <div class="meter-element"> |
|
54 <div class="meter-bar"></div> |
|
55 </div> |
|
56 </body> |
|
57 </html> |