Index: third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html |
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html b/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html |
index a26c51908960230d93861cedfdfb4d935dacaac8..b8f6df74ef2a277cb4e7d8024b2aabc706036f2f 100644 |
--- a/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html |
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html |
@@ -5,8 +5,8 @@ if (window.testRunner) |
testRunner.notifyDone(); |
</script> |
<style> |
- meter.usestyle { -webkit-appearance: none; /* this forces styling; */ } |
- meter.tall { width: 30px; height: 40px; -webkit-appearance: none; /* this forces styling; */ } |
+ meter.usestyle { -webkit-appearance: none; } |
+ meter.tall { width: 30px; height: 40px; } |
ul, h2, p { margin: 0.2em; } |
h1, h2 { font-size: medium; } |
li { margin: 0.2em; list-style-type: none; } |
@@ -17,50 +17,50 @@ if (window.testRunner) |
</style> |
</head> |
<body> |
- <h2>Horizontal meters with the non-themed default style</h2> |
+ <h2>Horizontal meters with the native appearance</h2> |
<ul> |
- <li><meter class="usestyle" min="0" max="100" low="30" high="60" optimum="100" value="25" ></meter> |
- <meter class="usestyle" min="0" max="100" low="30" high="60" optimum="100" value="45" ></meter> |
- <meter class="usestyle" min="0" max="100" low="30" high="60" optimum="100" value="75" ></meter></li> |
- <li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="25" ></meter> |
- <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="45" ></meter> |
- <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="75" ></meter></li> |
+ <li><meter min="0" max="100" low="30" high="60" optimum="100" value="25" >25</meter> |
+ <meter min="0" max="100" low="30" high="60" optimum="100" value="45" >45</meter> |
+ <meter min="0" max="100" low="30" high="60" optimum="100" value="75" >75</meter></li> |
+ <li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="25" >25</meter> |
+ <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="45" >45</meter> |
+ <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="75" >75</meter></li> |
</ul> |
<h2>Providing meter styles</h2> |
<div style="background-color: #eee"> |
<ul> |
- <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> |
- <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> |
- <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> |
- <li><meter style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"></meter> has box-shadow</li> |
+ <li><meter style="border-color: #224; border-style: solid; border-width: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has border</li> |
+ <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> |
+ <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</li> |
+ <li><meter style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);">0</meter> has box-shadow</li> |
</ul> |
</div> |
<h2>Providing bar and/or value styles</h2> |
<div style="background-color: #eee"> |
<ul> |
default -webkit-appearance, thus should use platform theme (only for Mac.) |
- <li><meter class="valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has bar style but should ignore it.</li> |
- <li><meter class="barstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has value style but should ignore it.</li> |
- <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> |
+ <li><meter class="valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has bar style but should ignore it.</li> |
+ <li><meter class="barstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has value style but should ignore it.</li> |
+ <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> |
</ul> |
<ul> |
-webkit-appearance: none, thus custom styled elements should be shown. |
- <li><meter class="usestyle valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has bar style, should have solid value part.</li> |
- <li><meter class="usestyle barstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has value style, should be solid bar part.</li> |
- <li><meter class="usestyle barstyled valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> should have solid bar and value part.</li> |
+ <li><meter class="usestyle valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has bar style, should have solid value part.</li> |
+ <li><meter class="usestyle barstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has value style, should be solid bar part.</li> |
+ <li><meter class="usestyle barstyled valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> should have solid bar and value part.</li> |
</ul> |
</div> |
<h2>Providing appearances</h2> |
<div style="background-color: #eee"> |
<ul> |
- <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> |
- <li><meter style="-webkit-appearance: meter" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has "meter" appearance, should be themed.</li> |
+ <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" appearance, should be styled with CSS.</li> |
+ <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 themed.</li> |
</ul> |
</div> |
<h2>Providing bar paddings</h2> |
<div style="background-color: #eee"> |
- <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" value="50" ></meter> has "padding" on the bar. |
+ <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" value="50" >50</meter> has "padding" on the bar. |
</ul> |
</div> |
</body> |