third_party/WebKit/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html - Issue 1958073002: Introduce :-internal-shadow-host-has-appearance pseudo class, and apply it to METER element.

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

Issue 1958073002: Introduce :-internal-shadow-host-has-appearance pseudo class, and apply it to METER element. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Remove null host check 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-markup-expected.txt ('k') | third_party/WebKit/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-styles-expected.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	1 <!DOCTYPE html>

1 <html>	2 <html>

2 <head>	3 <head>

3 <script>

4 if (window.testRunner)

5 testRunner.notifyDone();

6 </script>

7 <style>	4 <style>

8 meter.tall { width: 30px; height: 40px; }	5 meter.tall { width: 30px; height: 40px; }

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

10 h1, h2 { font-size: medium; }	7 h1, h2 { font-size: medium; }

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

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

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

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

15 </style>	12 </style>

16 </head>	13 </head>

(...skipping 24 matching lines...) Expand all Loading...
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>	38 <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="barstyled" min="0" max="100" low="30" high="60" optimum="1 00" value="80" ></meter> has value style but should ignore it.</li>	39 <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 valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has both styles but should ignore them.</li>	40 <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 </ul>	41 </ul>

45	42

46 </div>	43 </div>

47 <h2>Providing appearances</h2>	44 <h2>Providing appearances</h2>

48 <div style="background-color: #eee">	45 <div style="background-color: #eee">

49 <ul>	46 <ul>

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

	48 <li><meter id="appearanceNoneLater" min="0" max="100" low="30" high="60" opt imum="100" value="80" >80%</meter> gets "none" appearance after the initial rend ering with "meter" appearance.</li>

51 </ul>	49 </ul>

52 </div>	50 </div>

53 <h2>Providing bar paddings</h2>	51 <h2>Providing bar paddings</h2>

54 <div style="background-color: #eee">	52 <div style="background-color: #eee">

55 <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" v alue="50" ></meter> has "padding" on the bar.	53 <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" v alue="50" ></meter> has "padding" on the bar.

56 </ul>	54 </ul>

57 </div>	55 </div>

	56 <script>

	57 var noneLater = document.getElementById('appearanceNoneLater');

	58 noneLater.offsetLeft; // Force layout.

	59 noneLater.setAttribute('style', '-webkit-appearance:none');

	60 noneLater.offsetLeft; // Force layout.

	61 </script>

58 </body>	62 </body>

59 </html>	63 </html>

OLD	NEW