mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-24 13:35:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Invalidate style when media content attribute changes

Browse source 
Previously, we would only invalidate style when setting the `media` IDL
attribute; changing the attribute via `setAttribute()` and
`removeAttribute()` had no immediate effect.
This commit is contained in:
Tim Ledbetter 2025-03-22 11:33:59 +00:00
parent c49dd2036b
commit c5fc025350
5 changed files with 62 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
Libraries/LibWeb/HTML/HTMLStyleElement.cpp
View file

@ -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<String> const& old_value, Optional<String> const& value, Optional<FlyString> 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()
{

4
Libraries/LibWeb/HTML/HTMLStyleElement.h
View file

@ -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<String> const& old_value, Optional<String> const& value, Optional<FlyString> 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;

2
Libraries/LibWeb/HTML/HTMLStyleElement.idl
View file

@ -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

7
Tests/LibWeb/Text/expected/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.txt Normal file
View file

@ -0,0 +1,7 @@
Harness status: OK
Found 2 tests
2 Pass
Pass change media value dynamically
Pass removing media attribute

43
Tests/LibWeb/Text/input/wpt-import/html/semantics/document-metadata/the-style-element/style_media_change.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamically changing HTMLStyleElement.media should change the rendering accordingly</title>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
<style>
span {
color: red;
}
</style>
<style id="text-style" media="none">
span {
color: green;
}
</style>
<style id="body-style" media="aural">
body {
color: green;
}
</style>
</head>
<body>
<span>text</span>
<script>
test(function() {
var element = document.querySelector("span");
assert_equals(getComputedStyle(element).color, "rgb(255, 0, 0)");
document.getElementById("text-style").media = 'all';
assert_equals(getComputedStyle(element).color, "rgb(0, 128, 0)");
}, "change media value dynamically");
test(function() {
var style = document.getElementById("body-style");
assert_not_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
style.removeAttribute("media");
assert_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
}, "removing media attribute");
</script>
</body>
</html>