mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-09 02:56:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 13

LibWeb: Make SelectElement arrow use text color

Browse source
This commit is contained in:
Psychpsyo 2025-02-20 18:58:39 +01:00 • committed by Tim Flynn
commit 3fbbe9d6a5
Notes: github-actions[bot] 2025-02-20 19:07:26 +00:00
3 changed files with 18 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Libraries/LibWeb/HTML/HTMLSelectElement.cpp
View file

@ -606,8 +606,7 @@ void HTMLSelectElement::create_shadow_tree_if_needed()
MUST(border->append_child(*m_inner_text_element)); MUST(border->append_child(*m_inner_text_element));
// FIXME: Find better way to add chevron icon // FIXME: Find better way to add chevron icon
auto chevron_fill_color = document().page().palette().base_text(); static constexpr auto chevron_svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"currentcolor\" d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\"/></svg>"sv;
auto chevron_svg = MUST(String::formatted("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"{}\" d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\"/></svg>", chevron_fill_color));
m_chevron_icon_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors(); m_chevron_icon_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
MUST(m_chevron_icon_element->set_attribute(HTML::AttributeNames::style, R"~~~( MUST(m_chevron_icon_element->set_attribute(HTML::AttributeNames::style, R"~~~(

13
Tests/LibWeb/Ref/expected/select-chevron-color-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
The arrow in this select should be green:<br>
<!-- using a button here since it should have the same default styles as a select -->
<button style="color: green;">
<div style="display: flex; align-items: center; height: 100%;">
<div style="flex: 1;"></div>
<div style="width: 16px; height: 16px; margin-left: 4px; display: block;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentcolor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
</svg>
</div>
</div>
</button>

4
Tests/LibWeb/Ref/input/select-chevron-color.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<link rel="match" href="../expected/select-chevron-color-ref.html" />
The arrow in this select should be green:<br>
<select style="color: green">