mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-05-31 23:42:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Harmonize look of range input element

Browse source 
Previously the entire slider track was colored.
Now only the lower part of the slider track (left side of the thumb) is
colored.
Chrome and Firefox do the same.
This commit is contained in:
simonkrauter 2024-07-08 17:19:45 -03:00 • committed by Andrew Kaster
parent 449f81bfbe
commit 7766909415
Notes: sideshowbarker 2024-07-17 06:29:49 +09:00
3 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

23
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -80,6 +80,7 @@ void HTMLInputElement::visit_edges(Cell::Visitor& visitor)
visitor.visit(m_selected_files);
visitor.visit(m_slider_thumb);
visitor.visit(m_image_request);
visitor.visit(m_range_progress_element);
}
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-validity
@ -990,6 +991,15 @@ void HTMLInputElement::create_range_input_shadow_tree()
slider_runnable_track->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::SliderRunnableTrack);
MUST(shadow_root->append_child(slider_runnable_track));
m_range_progress_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
MUST(m_range_progress_element->set_attribute(HTML::AttributeNames::style, R"~~~(
display: block;
position: absolute;
height: 100%;
background-color: AccentColor;
)~~~"_string));
MUST(slider_runnable_track->append_child(*m_range_progress_element));
m_slider_thumb = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_slider_thumb->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::SliderThumb);
MUST(slider_runnable_track->append_child(*m_slider_thumb));
@ -1094,14 +1104,19 @@ void HTMLInputElement::user_interaction_did_change_input_value()
void HTMLInputElement::update_slider_thumb_element()
{
if (!m_slider_thumb)
return;
double value = value_as_number();
if (isnan(value))
value = 0;
double minimum = *min();
double maximum = *max();
double position = (value - minimum) / (maximum - minimum) * 100;
MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::MarginLeft, MUST(String::formatted("{}%", position))));
if (m_slider_thumb)
MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::MarginLeft, MUST(String::formatted("{}%", position))));
if (m_range_progress_element)
MUST(m_range_progress_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position))));
}
void HTMLInputElement::did_receive_focus()