| |
| Both meter elements should have a nested shadow box with a width specified: |
| | "\n " |
| | <meter> |
| | max="100" |
| | value="70" |
| | <shadow:root> |
| | <style> |
| | "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); } div#value.suboptimum { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); 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" |
| | "\n " |
| | <meter> |
| | high="6" |
| | low="3" |
| | max="10" |
| | min="0" |
| | optimum="5" |
| | value="10" |
| | <shadow:root> |
| | <style> |
| | "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); } div#value.suboptimum { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); 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" |
| | "\n " |
| | <meter> |
| | high="6" |
| | low="3" |
| | max="10" |
| | min="0" |
| | optimum="0" |
| | value="10" |
| | <shadow:root> |
| | <style> |
| | "div#inner { appearance: inherit; box-sizing: inherit; height: 100%; width: 100%; } div#bar { background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); height: 100%; width: 100%; box-sizing: border-box; } div#value { height: 100%; box-sizing: border-box; } div#value.optimum { background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); } div#value.suboptimum { background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); height: 100%; box-sizing: border-box; } div#value.even-less-good { background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); 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" |
| | "\n " |