
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  "