Emilio Cobos Álvarez
7e9f44c2d3
This is technically a behavior change because we don't really look at the appearance value of the progressbar etc anymore. We could do that if wanted, but it's more consistent to just look at the individual frame (looking forward to appearance: base and other potential compat improvements we could make in the area). Differential Revision: https://phabricator.services.mozilla.com/D253256
41 lines
997 B
HTML
41 lines
997 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<style>
|
|
div.meter-element {
|
|
/**
|
|
* The purpose of this test is to not show the native style.
|
|
* -moz-appearance: meterbar;
|
|
*/
|
|
display: inline-block;
|
|
height: 1em;
|
|
width: 5em;
|
|
vertical-align: -0.2em;
|
|
|
|
background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
|
|
}
|
|
|
|
div.meter-bar {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
|
|
}
|
|
|
|
div.meter-element { padding: 5px; }
|
|
body > div:nth-child(1) { -moz-appearance: none; }
|
|
body > div:nth-child(2) { background: red; }
|
|
body > div:nth-child(3) { border: 2px solid red; }
|
|
</style>
|
|
<body>
|
|
<div class="meter-element">
|
|
<div class="meter-bar"></div>
|
|
</div>
|
|
<div class="meter-element">
|
|
<div class="meter-bar"></div>
|
|
</div>
|
|
<div class="meter-element">
|
|
<div class="meter-bar"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|