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.

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

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 »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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..4824bf69d8310fa2f265be3f51186f16e9d865f7 100644

--- a/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html

+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html

@@ -5,23 +5,21 @@ 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.tall { width: 30px; height: 40px; }

ul, h2, p { margin: 0.2em; }

h1, h2 { font-size: medium; }

li { margin: 0.2em; list-style-type: none; }

meter.barstyled::-webkit-meter-bar { background: gray; border-style: solid; border-width: 2px; border-color: #222; }

meter.valstyled::-webkit-meter-optimum-value { background: green; border-style: solid; border-width: 2px; border-color: #7c7; }

- meter#bar-paddings { -webkit-appearance: none; }

meter#bar-paddings::-webkit-meter-bar { padding: 5px; }

</style>

</head>

<body>

<h2>Horizontal meters with the non-themed default style</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 min="0" max="100" low="30" high="60" optimum="100" value="25" ></meter>

+ <meter min="0" max="100" low="30" high="60" optimum="100" value="45" ></meter>

+ <meter min="0" max="100" low="30" high="60" optimum="100" value="75" ></meter></li>

@@ -29,33 +27,27 @@ if (window.testRunner)

<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="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="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="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="background: blue; color: white;" value="50">50</meter> Background CSS property disables -webkit-appearance automatically.</li>

</ul>

</div>

<h2>Providing bar and/or value styles</h2>

<ul>

- default -webkit-appearance, thus should use platform theme (only for Mac.)

+ default -webkit-appearance, thus should use Shadow DOM CSS rendring.

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

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

- </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" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has "none" appearance, should render METER content.</li>

</ul>

</div>

<h2>Providing bar paddings</h2>