Skip to content

Commit d5b9c39

Browse files
AtkinsSJAtkinsSJ
committed
LibWeb: Replace webkit meter-state pseudo-elements with pseudo-classes
This also implements the `:high-value` and `:low-value` that are in the spec. Same note as before about this being based on the very-drafty CSS Forms spec. In fact, some of this isn't even in that spec yet. Specifically, the `:suboptimal-value` and `:even-less-good-value` names are undecided and subject to change. However, it's clear that this is a pseudo-class situation, not a pseudo-element one, so I think this is still an improvement, as it allows styling of the `::fill` pseudo-element regardless of what state it is in. Relevant spec issue: openui/open-ui#1130
1 parent 1978578 commit d5b9c39

File tree

6 files changed

+44
-34
lines changed

6 files changed

+44
-34
lines changed

‎Libraries/LibWeb/CSS/Default.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -122,21 +122,20 @@ meter {
122122
border: 1px solid rgba(0, 0, 0, 0.5);
123123
}
124124

125-
&::-webkit-meter-optimum-value {
125+
&::fill {
126126
display: block;
127127
height: 100%;
128+
}
129+
130+
&:optimal-value::fill {
128131
background-color: hsl(141, 53%, 53%);
129132
}
130133

131-
&::-webkit-meter-suboptimum-value {
132-
display: block;
133-
height: 100%;
134+
&:suboptimal-value::fill {
134135
background-color: hsl(48, 100%, 67%);
135136
}
136137

137-
&::-webkit-meter-even-less-good-value {
138-
display: block;
139-
height: 100%;
138+
&:even-less-good-value::fill {
140139
background-color: hsl(348, 100%, 61%);
141140
}
142141
}

‎Libraries/LibWeb/CSS/PseudoClasses.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
"enabled": {
2727
"argument": ""
2828
},
29+
"even-less-good-value": {
30+
"argument": ""
31+
},
2932
"first-child": {
3033
"argument": ""
3134
},
@@ -44,6 +47,9 @@
4447
"has": {
4548
"argument": "<relative-selector-list>"
4649
},
50+
"high-value": {
51+
"argument": ""
52+
},
4753
"host": {
4854
"argument": "<compound-selector>?"
4955
},
@@ -74,6 +80,9 @@
7480
"local-link": {
7581
"argument": ""
7682
},
83+
"low-value": {
84+
"argument": ""
85+
},
7786
"modal": {
7887
"argument": ""
7988
},
@@ -104,6 +113,9 @@
104113
"open": {
105114
"argument": ""
106115
},
116+
"optimal-value": {
117+
"argument": ""
118+
},
107119
"popover-open": {
108120
"argument": ""
109121
},
@@ -134,6 +146,9 @@
134146
"stalled": {
135147
"argument": ""
136148
},
149+
"suboptimal-value": {
150+
"argument": ""
151+
},
137152
"target": {
138153
"argument": ""
139154
},

‎Libraries/LibWeb/CSS/Selector.cpp‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -554,12 +554,6 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el
554554
return "fill"sv;
555555
case Selector::PseudoElement::Type::Thumb:
556556
return "thumb"sv;
557-
case Selector::PseudoElement::Type::MeterEvenLessGoodValue:
558-
return "-webkit-meter-even-less-good-value"sv;
559-
case Selector::PseudoElement::Type::MeterOptimumValue:
560-
return "-webkit-meter-optimum-value"sv;
561-
case Selector::PseudoElement::Type::MeterSuboptimumValue:
562-
return "-webkit-meter-suboptimum-value"sv;
563557
case Selector::PseudoElement::Type::Placeholder:
564558
return "placeholder"sv;
565559
case Selector::PseudoElement::Type::Selection:
@@ -595,12 +589,6 @@ Optional<Selector::PseudoElement> Selector::PseudoElement::from_string(FlyString
595589
return Selector::PseudoElement { Selector::PseudoElement::Type::Fill };
596590
} else if (name.equals_ignoring_ascii_case("thumb"sv)) {
597591
return Selector::PseudoElement { Selector::PseudoElement::Type::Thumb };
598-
} else if (name.equals_ignoring_ascii_case("-webkit-meter-even-less-good-value"sv)) {
599-
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterEvenLessGoodValue };
600-
} else if (name.equals_ignoring_ascii_case("-webkit-meter-optimum-value"sv)) {
601-
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterOptimumValue };
602-
} else if (name.equals_ignoring_ascii_case("-webkit-meter-suboptimum-value"sv)) {
603-
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterSuboptimumValue };
604592
} else if (name.equals_ignoring_ascii_case("placeholder"sv)) {
605593
return Selector::PseudoElement { Selector::PseudoElement::Type::Placeholder };
606594
} else if (name.equals_ignoring_ascii_case("selection"sv)) {

‎Libraries/LibWeb/CSS/Selector.h‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@ class Selector : public RefCounted<Selector> {
3333
Track,
3434
Fill,
3535
Thumb,
36-
MeterEvenLessGoodValue,
37-
MeterOptimumValue,
38-
MeterSuboptimumValue,
3936
Placeholder,
4037
Selection,
4138
Backdrop,

‎Libraries/LibWeb/CSS/SelectorEngine.cpp‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
#include <LibWeb/HTML/HTMLHtmlElement.h>
2424
#include <LibWeb/HTML/HTMLInputElement.h>
2525
#include <LibWeb/HTML/HTMLMediaElement.h>
26+
#include <LibWeb/HTML/HTMLMeterElement.h>
2627
#include <LibWeb/HTML/HTMLProgressElement.h>
2728
#include <LibWeb/HTML/HTMLSelectElement.h>
2829
#include <LibWeb/HTML/HTMLTextAreaElement.h>
@@ -423,6 +424,13 @@ static inline bool matches_host_pseudo_class(GC::Ref<DOM::Element const> element
423424
return true;
424425
}
425426

427+
static bool matches_optimal_value_pseudo_class(DOM::Element const& element, HTML::HTMLMeterElement::ValueState desired_state)
428+
{
429+
if (auto* meter = as_if<HTML::HTMLMeterElement>(element))
430+
return meter->value_state() == desired_state;
431+
return false;
432+
}
433+
426434
static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoClassSelector const& pseudo_class, DOM::Element const& element, GC::Ptr<DOM::Element const> shadow_host, MatchContext& context, GC::Ptr<DOM::ParentNode const> scope, SelectorKind selector_kind)
427435
{
428436
switch (pseudo_class.type) {
@@ -502,6 +510,20 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
502510
return element.matches_checked_pseudo_class();
503511
case CSS::PseudoClass::Indeterminate:
504512
return matches_indeterminate_pseudo_class(element);
513+
case CSS::PseudoClass::HighValue:
514+
if (auto* meter = as_if<HTML::HTMLMeterElement>(element))
515+
return meter->value() > meter->high();
516+
return false;
517+
case CSS::PseudoClass::LowValue:
518+
if (auto* meter = as_if<HTML::HTMLMeterElement>(element))
519+
return meter->value() < meter->low();
520+
return false;
521+
case CSS::PseudoClass::OptimalValue:
522+
return matches_optimal_value_pseudo_class(element, HTML::HTMLMeterElement::ValueState::Optimal);
523+
case CSS::PseudoClass::SuboptimalValue:
524+
return matches_optimal_value_pseudo_class(element, HTML::HTMLMeterElement::ValueState::Suboptimal);
525+
case CSS::PseudoClass::EvenLessGoodValue:
526+
return matches_optimal_value_pseudo_class(element, HTML::HTMLMeterElement::ValueState::EvenLessGood);
505527
case CSS::PseudoClass::Defined:
506528
return element.is_defined();
507529
case CSS::PseudoClass::Has:

‎Libraries/LibWeb/HTML/HTMLMeterElement.cpp‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ void HTMLMeterElement::create_shadow_tree_if_needed()
201201
MUST(shadow_root->append_child(*meter_bar_element));
202202

203203
m_meter_value_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
204+
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Fill);
204205
MUST(meter_bar_element->append_child(*m_meter_value_element));
205206
update_meter_value_element();
206207
}
@@ -242,18 +243,6 @@ void HTMLMeterElement::update_meter_value_element()
242243
if (!m_meter_value_element)
243244
return;
244245

245-
switch (m_cached_value_state) {
246-
case ValueState::Optimal:
247-
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::MeterOptimumValue);
248-
break;
249-
case ValueState::Suboptimal:
250-
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::MeterSuboptimumValue);
251-
break;
252-
case ValueState::EvenLessGood:
253-
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::MeterEvenLessGoodValue);
254-
break;
255-
}
256-
257246
double position = (value - min) / (max - min) * 100;
258247
MUST(m_meter_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position))));
259248
}

0 commit comments

Comments
 (0)