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