Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(22)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html

Issue 1428703004: Make <meter> transparent if -webkit-appearance:none or background CSS property is specified. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLMeterElement.cpp » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <script> 3 <script>
4 if (window.testRunner) 4 if (window.testRunner)
5 testRunner.notifyDone(); 5 testRunner.notifyDone();
6 </script> 6 </script>
7 <style> 7 <style>
8 meter.usestyle { -webkit-appearance: none; /* this forces styling; */ } 8 meter.usestyle { -webkit-appearance: none; }
9 meter.tall { width: 30px; height: 40px; -webkit-appearance: none; /* this forc es styling; */ } 9 meter.tall { width: 30px; height: 40px; }
10 ul, h2, p { margin: 0.2em; } 10 ul, h2, p { margin: 0.2em; }
11 h1, h2 { font-size: medium; } 11 h1, h2 { font-size: medium; }
12 li { margin: 0.2em; list-style-type: none; } 12 li { margin: 0.2em; list-style-type: none; }
13 meter.barstyled::-webkit-meter-bar { background: gray; border-style: solid; bo rder-width: 2px; border-color: #222; } 13 meter.barstyled::-webkit-meter-bar { background: gray; border-style: solid; bo rder-width: 2px; border-color: #222; }
14 meter.valstyled::-webkit-meter-optimum-value { background: green; border-style : solid; border-width: 2px; border-color: #7c7; } 14 meter.valstyled::-webkit-meter-optimum-value { background: green; border-style : solid; border-width: 2px; border-color: #7c7; }
15 meter#bar-paddings { -webkit-appearance: none; } 15 meter#bar-paddings { -webkit-appearance: none; }
16 meter#bar-paddings::-webkit-meter-bar { padding: 5px; } 16 meter#bar-paddings::-webkit-meter-bar { padding: 5px; }
17 </style> 17 </style>
18 </head> 18 </head>
19 <body> 19 <body>
20 <h2>Horizontal meters with the non-themed default style</h2> 20 <h2>Horizontal meters with the native appearance</h2>
21 <ul> 21 <ul>
22 <li><meter class="usestyle" min="0" max="100" low="30" high="60" optimum="10 0" value="25" ></meter> 22 <li><meter min="0" max="100" low="30" high="60" optimum="100" value="25" >25 </meter>
23 <meter class="usestyle" min="0" max="100" low="30" high="60" optimum="10 0" value="45" ></meter> 23 <meter min="0" max="100" low="30" high="60" optimum="100" value="45" >45 </meter>
24 <meter class="usestyle" min="0" max="100" low="30" high="60" optimum="10 0" value="75" ></meter></li> 24 <meter min="0" max="100" low="30" high="60" optimum="100" value="75" >75 </meter></li>
25 <li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="25" ></meter> 25 <li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="25" >25</meter>
26 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="45" ></meter> 26 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="45" >45</meter>
27 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="75" ></meter></li> 27 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="75" >75</meter></li>
28 </ul> 28 </ul>
29 <h2>Providing meter styles</h2> 29 <h2>Providing meter styles</h2>
30 <div style="background-color: #eee"> 30 <div style="background-color: #eee">
31 <ul> 31 <ul>
32 <li><meter style="background-color: #aac; border-color: #224; border-style : solid; border-width: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has border</li> 32 <li><meter style="border-color: #224; border-style: solid; border-width: 5 px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has border</li>
33 <li><meter style="background-color: #aac; border-color: #224; padding: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" > </meter> has padding</li> 33 <li><meter style="border-color: #224; padding: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has padding</ li>
34 <li><meter style="background-color: #aac; border-color: #224; margin: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" > </meter> has margin</li> 34 <li><meter style="border-color: #224; margin: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has margin</l i>
35 <li><meter style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4p x 4px rgba(0,255,0,0.5);"></meter> has box-shadow</li> 35 <li><meter style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4p x 4px rgba(0,255,0,0.5);">0</meter> has box-shadow</li>
36 </ul> 36 </ul>
37 </div> 37 </div>
38 <h2>Providing bar and/or value styles</h2> 38 <h2>Providing bar and/or value styles</h2>
39 <div style="background-color: #eee"> 39 <div style="background-color: #eee">
40 <ul> 40 <ul>
41 default -webkit-appearance, thus should use platform theme (only for Mac.) 41 default -webkit-appearance, thus should use platform theme (only for Mac.)
42 <li><meter class="valstyled" min="0" max="100" low="30" high="60" optimum="1 00" value="80" ></meter> has bar style but should ignore it.</li> 42 <li><meter class="valstyled" min="0" max="100" low="30" high="60" optimum="1 00" value="80" >80</meter> has bar style but should ignore it.</li>
43 <li><meter class="barstyled" min="0" max="100" low="30" high="60" optimum="1 00" value="80" ></meter> has value style but should ignore it.</li> 43 <li><meter class="barstyled" min="0" max="100" low="30" high="60" optimum="1 00" value="80" >80</meter> has value style but should ignore it.</li>
44 <li><meter class="barstyled valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has both styles but should ignore them.</li> 44 <li><meter class="barstyled valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has both styles but should ignore them.</li >
45 </ul> 45 </ul>
46 46
47 <ul> 47 <ul>
48 -webkit-appearance: none, thus custom styled elements should be shown. 48 -webkit-appearance: none, thus custom styled elements should be shown.
49 <li><meter class="usestyle valstyled" min="0" max="100" low="30" high="60" o ptimum="100" value="80" ></meter> has bar style, should have solid value part.</ li> 49 <li><meter class="usestyle valstyled" min="0" max="100" low="30" high="60" o ptimum="100" value="80" >80</meter> has bar style, should have solid value part. </li>
50 <li><meter class="usestyle barstyled" min="0" max="100" low="30" high="60" o ptimum="100" value="80" ></meter> has value style, should be solid bar part.</li > 50 <li><meter class="usestyle barstyled" min="0" max="100" low="30" high="60" o ptimum="100" value="80" >80</meter> has value style, should be solid bar part.</ li>
51 <li><meter class="usestyle barstyled valstyled" min="0" max="100" low="30" h igh="60" optimum="100" value="80" ></meter> should have solid bar and value part .</li> 51 <li><meter class="usestyle barstyled valstyled" min="0" max="100" low="30" h igh="60" optimum="100" value="80" >80</meter> should have solid bar and value pa rt.</li>
52 </ul> 52 </ul>
53 </div> 53 </div>
54 <h2>Providing appearances</h2> 54 <h2>Providing appearances</h2>
55 <div style="background-color: #eee"> 55 <div style="background-color: #eee">
56 <ul> 56 <ul>
57 <li><meter style="-webkit-appearance: none" min="0" max="100" low="30" high= "60" optimum="100" value="80" ></meter> has "none" appearance, should be styled with default style.</li> 57 <li><meter style="-webkit-appearance: none; border: 1px solid red;" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has "none" app earance, should be styled with CSS.</li>
58 <li><meter style="-webkit-appearance: meter" min="0" max="100" low="30" high ="60" optimum="100" value="80" ></meter> has "meter" appearance, should be theme d.</li> 58 <li><meter style="-webkit-appearance: meter" min="0" max="100" low="30" high ="60" optimum="100" value="80" >80</meter> has "meter" appearance, should be the med.</li>
59 </ul> 59 </ul>
60 </div> 60 </div>
61 <h2>Providing bar paddings</h2> 61 <h2>Providing bar paddings</h2>
62 <div style="background-color: #eee"> 62 <div style="background-color: #eee">
63 <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" v alue="50" ></meter> has "padding" on the bar. 63 <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" v alue="50" >50</meter> has "padding" on the bar.
64 </ul> 64 </ul>
65 </div> 65 </div>
66 </body> 66 </body>
67 </html> 67 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLMeterElement.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698