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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1877763002: METER with -webkit-appearance:none should be rendered with the normal CSS way. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Drop LayoutTheme change, add TODO comments Created 4 years, 7 months 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 | « third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-element-repaint-on-update-value.html ('k') | third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles-changing-pseudo.html » ('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.tall { width: 30px; height: 40px; }
9 meter.tall { width: 30px; height: 40px; -webkit-appearance: none; /* this forc es styling; */ }
10 ul, h2, p { margin: 0.2em; } 9 ul, h2, p { margin: 0.2em; }
11 h1, h2 { font-size: medium; } 10 h1, h2 { font-size: medium; }
12 li { margin: 0.2em; list-style-type: none; } 11 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; } 12 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; } 13 meter.valstyled::-webkit-meter-optimum-value { background: green; border-style : solid; border-width: 2px; border-color: #7c7; }
15 meter#bar-paddings { -webkit-appearance: none; }
16 meter#bar-paddings::-webkit-meter-bar { padding: 5px; } 14 meter#bar-paddings::-webkit-meter-bar { padding: 5px; }
17 </style> 15 </style>
18 </head> 16 </head>
19 <body> 17 <body>
20 <h2>Horizontal meters with the non-themed default style</h2> 18 <h2>Horizontal meters with the non-themed default style</h2>
21 <ul> 19 <ul>
22 <li><meter class="usestyle" min="0" max="100" low="30" high="60" optimum="10 0" value="25" ></meter> 20 <li><meter min="0" max="100" low="30" high="60" optimum="100" value="25" ></ meter>
23 <meter class="usestyle" min="0" max="100" low="30" high="60" optimum="10 0" value="45" ></meter> 21 <meter min="0" max="100" low="30" high="60" optimum="100" value="45" ></ meter>
24 <meter class="usestyle" min="0" max="100" low="30" high="60" optimum="10 0" value="75" ></meter></li> 22 <meter min="0" max="100" low="30" high="60" optimum="100" value="75" ></ meter></li>
25 <li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="25" ></meter> 23 <li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="25" ></meter>
26 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="45" ></meter> 24 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="45" ></meter>
27 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="75" ></meter></li> 25 <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" v alue="75" ></meter></li>
28 </ul> 26 </ul>
29 <h2>Providing meter styles</h2> 27 <h2>Providing meter styles</h2>
30 <div style="background-color: #eee"> 28 <div style="background-color: #eee">
31 <ul> 29 <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> 30 <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" ></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> 31 <li><meter style="border-color: #224; padding: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="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> 32 <li><meter style="border-color: #224; margin: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has margin</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);"></meter> has box-shadow</li> 33 <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>
34 <li><meter style="background: blue; color: white;" value="50">50</meter> B ackground CSS property disables -webkit-appearance automatically.</li>
36 </ul> 35 </ul>
37 </div> 36 </div>
38 <h2>Providing bar and/or value styles</h2> 37 <h2>Providing bar and/or value styles</h2>
39 <div style="background-color: #eee"> 38 <div style="background-color: #eee">
40 <ul> 39 <ul>
41 default -webkit-appearance, thus should use platform theme (only for Mac.) 40 default -webkit-appearance, thus should use Shadow DOM CSS rendring.
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> 41 <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>
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> 42 <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>
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> 43 <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>
45 </ul> 44 </ul>
46 45
47 <ul>
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>
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 >
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>
52 </ul>
53 </div> 46 </div>
54 <h2>Providing appearances</h2> 47 <h2>Providing appearances</h2>
55 <div style="background-color: #eee"> 48 <div style="background-color: #eee">
56 <ul> 49 <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> 50 <li><meter style="-webkit-appearance: none" min="0" max="100" low="30" high= "60" optimum="100" value="80" >80</meter> has "none" appearance, should render M ETER content.</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>
59 </ul> 51 </ul>
60 </div> 52 </div>
61 <h2>Providing bar paddings</h2> 53 <h2>Providing bar paddings</h2>
62 <div style="background-color: #eee"> 54 <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. 55 <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" v alue="50" ></meter> has "padding" on the bar.
64 </ul> 56 </ul>
65 </div> 57 </div>
66 </body> 58 </body>
67 </html> 59 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-element-repaint-on-update-value.html ('k') | third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles-changing-pseudo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698