beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Compare commits

base: beenull:18f8248f87f10b61a606f4b8eba08a46198fd185
Branches Tags
beenull:master
...
compare: beenull:81412f2b3ef66940d9da62ba0ae3bbfee6f58e2f
Branches Tags
beenull:master

2 commits
18f8248f87 ... 81412f2b3e

Author SHA1 Message Date
Ankush Chatterjee
81412f2b3e
Merge 47332055fe into 63a5717bc7 2024-11-21 02:09:21 +05:30
Ankush Chatterjee
47332055fe LibWeb/CSS: Add support for custom elements in CSSStyleDeclaration 2024-11-15 00:51:50 +05:30
11 changed files with 104 additions and 39 deletions
Show stats Expand all files Collapse all files

58
Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp
View file

@ -9,6 +9,7 @@
#include <LibWeb/Bindings/Intrinsics.h> #include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/CSS/CSSStyleDeclaration.h> #include <LibWeb/CSS/CSSStyleDeclaration.h>
#include <LibWeb/CSS/Parser/Parser.h> #include <LibWeb/CSS/Parser/Parser.h>
#include <LibWeb/CSS/PropertyName.h>
#include <LibWeb/CSS/StyleComputer.h> #include <LibWeb/CSS/StyleComputer.h>
#include <LibWeb/CSS/StyleValues/ImageStyleValue.h> #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
#include <LibWeb/DOM/Document.h> #include <LibWeb/DOM/Document.h>
@ -102,7 +103,7 @@ Optional<StyleProperty> PropertyOwningCSSStyleDeclaration::property(PropertyID p
} }
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(PropertyID property_id, StringView value, StringView priority) WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(PropertyID property_id, Optional<StringView> property_name, StringView value, StringView priority)
{ {
// 1. If the computed flag is set, then throw a NoModificationAllowedError exception. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
// NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration. // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
@ -114,7 +115,10 @@ WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(Proper
// 3. If value is the empty string, invoke removeProperty() with property as argument and return. // 3. If value is the empty string, invoke removeProperty() with property as argument and return.
if (value.is_empty()) { if (value.is_empty()) {
MUST(remove_property(property_id)); if (property_name.has_value())
MUST(remove_property(property_id, property_name.value()));
else
MUST(remove_property(property_id, string_from_property_id(property_id)));
return {}; return {};
} }
@ -137,11 +141,11 @@ WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(Proper
// 8. If property is a shorthand property, // 8. If property is a shorthand property,
if (property_is_shorthand(property_id)) { if (property_is_shorthand(property_id)) {
// then for each longhand property longhand that property maps to, in canonical order, follow these substeps: // then for each longhand property longhand that property maps to, in canonical order, follow these substeps:
StyleComputer::for_each_property_expanding_shorthands(property_id, *component_value_list, StyleComputer::AllowUnresolved::Yes, [this, &updated, priority](PropertyID longhand_property_id, CSSStyleValue const& longhand_value) { StyleComputer::for_each_property_expanding_shorthands(property_id, *component_value_list, StyleComputer::AllowUnresolved::Yes, [this, &updated, property_name, priority](PropertyID longhand_property_id, CSSStyleValue const& longhand_value) {
// 1. Let longhand result be the result of set the CSS declaration longhand with the appropriate value(s) from component value list, // 1. Let longhand result be the result of set the CSS declaration longhand with the appropriate value(s) from component value list,
// with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations. // with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations.
// 2. If longhand result is true, let updated be true. // 2. If longhand result is true, let updated be true.
updated |= set_a_css_declaration(longhand_property_id, longhand_value, !priority.is_empty() ? Important::Yes : Important::No); updated |= set_a_css_declaration(longhand_property_id, property_name, longhand_value, !priority.is_empty() ? Important::Yes : Important::No);
}); });
} }
// 9. Otherwise, // 9. Otherwise,
@ -149,7 +153,7 @@ WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(Proper
// let updated be the result of set the CSS declaration property with value component value list, // let updated be the result of set the CSS declaration property with value component value list,
// with the important flag set if priority is not the empty string, and unset otherwise, // with the important flag set if priority is not the empty string, and unset otherwise,
// and with the list of declarations being the declarations. // and with the list of declarations being the declarations.
updated = set_a_css_declaration(property_id, *component_value_list, !priority.is_empty() ? Important::Yes : Important::No); updated = set_a_css_declaration(property_id, property_name, *component_value_list, !priority.is_empty() ? Important::Yes : Important::No);
} }
// 10. If updated is true, update style attribute for the CSS declaration block. // 10. If updated is true, update style attribute for the CSS declaration block.
@ -160,7 +164,7 @@ WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(Proper
} }
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty
WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(PropertyID property_id) WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(PropertyID property_id, StringView property_name)
{ {
// 1. If the computed flag is set, then throw a NoModificationAllowedError exception. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
// NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration. // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
@ -169,8 +173,7 @@ WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(P
// NOTE: We've already converted it to a PropertyID enum value. // NOTE: We've already converted it to a PropertyID enum value.
// 3. Let value be the return value of invoking getPropertyValue() with property as argument. // 3. Let value be the return value of invoking getPropertyValue() with property as argument.
// FIXME: The trip through string_from_property_id() here is silly. auto value = get_property_value(property_name);
auto value = get_property_value(string_from_property_id(property_id));
// 4. Let removed be false. // 4. Let removed be false.
bool removed = false; bool removed = false;
@ -180,7 +183,11 @@ WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(P
// 2. Remove that CSS declaration and let removed be true. // 2. Remove that CSS declaration and let removed be true.
// 6. Otherwise, if property is a case-sensitive match for a property name of a CSS declaration in the declarations, remove that CSS declaration and let removed be true. // 6. Otherwise, if property is a case-sensitive match for a property name of a CSS declaration in the declarations, remove that CSS declaration and let removed be true.
removed = m_properties.remove_first_matching([&](auto& entry) { return entry.property_id == property_id; }); if (property_id == PropertyID::Custom) {
removed = m_custom_properties.remove(MUST(FlyString::from_utf8(property_name)));
} else {
removed = m_properties.remove_first_matching([&](auto& entry) { return entry.property_id == property_id; });
}
// 7. If removed is true, Update style attribute for the CSS declaration block. // 7. If removed is true, Update style attribute for the CSS declaration block.
if (removed) if (removed)
@ -212,10 +219,16 @@ void ElementInlineCSSStyleDeclaration::update_style_attribute()
} }
// https://drafts.csswg.org/cssom/#set-a-css-declaration // https://drafts.csswg.org/cssom/#set-a-css-declaration
bool PropertyOwningCSSStyleDeclaration::set_a_css_declaration(PropertyID property_id, NonnullRefPtr<CSSStyleValue const> value, Important important) bool PropertyOwningCSSStyleDeclaration::set_a_css_declaration(PropertyID property_id, Optional<StringView> property_name, NonnullRefPtr<CSSStyleValue const> value, Important important)
{ {
// FIXME: Handle logical property groups. // FIXME: Handle logical property groups.
if (property_id == PropertyID::Custom && property_name.has_value()) {
auto fly_string_property = MUST(FlyString::from_utf8(property_name.release_value()));
m_custom_properties.set(fly_string_property, StyleProperty { .important = important, .property_id = property_id, .value = move(value), .custom_name = fly_string_property });
return true;
}
for (auto& property : m_properties) { for (auto& property : m_properties) {
if (property.property_id == property_id) { if (property.property_id == property_id) {
if (property.important == important && *property.value == *value) if (property.important == important && *property.value == *value)
@ -237,6 +250,15 @@ bool PropertyOwningCSSStyleDeclaration::set_a_css_declaration(PropertyID propert
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue
String CSSStyleDeclaration::get_property_value(StringView property_name) const String CSSStyleDeclaration::get_property_value(StringView property_name) const
{ {
// check for a custom property and return early
if (is_a_custom_property_name_string(property_name)) {
auto maybe_custom_property = custom_property(MUST(FlyString::from_utf8(property_name)));
if (maybe_custom_property.has_value()) {
return maybe_custom_property.value().value->to_string();
}
return {};
}
auto property_id = property_id_from_string(property_name); auto property_id = property_id_from_string(property_name);
if (!property_id.has_value()) if (!property_id.has_value())
return {}; return {};
@ -282,6 +304,13 @@ String CSSStyleDeclaration::get_property_value(StringView property_name) const
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertypriority // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertypriority
StringView CSSStyleDeclaration::get_property_priority(StringView property_name) const StringView CSSStyleDeclaration::get_property_priority(StringView property_name) const
{ {
if (is_a_custom_property_name_string(property_name)) {
auto maybe_property = custom_property(MUST(FlyString::from_utf8(property_name)));
if (maybe_property.has_value()) {
return maybe_property->important == Important::Yes ? "important"sv : ""sv;
}
}
auto property_id = property_id_from_string(property_name); auto property_id = property_id_from_string(property_name);
if (!property_id.has_value()) if (!property_id.has_value())
return {}; return {};
@ -293,18 +322,23 @@ StringView CSSStyleDeclaration::get_property_priority(StringView property_name)
WebIDL::ExceptionOr<void> CSSStyleDeclaration::set_property(StringView property_name, StringView css_text, StringView priority) WebIDL::ExceptionOr<void> CSSStyleDeclaration::set_property(StringView property_name, StringView css_text, StringView priority)
{ {
if (is_a_custom_property_name_string(property_name)) {
return set_property(PropertyID::Custom, property_name, css_text, priority);
}
auto property_id = property_id_from_string(property_name); auto property_id = property_id_from_string(property_name);
if (!property_id.has_value()) if (!property_id.has_value())
return {}; return {};
return set_property(property_id.value(), css_text, priority); return set_property(property_id.value(), property_name, css_text, priority);
} }
WebIDL::ExceptionOr<String> CSSStyleDeclaration::remove_property(StringView property_name) WebIDL::ExceptionOr<String> CSSStyleDeclaration::remove_property(StringView property_name)
{ {
auto property_id = property_id_from_string(property_name); auto property_id = property_id_from_string(property_name);
if (is_a_custom_property_name_string(property_name))
property_id = PropertyID::Custom;
if (!property_id.has_value()) if (!property_id.has_value())
return String {}; return String {};
return remove_property(property_id.value()); return remove_property(property_id.value(), property_name);
} }
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext

14
Libraries/LibWeb/CSS/CSSStyleDeclaration.h
View file

@ -29,9 +29,11 @@ public:
virtual String item(size_t index) const = 0; virtual String item(size_t index) const = 0;
virtual Optional<StyleProperty> property(PropertyID) const = 0; virtual Optional<StyleProperty> property(PropertyID) const = 0;
virtual Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const = 0;
virtual WebIDL::ExceptionOr<void> set_property(PropertyID, StringView css_text, StringView priority = ""sv) = 0; // property_name only needs to be passed for custom properties.
virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) = 0; virtual WebIDL::ExceptionOr<void> set_property(PropertyID, Optional<StringView> property_name, StringView css_text, StringView priority = ""sv) = 0;
virtual WebIDL::ExceptionOr<String> remove_property(PropertyID, StringView property_name) = 0;
virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority); virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority);
virtual WebIDL::ExceptionOr<String> remove_property(StringView property_name); virtual WebIDL::ExceptionOr<String> remove_property(StringView property_name);
@ -76,12 +78,12 @@ public:
virtual Optional<StyleProperty> property(PropertyID) const override; virtual Optional<StyleProperty> property(PropertyID) const override;
virtual WebIDL::ExceptionOr<void> set_property(PropertyID, StringView css_text, StringView priority) override; virtual WebIDL::ExceptionOr<void> set_property(PropertyID, Optional<StringView> property_name, StringView css_text, StringView priority) override;
virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) override; virtual WebIDL::ExceptionOr<String> remove_property(PropertyID, StringView) override;
Vector<StyleProperty> const& properties() const { return m_properties; } Vector<StyleProperty> const& properties() const { return m_properties; }
HashMap<FlyString, StyleProperty> const& custom_properties() const { return m_custom_properties; } HashMap<FlyString, StyleProperty> const& custom_properties() const { return m_custom_properties; }
Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const { return m_custom_properties.get(custom_property_name); } virtual Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const override { return m_custom_properties.get(custom_property_name); }
size_t custom_property_count() const { return m_custom_properties.size(); } size_t custom_property_count() const { return m_custom_properties.size(); }
virtual String serialized() const final override; virtual String serialized() const final override;
@ -99,7 +101,7 @@ protected:
void set_the_declarations(Vector<StyleProperty> properties, HashMap<FlyString, StyleProperty> custom_properties); void set_the_declarations(Vector<StyleProperty> properties, HashMap<FlyString, StyleProperty> custom_properties);
private: private:
bool set_a_css_declaration(PropertyID, NonnullRefPtr<CSSStyleValue const>, Important); bool set_a_css_declaration(PropertyID, Optional<StringView>, NonnullRefPtr<CSSStyleValue const>, Important);
virtual void visit_edges(Cell::Visitor&) override; virtual void visit_edges(Cell::Visitor&) override;

10
Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -601,13 +601,19 @@ Optional<StyleProperty> ResolvedCSSStyleDeclaration::property(PropertyID propert
}; };
} }
Optional<StyleProperty> ResolvedCSSStyleDeclaration::custom_property(FlyString const&) const
{
dbgln("FIXME: ResolvedCSSStyleDeclaration should support custom property");
return {};
}
static WebIDL::ExceptionOr<void> cannot_modify_computed_property_error(JS::Realm& realm) static WebIDL::ExceptionOr<void> cannot_modify_computed_property_error(JS::Realm& realm)
{ {
return WebIDL::NoModificationAllowedError::create(realm, "Cannot modify properties in result of getComputedStyle()"_string); return WebIDL::NoModificationAllowedError::create(realm, "Cannot modify properties in result of getComputedStyle()"_string);
} }
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
WebIDL::ExceptionOr<void> ResolvedCSSStyleDeclaration::set_property(PropertyID, StringView, StringView) WebIDL::ExceptionOr<void> ResolvedCSSStyleDeclaration::set_property(PropertyID, Optional<StringView>, StringView, StringView)
{ {
// 1. If the computed flag is set, then throw a NoModificationAllowedError exception. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
return cannot_modify_computed_property_error(realm()); return cannot_modify_computed_property_error(realm());
@ -626,7 +632,7 @@ static WebIDL::ExceptionOr<String> cannot_remove_computed_property_error(JS::Rea
} }
// https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty
WebIDL::ExceptionOr<String> ResolvedCSSStyleDeclaration::remove_property(PropertyID) WebIDL::ExceptionOr<String> ResolvedCSSStyleDeclaration::remove_property(PropertyID, StringView)
{ {
// 1. If the computed flag is set, then throw a NoModificationAllowedError exception. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
return cannot_remove_computed_property_error(realm()); return cannot_remove_computed_property_error(realm());

5
Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.h
View file

@ -24,9 +24,10 @@ public:
virtual String item(size_t index) const override; virtual String item(size_t index) const override;
virtual Optional<StyleProperty> property(PropertyID) const override; virtual Optional<StyleProperty> property(PropertyID) const override;
virtual WebIDL::ExceptionOr<void> set_property(PropertyID, StringView css_text, StringView priority) override; virtual Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const override;
virtual WebIDL::ExceptionOr<void> set_property(PropertyID, Optional<StringView> property_name, StringView css_text, StringView priority) override;
virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority) override; virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority) override;
virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) override; virtual WebIDL::ExceptionOr<String> remove_property(PropertyID, StringView) override;
virtual WebIDL::ExceptionOr<String> remove_property(StringView property_name) override; virtual WebIDL::ExceptionOr<String> remove_property(StringView property_name) override;
virtual String serialized() const override; virtual String serialized() const override;

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

@ -657,9 +657,9 @@ void HTMLInputElement::update_placeholder_visibility()
if (!m_placeholder_element) if (!m_placeholder_element)
return; return;
if (this->placeholder_value().has_value()) { if (this->placeholder_value().has_value()) {
MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv)); MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "block"sv));
} else { } else {
MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv)); MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "none"sv));
} }
} }
@ -962,7 +962,7 @@ void HTMLInputElement::create_color_input_shadow_tree()
border: 1px solid ButtonBorder; border: 1px solid ButtonBorder;
box-sizing: border-box; box-sizing: border-box;
)~~~"_string)); )~~~"_string));
MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, color)); MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, {}, color));
MUST(border->append_child(*m_color_well_element)); MUST(border->append_child(*m_color_well_element));
MUST(shadow_root->append_child(border)); MUST(shadow_root->append_child(border));
@ -974,7 +974,7 @@ void HTMLInputElement::update_color_well_element()
if (!m_color_well_element) if (!m_color_well_element)
return; return;
MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, m_value)); MUST(m_color_well_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, {}, m_value));
} }
void HTMLInputElement::create_file_input_shadow_tree() void HTMLInputElement::create_file_input_shadow_tree()
@ -1141,9 +1141,9 @@ void HTMLInputElement::computed_css_values_changed()
accent_color = accent_color_property.to_string(); accent_color = accent_color_property.to_string();
if (m_slider_progress_element) if (m_slider_progress_element)
MUST(m_slider_progress_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, accent_color)); MUST(m_slider_progress_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, {}, accent_color));
if (m_slider_thumb) if (m_slider_thumb)
MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, accent_color)); MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, {}, accent_color));
} }
void HTMLInputElement::user_interaction_did_change_input_value() void HTMLInputElement::user_interaction_did_change_input_value()
@ -1171,10 +1171,10 @@ void HTMLInputElement::update_slider_shadow_tree_elements()
double position = (value - minimum) / (maximum - minimum) * 100; double position = (value - minimum) / (maximum - minimum) * 100;
if (m_slider_progress_element) if (m_slider_progress_element)
MUST(m_slider_progress_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position)))); MUST(m_slider_progress_element->style_for_bindings()->set_property(CSS::PropertyID::Width, {}, MUST(String::formatted("{}%", position))));
if (m_slider_thumb) if (m_slider_thumb)
MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::MarginLeft, MUST(String::formatted("{}%", position)))); MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::MarginLeft, {}, MUST(String::formatted("{}%", position))));
} }
void HTMLInputElement::did_receive_focus() void HTMLInputElement::did_receive_focus()

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

@ -240,6 +240,6 @@ void HTMLMeterElement::update_meter_value_element()
} }
double position = (value - min) / (max - min) * 100; double position = (value - min) / (max - min) * 100;
MUST(m_meter_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position)))); MUST(m_meter_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, {}, MUST(String::formatted("{}%", position))));
} }
} }

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

@ -127,7 +127,7 @@ void HTMLProgressElement::create_shadow_tree_if_needed()
void HTMLProgressElement::update_progress_value_element() void HTMLProgressElement::update_progress_value_element()
{ {
if (m_progress_value_element) if (m_progress_value_element)
MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position() * 100)))); MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, {}, MUST(String::formatted("{}%", position() * 100))));
} }
void HTMLProgressElement::computed_css_values_changed() void HTMLProgressElement::computed_css_values_changed()
@ -140,7 +140,7 @@ void HTMLProgressElement::computed_css_values_changed()
accent_color = accent_color_property.to_string(); accent_color = accent_color_property.to_string();
if (m_progress_value_element) if (m_progress_value_element)
MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, accent_color)); MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, {}, accent_color));
} }
} }

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

@ -508,9 +508,9 @@ void HTMLSelectElement::computed_css_values_changed()
if (m_chevron_icon_element) { if (m_chevron_icon_element) {
auto appearance = computed_css_values()->appearance(); auto appearance = computed_css_values()->appearance();
if (appearance.has_value() && *appearance == CSS::Appearance::None) { if (appearance.has_value() && *appearance == CSS::Appearance::None) {
MUST(m_chevron_icon_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"_string)); MUST(m_chevron_icon_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "none"_string));
} else { } else {
MUST(m_chevron_icon_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"_string)); MUST(m_chevron_icon_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "block"_string));
} }
} }
} }

8
Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp
View file

@ -415,11 +415,11 @@ void HTMLTextAreaElement::update_placeholder_visibility()
return; return;
auto placeholder_text = get_attribute(AttributeNames::placeholder); auto placeholder_text = get_attribute(AttributeNames::placeholder);
if (placeholder_text.has_value() && m_text_node->data().is_empty()) { if (placeholder_text.has_value() && m_text_node->data().is_empty()) {
MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv)); MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "block"sv));
MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv)); MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "none"sv));
} else { } else {
MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"sv)); MUST(m_placeholder_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "none"sv));
MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"sv)); MUST(m_inner_text_element->style_for_bindings()->set_property(CSS::PropertyID::Display, {}, "block"sv));
} }
} }

3
Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-custom-properties.txt Normal file
View file

@ -0,0 +1,3 @@
--foo= bar
--foo= baz important
--foo= blank

19
Tests/LibWeb/Text/input/css/CSSStyleDeclaration-custom-properties.html Normal file
View file

@ -0,0 +1,19 @@
<script src="../include.js"></script>
<div id="foo"></div>
<script>
test(() => {
const div = document.getElementById("foo");
// set property
div.style.setProperty("--foo", "bar");
println(`--foo= ${div.style.getPropertyValue("--foo")}`);
// set property with priority
div.style.setProperty("--foo", "baz", "important");
println(`--foo= ${div.style.getPropertyValue("--foo")} ${div.style.getPropertyPriority("--foo")}`);
// remove property
div.style.removeProperty("--foo");
println(`--foo= blank${div.style.getPropertyValue("--foo")}`);
})
</script>