widget/reftests/progressbar-fallback-default-style-ref.html

branch
TOR_BUG_9701
changeset 15
b8a032363ba2
equal deleted inserted replaced
-1:000000000000 0:8c42e315a4ae
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>

mercurial