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.

Unified 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 side-by-side diff with in-line comments

Download patch

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>

<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>

<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>

<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>

- <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>

« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/HTMLMeterElement.cpp » ('j') | no next file with comments »