blob: 4b94e82c34962b5f1edbac87346da44fe5f2e0c0 [file] [log] [blame]
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 "