blob: aad87e9935c825237187fdae06468002e97a51c7 [file] [log] [blame]
Both meter elements should have a nested shadow box with a width specified:
| "
"
| <meter>
| max="100"
| value="70"
| <shadow:root>
| <style>
| "div#inner { -webkit-appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; "
| <div>
| id="inner"
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| id="bar"
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| class="optimum"
| id="value"
| pseudo="-webkit-meter-optimum-value"
| style="width: 70%;"
| shadow:pseudoId="-webkit-meter-optimum-value"
| "
"
| <meter>
| high="6"
| low="3"
| max="10"
| min="0"
| optimum="5"
| value="10"
| <shadow:root>
| <style>
| "div#inner { -webkit-appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; "
| <div>
| id="inner"
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| id="bar"
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| class="suboptimum"
| id="value"
| pseudo="-webkit-meter-suboptimum-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-suboptimum-value"
| "
"
| <meter>
| high="6"
| low="3"
| max="10"
| min="0"
| optimum="0"
| value="10"
| <shadow:root>
| <style>
| "div#inner { -webkit-appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc)); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3)); } div#value.suboptimum { background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3)); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44)); height: 100%; box-sizing: border-box; "
| <div>
| id="inner"
| pseudo="-webkit-meter-inner-element"
| shadow:pseudoId="-webkit-meter-inner-element"
| <div>
| id="bar"
| pseudo="-webkit-meter-bar"
| shadow:pseudoId="-webkit-meter-bar"
| <div>
| class="even-less-good"
| id="value"
| pseudo="-webkit-meter-even-less-good-value"
| style="width: 100%;"
| shadow:pseudoId="-webkit-meter-even-less-good-value"
| "
"