Support the <meter> element (#35524)

* Allow attaching UA shadow roots to any element

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Implement a UA shadow tree for the <meter> element

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Add UA styles for the meter element

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

* Include spec text when computing meter state

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>

---------

Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This commit is contained in:
Simon Wülker 2025-02-21 17:28:12 +01:00 committed by GitHub
parent 6ccdf7d19f
commit 085cd981aa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 207 additions and 27 deletions

View file

@ -304,3 +304,27 @@ svg > * {
padding: 0;
margin: 0;
}
meter {
display: inline-block;
width: 100px;
height: 12px;
border-radius: 6px;
background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
overflow: clip;
}
/* FIXME: These should use the ::-moz-meter-bar pseudo element */
meter div {
height: 100%;
}
meter:-moz-meter-optimum div {
background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
meter:-moz-meter-sub-optimum div {
background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
meter:-moz-meter-sub-sub-optimum div {
background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}