1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 09:47:35 +00:00

LibWeb: Add basic HTML meter element support

This commit is contained in:
Bastiaan van der Plaat 2023-11-25 14:32:40 +01:00 committed by Sam Atkins
parent 761d824b72
commit 2107ab823d
13 changed files with 442 additions and 14 deletions

View file

@ -66,6 +66,30 @@ option {
display: none;
}
/* Custom <meter> styles */
meter {
display: inline-block;
width: 300px;
height: 12px;
}
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
display: block;
height: 100%;
}
meter::-webkit-meter-bar {
background-color: hsl(0, 0%, 96%);
border: 1px solid rgba(0, 0, 0, 0.5);
}
meter::-webkit-meter-optimum-value {
background-color: hsl(141, 53%, 53%);
}
meter::-webkit-meter-suboptimum-value {
background-color: hsl(48, 100%, 67%);
}
meter::-webkit-meter-even-less-good-value {
background-color: hsl(348, 100%, 61%);
}
/* 15.3.1 Hidden elements
* https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
*/

View file

@ -373,6 +373,14 @@ Optional<Selector::PseudoElement> pseudo_element_from_string(StringView name)
return Selector::PseudoElement::FirstLine;
} else if (name.equals_ignoring_ascii_case("marker"sv)) {
return Selector::PseudoElement::Marker;
} else if (name.equals_ignoring_ascii_case("-webkit-meter-bar"sv)) {
return Selector::PseudoElement::MeterBar;
} else if (name.equals_ignoring_ascii_case("-webkit-meter-even-less-good-value"sv)) {
return Selector::PseudoElement::MeterEvenLessGoodValue;
} else if (name.equals_ignoring_ascii_case("-webkit-meter-optimum-value"sv)) {
return Selector::PseudoElement::MeterOptimumValue;
} else if (name.equals_ignoring_ascii_case("-webkit-meter-suboptimum-value"sv)) {
return Selector::PseudoElement::MeterSuboptimumValue;
} else if (name.equals_ignoring_ascii_case("-webkit-progress-bar"sv)) {
return Selector::PseudoElement::ProgressBar;
} else if (name.equals_ignoring_ascii_case("-webkit-progress-value"sv)) {

View file

@ -27,6 +27,10 @@ public:
FirstLine,
FirstLetter,
Marker,
MeterBar,
MeterEvenLessGoodValue,
MeterOptimumValue,
MeterSuboptimumValue,
ProgressValue,
ProgressBar,
Placeholder,
@ -217,6 +221,14 @@ constexpr StringView pseudo_element_name(Selector::PseudoElement pseudo_element)
return "first-letter"sv;
case Selector::PseudoElement::Marker:
return "marker"sv;
case Selector::PseudoElement::MeterBar:
return "-webkit-meter-bar"sv;
case Selector::PseudoElement::MeterEvenLessGoodValue:
return "-webkit-meter-even-less-good-value"sv;
case Selector::PseudoElement::MeterOptimumValue:
return "-webkit-meter-optimum-value"sv;
case Selector::PseudoElement::MeterSuboptimumValue:
return "-webkit-meter-suboptimum-value"sv;
case Selector::PseudoElement::ProgressBar:
return "-webkit-progress-bar"sv;
case Selector::PseudoElement::ProgressValue: