RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 17:57:35 +00:00
Code Issues Activity Actions

LibWeb: Add basic HTML meter element support

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

24
Userland/Libraries/LibWeb/CSS/Default.css
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
*/

8
Userland/Libraries/LibWeb/CSS/Selector.cpp
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)) {

12
Userland/Libraries/LibWeb/CSS/Selector.h
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: