mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-09 01:29:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Replace ::-webkit pseudo-elements with ones from CSS Forms spec

Browse source 
This spec is very early on, and likely to change. However, it still
feels preferable to use these rather than the prefixed -webkit ones.

Plus, as we have a `::fill` on range inputs, we can use that for styling
the bar instead of inserting CSS from C++.
This commit is contained in:
Sam Atkins 2025-03-18 15:57:43 +00:00
commit 3ebdb64fed
Notes: github-actions[bot] 2025-03-19 10:11:17 +00:00
6 changed files with 85 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

109
Libraries/LibWeb/CSS/Default.css
View file

@ -78,26 +78,33 @@ input[type=range] {
display: inline-block; display: inline-block;
width: 20ch; width: 20ch;
height: 16px; height: 16px;
}
input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb { &::track {
display: block; display: block;
} position: relative;
input[type=range]::-webkit-slider-runnable-track { height: 4px;
position: relative; width: 100%;
height: 4px; margin-top: 6px;
width: 100%; background-color: AccentColorText;
margin-top: 6px; border: 1px solid rgba(0, 0, 0, 0.5);
background-color: AccentColorText; }
border: 1px solid rgba(0, 0, 0, 0.5);
} &::fill {
input[type=range]::-webkit-slider-thumb { display: block;
margin-top: -6px; position: absolute;
width: 16px; height: 100%;
height: 16px; }
transform: translateX(-50%);
border-radius: 50%; &::thumb {
outline: 1px solid rgba(0, 0, 0, 0.5); display: block;
z-index: 1; margin-top: -6px;
width: 16px;
height: 16px;
transform: translateX(-50%);
border-radius: 50%;
outline: 1px solid rgba(0, 0, 0, 0.5);
z-index: 1;
}
} }
/* Custom <meter> styles */ /* Custom <meter> styles */
@ -105,23 +112,31 @@ meter {
display: inline-block; display: inline-block;
width: 300px; width: 300px;
height: 12px; height: 12px;
}
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { &::track {
display: block; display: block;
height: 100%; height: 100%;
} background-color: hsl(0, 0%, 96%);
meter::-webkit-meter-bar { border: 1px solid rgba(0, 0, 0, 0.5);
background-color: hsl(0, 0%, 96%); }
border: 1px solid rgba(0, 0, 0, 0.5);
} &::-webkit-meter-optimum-value {
meter::-webkit-meter-optimum-value { display: block;
background-color: hsl(141, 53%, 53%); height: 100%;
} background-color: hsl(141, 53%, 53%);
meter::-webkit-meter-suboptimum-value { }
background-color: hsl(48, 100%, 67%);
} &::-webkit-meter-suboptimum-value {
meter::-webkit-meter-even-less-good-value { display: block;
background-color: hsl(348, 100%, 61%); height: 100%;
background-color: hsl(48, 100%, 67%);
}
&::-webkit-meter-even-less-good-value {
display: block;
height: 100%;
background-color: hsl(348, 100%, 61%);
}
} }
/* Custom <progress> styles */ /* Custom <progress> styles */
@ -129,14 +144,18 @@ progress {
display: inline-block; display: inline-block;
width: 300px; width: 300px;
height: 12px; height: 12px;
}
progress::-webkit-progress-bar, progress::-webkit-progress-value { &::track {
display: block; display: block;
height: 100%; height: 100%;
} background-color: AccentColorText;
progress::-webkit-progress-bar { border: 1px solid rgba(0, 0, 0, 0.5);
background-color: AccentColorText; }
border: 1px solid rgba(0, 0, 0, 0.5);
&::fill {
display: block;
height: 100%;
}
} }
/* 15.3.1 Hidden elements /* 15.3.1 Hidden elements

33
Libraries/LibWeb/CSS/Selector.cpp
View file

@ -548,26 +548,22 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el
return "first-letter"sv; return "first-letter"sv;
case Selector::PseudoElement::Type::Marker: case Selector::PseudoElement::Type::Marker:
return "marker"sv; return "marker"sv;
case Selector::PseudoElement::Type::MeterBar: case Selector::PseudoElement::Type::Track:
return "-webkit-meter-bar"sv; return "track"sv;
case Selector::PseudoElement::Type::Fill:
return "fill"sv;
case Selector::PseudoElement::Type::Thumb:
return "thumb"sv;
case Selector::PseudoElement::Type::MeterEvenLessGoodValue: case Selector::PseudoElement::Type::MeterEvenLessGoodValue:
return "-webkit-meter-even-less-good-value"sv; return "-webkit-meter-even-less-good-value"sv;
case Selector::PseudoElement::Type::MeterOptimumValue: case Selector::PseudoElement::Type::MeterOptimumValue:
return "-webkit-meter-optimum-value"sv; return "-webkit-meter-optimum-value"sv;
case Selector::PseudoElement::Type::MeterSuboptimumValue: case Selector::PseudoElement::Type::MeterSuboptimumValue:
return "-webkit-meter-suboptimum-value"sv; return "-webkit-meter-suboptimum-value"sv;
case Selector::PseudoElement::Type::ProgressBar:
return "-webkit-progress-bar"sv;
case Selector::PseudoElement::Type::ProgressValue:
return "-webkit-progress-value"sv;
case Selector::PseudoElement::Type::Placeholder: case Selector::PseudoElement::Type::Placeholder:
return "placeholder"sv; return "placeholder"sv;
case Selector::PseudoElement::Type::Selection: case Selector::PseudoElement::Type::Selection:
return "selection"sv; return "selection"sv;
case Selector::PseudoElement::Type::SliderRunnableTrack:
return "-webkit-slider-runnable-track"sv;
case Selector::PseudoElement::Type::SliderThumb:
return "-webkit-slider-thumb"sv;
case Selector::PseudoElement::Type::Backdrop: case Selector::PseudoElement::Type::Backdrop:
return "backdrop"sv; return "backdrop"sv;
case Selector::PseudoElement::Type::FileSelectorButton: case Selector::PseudoElement::Type::FileSelectorButton:
@ -575,7 +571,6 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el
case Selector::PseudoElement::Type::DetailsContent: case Selector::PseudoElement::Type::DetailsContent:
return "details-content"sv; return "details-content"sv;
case Selector::PseudoElement::Type::KnownPseudoElementCount: case Selector::PseudoElement::Type::KnownPseudoElementCount:
break;
case Selector::PseudoElement::Type::UnknownWebKit: case Selector::PseudoElement::Type::UnknownWebKit:
VERIFY_NOT_REACHED(); VERIFY_NOT_REACHED();
} }
@ -594,18 +589,18 @@ Optional<Selector::PseudoElement> Selector::PseudoElement::from_string(FlyString
return Selector::PseudoElement { Selector::PseudoElement::Type::FirstLine }; return Selector::PseudoElement { Selector::PseudoElement::Type::FirstLine };
} else if (name.equals_ignoring_ascii_case("marker"sv)) { } else if (name.equals_ignoring_ascii_case("marker"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::Marker }; return Selector::PseudoElement { Selector::PseudoElement::Type::Marker };
} else if (name.equals_ignoring_ascii_case("-webkit-meter-bar"sv)) { } else if (name.equals_ignoring_ascii_case("track"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterBar }; return Selector::PseudoElement { Selector::PseudoElement::Type::Track };
} else if (name.equals_ignoring_ascii_case("fill"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::Fill };
} else if (name.equals_ignoring_ascii_case("thumb"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::Thumb };
} else if (name.equals_ignoring_ascii_case("-webkit-meter-even-less-good-value"sv)) { } else if (name.equals_ignoring_ascii_case("-webkit-meter-even-less-good-value"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterEvenLessGoodValue }; return Selector::PseudoElement { Selector::PseudoElement::Type::MeterEvenLessGoodValue };
} else if (name.equals_ignoring_ascii_case("-webkit-meter-optimum-value"sv)) { } else if (name.equals_ignoring_ascii_case("-webkit-meter-optimum-value"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterOptimumValue }; return Selector::PseudoElement { Selector::PseudoElement::Type::MeterOptimumValue };
} else if (name.equals_ignoring_ascii_case("-webkit-meter-suboptimum-value"sv)) { } else if (name.equals_ignoring_ascii_case("-webkit-meter-suboptimum-value"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterSuboptimumValue }; return Selector::PseudoElement { Selector::PseudoElement::Type::MeterSuboptimumValue };
} else if (name.equals_ignoring_ascii_case("-webkit-progress-bar"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::ProgressBar };
} else if (name.equals_ignoring_ascii_case("-webkit-progress-value"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::ProgressValue };
} else if (name.equals_ignoring_ascii_case("placeholder"sv)) { } else if (name.equals_ignoring_ascii_case("placeholder"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::Placeholder }; return Selector::PseudoElement { Selector::PseudoElement::Type::Placeholder };
} else if (name.equals_ignoring_ascii_case("selection"sv)) { } else if (name.equals_ignoring_ascii_case("selection"sv)) {
@ -616,10 +611,6 @@ Optional<Selector::PseudoElement> Selector::PseudoElement::from_string(FlyString
return Selector::PseudoElement { Selector::PseudoElement::Type::FileSelectorButton }; return Selector::PseudoElement { Selector::PseudoElement::Type::FileSelectorButton };
} else if (name.equals_ignoring_ascii_case("details-content"sv)) { } else if (name.equals_ignoring_ascii_case("details-content"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::DetailsContent }; return Selector::PseudoElement { Selector::PseudoElement::Type::DetailsContent };
} else if (name.equals_ignoring_ascii_case("-webkit-slider-runnable-track"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::SliderRunnableTrack };
} else if (name.equals_ignoring_ascii_case("-webkit-slider-thumb"sv)) {
return Selector::PseudoElement { Selector::PseudoElement::Type::SliderThumb };
} }
return {}; return {};
} }

8
Libraries/LibWeb/CSS/Selector.h
View file

@ -30,16 +30,14 @@ public:
FirstLine, FirstLine,
FirstLetter, FirstLetter,
Marker, Marker,
MeterBar, Track,
Fill,
Thumb,
MeterEvenLessGoodValue, MeterEvenLessGoodValue,
MeterOptimumValue, MeterOptimumValue,
MeterSuboptimumValue, MeterSuboptimumValue,
ProgressValue,
ProgressBar,
Placeholder, Placeholder,
Selection, Selection,
SliderRunnableTrack,
SliderThumb,
Backdrop, Backdrop,
FileSelectorButton, FileSelectorButton,
DetailsContent, DetailsContent,

10
Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -1183,19 +1183,15 @@ void HTMLInputElement::create_range_input_shadow_tree()
set_shadow_root(shadow_root); set_shadow_root(shadow_root);
m_slider_runnable_track = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML)); m_slider_runnable_track = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_slider_runnable_track->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::SliderRunnableTrack); m_slider_runnable_track->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Track);
MUST(shadow_root->append_child(*m_slider_runnable_track)); MUST(shadow_root->append_child(*m_slider_runnable_track));
m_slider_progress_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML)); m_slider_progress_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
MUST(m_slider_progress_element->set_attribute(HTML::AttributeNames::style, R"~~~( m_slider_progress_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Fill);
display: block;
position: absolute;
height: 100%;
)~~~"_string));
MUST(m_slider_runnable_track->append_child(*m_slider_progress_element)); MUST(m_slider_runnable_track->append_child(*m_slider_progress_element));
m_slider_thumb = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML)); 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); m_slider_thumb->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Thumb);
MUST(m_slider_runnable_track->append_child(*m_slider_thumb)); MUST(m_slider_runnable_track->append_child(*m_slider_thumb));
update_slider_shadow_tree_elements(); update_slider_shadow_tree_elements();

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

@ -197,7 +197,7 @@ void HTMLMeterElement::create_shadow_tree_if_needed()
set_shadow_root(shadow_root); set_shadow_root(shadow_root);
auto meter_bar_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML)); auto meter_bar_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
meter_bar_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::MeterBar); meter_bar_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Track);
MUST(shadow_root->append_child(*meter_bar_element)); 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 = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));

4
Libraries/LibWeb/HTML/HTMLProgressElement.cpp
View file

@ -118,11 +118,11 @@ void HTMLProgressElement::create_shadow_tree_if_needed()
set_shadow_root(shadow_root); set_shadow_root(shadow_root);
auto progress_bar_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML)); auto progress_bar_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
progress_bar_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::ProgressBar); progress_bar_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Track);
MUST(shadow_root->append_child(*progress_bar_element)); MUST(shadow_root->append_child(*progress_bar_element));
m_progress_value_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML)); m_progress_value_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_progress_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::ProgressValue); m_progress_value_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Fill);
MUST(progress_bar_element->append_child(*m_progress_value_element)); MUST(progress_bar_element->append_child(*m_progress_value_element));
update_progress_value_element(); update_progress_value_element();
} }