mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-26 14:28:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Replace webkit meter-state pseudo-elements with pseudo-classes

Browse source 
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: https://github.com/openui/open-ui/issues/1130
This commit is contained in:
Sam Atkins 2025-03-18 16:56:41 +00:00
parent 1978578a72
commit d5b9c39a98
Notes: github-actions[bot] 2025-03-19 10:10:57 +00:00
6 changed files with 44 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

13
Libraries/LibWeb/HTML/HTMLMeterElement.cpp
View file

@ -201,6 +201,7 @@ void HTMLMeterElement::create_shadow_tree_if_needed()
MUST(shadow_root->append_child(*meter_bar_element));
m_meter_value_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Fill);
MUST(meter_bar_element->append_child(*m_meter_value_element));
update_meter_value_element();
}
@ -242,18 +243,6 @@ void HTMLMeterElement::update_meter_value_element()
if (!m_meter_value_element)
return;
switch (m_cached_value_state) {
case ValueState::Optimal:
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::MeterOptimumValue);
break;
case ValueState::Suboptimal:
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::MeterSuboptimumValue);
break;
case ValueState::EvenLessGood:
m_meter_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::MeterEvenLessGoodValue);
break;
}
double position = (value - min) / (max - min) * 100;
MUST(m_meter_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position))));
}