widget/reftests/meter-fallback-default-style-ref.html@b8a032363ba2
widget/reftests/meter-fallback-default-style-ref.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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;
14 background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
15 }
17 div.meter-bar {
18 /**
19 * The purpose of this test is to not show the native style.
20 * -moz-appearance: meterchunk;
21 */
23 height: 100%;
24 width: 100%;
26 background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
27 }
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>
