|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <style> |
|
4 div.progress-element { |
|
5 /** |
|
6 * The purpose of this test is to not show the native style. |
|
7 * -moz-appearance: progressbar; |
|
8 */ |
|
9 display: inline-block; |
|
10 height: 1em; |
|
11 width: 10em; |
|
12 vertical-align: -0.2em; |
|
13 |
|
14 /* Default style in case of there is -moz-appearance: none; */ |
|
15 border: 2px solid; |
|
16 -moz-border-top-colors: ThreeDShadow #e6e6e6; |
|
17 -moz-border-right-colors: ThreeDHighlight #e6e6e6; |
|
18 -moz-border-bottom-colors: ThreeDHighlight #e6e6e6; |
|
19 -moz-border-left-colors: ThreeDShadow #e6e6e6; |
|
20 background-color: #e6e6e6; |
|
21 } |
|
22 |
|
23 div.progress-bar { |
|
24 /** |
|
25 * The purpose of this test is to not show the native style. |
|
26 * -moz-appearance: progresschunk; |
|
27 */ |
|
28 |
|
29 height: 100%; |
|
30 width: 100%; |
|
31 |
|
32 box-sizing: border-box; |
|
33 |
|
34 /* Default style in case of there is -moz-appearance: none; */ |
|
35 background-color: #0064b4; |
|
36 } |
|
37 |
|
38 div.progress-element { padding: 5px; } |
|
39 body > div:nth-child(1) { -moz-appearance: none; } |
|
40 body > div:nth-child(2) > .progress-bar { -moz-appearance: none; } |
|
41 body > div:nth-child(3) { background-color: red; } |
|
42 body > div:nth-child(4) > .progress-bar { background-color: red; } |
|
43 body > div:nth-child(5) { border: 2px solid red; } |
|
44 body > div:nth-child(6) > .progress-bar { border: 5px solid red; } |
|
45 </style> |
|
46 <body> |
|
47 <div class="progress-element"> |
|
48 <div class="progress-bar"></div> |
|
49 </div> |
|
50 <div class="progress-element"> |
|
51 <div class="progress-bar"></div> |
|
52 </div> |
|
53 <div class="progress-element"> |
|
54 <div class="progress-bar"></div> |
|
55 </div> |
|
56 <div class="progress-element"> |
|
57 <div class="progress-bar"></div> |
|
58 </div> |
|
59 <div class="progress-element"> |
|
60 <div class="progress-bar"></div> |
|
61 </div> |
|
62 <div class="progress-element"> |
|
63 <div class="progress-bar"></div> |
|
64 </div> |
|
65 </body> |
|
66 </html> |