mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-08 09:09:43 +00:00
LibWeb: Replace ::-webkit pseudo-elements with ones from CSS Forms spec
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
parent
f5a6704219
commit
3ebdb64fed
Notes:
github-actions[bot]
2025-03-19 10:11:17 +00:00
Author: https://github.com/AtkinsSJ
Commit: 3ebdb64fed
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3991
6 changed files with 85 additions and 81 deletions
|
|
@ -78,11 +78,9 @@ input[type=range] {
|
|||
display: inline-block;
|
||||
width: 20ch;
|
||||
height: 16px;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
|
||||
|
||||
&::track {
|
||||
display: block;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
|
|
@ -90,7 +88,15 @@ input[type=range]::-webkit-slider-runnable-track {
|
|||
background-color: AccentColorText;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
|
||||
&::fill {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&::thumb {
|
||||
display: block;
|
||||
margin-top: -6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -99,44 +105,57 @@ input[type=range]::-webkit-slider-thumb {
|
|||
outline: 1px solid rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
|
||||
&::track {
|
||||
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 {
|
||||
|
||||
&::-webkit-meter-optimum-value {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: hsl(141, 53%, 53%);
|
||||
}
|
||||
meter::-webkit-meter-suboptimum-value {
|
||||
|
||||
&::-webkit-meter-suboptimum-value {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: hsl(48, 100%, 67%);
|
||||
}
|
||||
meter::-webkit-meter-even-less-good-value {
|
||||
|
||||
&::-webkit-meter-even-less-good-value {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: hsl(348, 100%, 61%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom <progress> styles */
|
||||
progress {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 12px;
|
||||
|
||||
&::track {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: AccentColorText;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
progress::-webkit-progress-bar, progress::-webkit-progress-value {
|
||||
|
||||
&::fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: AccentColorText;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 15.3.1 Hidden elements
|
||||
|
|
|
|||
|
|
@ -548,26 +548,22 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el
|
|||
return "first-letter"sv;
|
||||
case Selector::PseudoElement::Type::Marker:
|
||||
return "marker"sv;
|
||||
case Selector::PseudoElement::Type::MeterBar:
|
||||
return "-webkit-meter-bar"sv;
|
||||
case Selector::PseudoElement::Type::Track:
|
||||
return "track"sv;
|
||||
case Selector::PseudoElement::Type::Fill:
|
||||
return "fill"sv;
|
||||
case Selector::PseudoElement::Type::Thumb:
|
||||
return "thumb"sv;
|
||||
case Selector::PseudoElement::Type::MeterEvenLessGoodValue:
|
||||
return "-webkit-meter-even-less-good-value"sv;
|
||||
case Selector::PseudoElement::Type::MeterOptimumValue:
|
||||
return "-webkit-meter-optimum-value"sv;
|
||||
case Selector::PseudoElement::Type::MeterSuboptimumValue:
|
||||
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:
|
||||
return "placeholder"sv;
|
||||
case Selector::PseudoElement::Type::Selection:
|
||||
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:
|
||||
return "backdrop"sv;
|
||||
case Selector::PseudoElement::Type::FileSelectorButton:
|
||||
|
|
@ -575,7 +571,6 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el
|
|||
case Selector::PseudoElement::Type::DetailsContent:
|
||||
return "details-content"sv;
|
||||
case Selector::PseudoElement::Type::KnownPseudoElementCount:
|
||||
break;
|
||||
case Selector::PseudoElement::Type::UnknownWebKit:
|
||||
VERIFY_NOT_REACHED();
|
||||
}
|
||||
|
|
@ -594,18 +589,18 @@ Optional<Selector::PseudoElement> Selector::PseudoElement::from_string(FlyString
|
|||
return Selector::PseudoElement { Selector::PseudoElement::Type::FirstLine };
|
||||
} else if (name.equals_ignoring_ascii_case("marker"sv)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::Marker };
|
||||
} else if (name.equals_ignoring_ascii_case("-webkit-meter-bar"sv)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterBar };
|
||||
} else if (name.equals_ignoring_ascii_case("track"sv)) {
|
||||
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)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterEvenLessGoodValue };
|
||||
} else if (name.equals_ignoring_ascii_case("-webkit-meter-optimum-value"sv)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::MeterOptimumValue };
|
||||
} else if (name.equals_ignoring_ascii_case("-webkit-meter-suboptimum-value"sv)) {
|
||||
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)) {
|
||||
return Selector::PseudoElement { Selector::PseudoElement::Type::Placeholder };
|
||||
} 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 };
|
||||
} else if (name.equals_ignoring_ascii_case("details-content"sv)) {
|
||||
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 {};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,16 +30,14 @@ public:
|
|||
FirstLine,
|
||||
FirstLetter,
|
||||
Marker,
|
||||
MeterBar,
|
||||
Track,
|
||||
Fill,
|
||||
Thumb,
|
||||
MeterEvenLessGoodValue,
|
||||
MeterOptimumValue,
|
||||
MeterSuboptimumValue,
|
||||
ProgressValue,
|
||||
ProgressBar,
|
||||
Placeholder,
|
||||
Selection,
|
||||
SliderRunnableTrack,
|
||||
SliderThumb,
|
||||
Backdrop,
|
||||
FileSelectorButton,
|
||||
DetailsContent,
|
||||
|
|
|
|||
|
|
@ -1183,19 +1183,15 @@ void HTMLInputElement::create_range_input_shadow_tree()
|
|||
set_shadow_root(shadow_root);
|
||||
|
||||
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));
|
||||
|
||||
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"~~~(
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
)~~~"_string));
|
||||
m_slider_progress_element->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::Fill);
|
||||
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->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));
|
||||
|
||||
update_slider_shadow_tree_elements();
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ void HTMLMeterElement::create_shadow_tree_if_needed()
|
|||
set_shadow_root(shadow_root);
|
||||
|
||||
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));
|
||||
|
||||
m_meter_value_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
|
||||
|
|
|
|||
|
|
@ -118,11 +118,11 @@ void HTMLProgressElement::create_shadow_tree_if_needed()
|
|||
set_shadow_root(shadow_root);
|
||||
|
||||
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));
|
||||
|
||||
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));
|
||||
update_progress_value_element();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue