diff --git a/Libraries/LibWeb/HTML/HTMLStyleElement.cpp b/Libraries/LibWeb/HTML/HTMLStyleElement.cpp
index 7a33feb92fe..5f4de6dcf93 100644
--- a/Libraries/LibWeb/HTML/HTMLStyleElement.cpp
+++ b/Libraries/LibWeb/HTML/HTMLStyleElement.cpp
@@ -52,6 +52,16 @@ void HTMLStyleElement::removed_from(Node* old_parent, Node& old_root)
Base::removed_from(old_parent, old_root);
}
+void HTMLStyleElement::attribute_changed(FlyString const& name, Optional const& old_value, Optional const& value, Optional const& namespace_)
+{
+ Base::attribute_changed(name, old_value, value, namespace_);
+
+ if (name == HTML::AttributeNames::media) {
+ if (auto* sheet = m_style_element_utils.sheet())
+ sheet->set_media(value.value_or({}));
+ }
+}
+
// https://html.spec.whatwg.org/multipage/semantics.html#dom-style-disabled
bool HTMLStyleElement::disabled()
{
@@ -79,18 +89,6 @@ void HTMLStyleElement::set_disabled(bool disabled)
sheet()->set_disabled(disabled);
}
-String HTMLStyleElement::media() const
-{
- return attribute(HTML::AttributeNames::media).value_or(String {});
-}
-
-void HTMLStyleElement::set_media(String media)
-{
- (void)set_attribute(HTML::AttributeNames::media, media);
- if (auto sheet = m_style_element_utils.sheet())
- sheet->set_media(media);
-}
-
// https://www.w3.org/TR/cssom/#dom-linkstyle-sheet
CSS::CSSStyleSheet* HTMLStyleElement::sheet()
{
diff --git a/Libraries/LibWeb/HTML/HTMLStyleElement.h b/Libraries/LibWeb/HTML/HTMLStyleElement.h
index ab159ca83a7..7c5d0bdc616 100644
--- a/Libraries/LibWeb/HTML/HTMLStyleElement.h
+++ b/Libraries/LibWeb/HTML/HTMLStyleElement.h
@@ -22,13 +22,11 @@ public:
virtual void children_changed(ChildrenChangedMetadata const*) override;
virtual void inserted() override;
virtual void removed_from(Node* old_parent, Node& old_root) override;
+ virtual void attribute_changed(FlyString const& name, Optional const& old_value, Optional const& value, Optional const& namespace_) override;
bool disabled();
void set_disabled(bool disabled);
- [[nodiscard]] String media() const;
- void set_media(String);
-
CSS::CSSStyleSheet* sheet();
CSS::CSSStyleSheet const* sheet() const;
diff --git a/Libraries/LibWeb/HTML/HTMLStyleElement.idl b/Libraries/LibWeb/HTML/HTMLStyleElement.idl
index 9ffe4fd69ac..367718b4c2c 100644
--- a/Libraries/LibWeb/HTML/HTMLStyleElement.idl
+++ b/Libraries/LibWeb/HTML/HTMLStyleElement.idl
@@ -8,7 +8,7 @@ interface HTMLStyleElement : HTMLElement {
[HTMLConstructor] constructor();
attribute boolean disabled;
- [CEReactions] attribute DOMString media;
+ [CEReactions, Reflect] attribute DOMString media;
[FIXME, SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
// Obsolete
diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.txt b/Tests/LibWeb/Text/expected/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.txt
new file mode 100644
index 00000000000..d8454b2465f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.txt
@@ -0,0 +1,7 @@
+Harness status: OK
+
+Found 2 tests
+
+2 Pass
+Pass change media value dynamically
+Pass removing media attribute
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.html b/Tests/LibWeb/Text/input/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.html
new file mode 100644
index 00000000000..16889e398c8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.html
@@ -0,0 +1,43 @@
+
+
+
+
+ Dynamically changing HTMLStyleElement.media should change the rendering accordingly
+
+
+
+
+
+
+
+
+ text
+
+
+
\ No newline at end of file