LibWeb: Avoid updating muted state on muted content attribute changes

The `muted` content attribute should only affect the state of the
`muted` IDL property when the media element is first created. The
attribute should have no dynamic effect.
This commit is contained in:
Tim Ledbetter 2025-06-26 10:28:17 +01:00 committed by Shannon Booth
parent ed6f2f9b81
commit 8828e0d791
Notes: github-actions[bot] 2025-06-26 21:16:18 +00:00
4 changed files with 44 additions and 2 deletions

View file

@ -107,8 +107,6 @@ void HTMLMediaElement::attribute_changed(FlyString const& name, Optional<String>
load_element().release_value_but_fixme_should_propagate_errors(); load_element().release_value_but_fixme_should_propagate_errors();
} else if (name == HTML::AttributeNames::crossorigin) { } else if (name == HTML::AttributeNames::crossorigin) {
m_crossorigin = cors_setting_attribute_from_keyword(value); m_crossorigin = cors_setting_attribute_from_keyword(value);
} else if (name == HTML::AttributeNames::muted) {
set_muted(true);
} }
} }

View file

@ -832,6 +832,17 @@ GC::Ref<DOM::Element> HTMLParser::create_element_for(HTMLToken const& token, Opt
return IterationDecision::Continue; return IterationDecision::Continue;
}); });
// AD-HOC: The muted attribute on media elements is only set if the muted content attribute is present when the element is first created.
if (element->is_html_media_element() && namespace_ == Namespace::HTML) {
// https://html.spec.whatwg.org/multipage/media.html#user-interface:attr-media-muted
// When a media element is created, if the element has a muted content attribute specified, then the muted IDL
// attribute should be set to true; otherwise, the user agents may set the value to the user's preferred value.
if (element->has_attribute(HTML::AttributeNames::muted)) {
auto& media_element = as<HTMLMediaElement>(*element);
media_element.set_muted(true);
}
}
// 11. If willExecuteScript is true: // 11. If willExecuteScript is true:
if (will_execute_script) { if (will_execute_script) {
// 1. Let queue be the result of popping from document's relevant agent's custom element reactions stack. (This will be the same element queue as was pushed above.) // 1. Let queue be the result of popping from document's relevant agent's custom element reactions stack. (This will be the same element queue as was pushed above.)

View file

@ -0,0 +1,5 @@
Initial muted state when muted content attribute is present: true
Changing the muted attribute after object creation changes the muted state: false
Re-inserting the video element into the document changes the muted state: false
Re-inserting non-default muted video element into the document changes the muted state: false
Muted state of a script-created video element after adding the muted content attribute false

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<video id="defaultMuted" muted=""></video>
<video id="notDefaultMuted"></video>
<script src="../include.js"></script>
<script>
test(() => {
const defaultMutedVideoElement = document.getElementById("defaultMuted");
println("Initial muted state when muted content attribute is present: " + defaultMutedVideoElement.muted);
defaultMutedVideoElement.muted = false;
defaultMutedVideoElement.removeAttribute("muted");
defaultMutedVideoElement.setAttribute("muted", "");
println(`Changing the muted attribute after object creation changes the muted state: ${defaultMutedVideoElement.muted}`);
defaultMutedVideoElement.remove();
document.body.appendChild(defaultMutedVideoElement)
println(`Re-inserting the video element into the document changes the muted state: ${defaultMutedVideoElement.muted}`);
const notDefaultMutedVideoElement = document.getElementById("notDefaultMuted");
notDefaultMutedVideoElement.setAttribute("muted", "");
notDefaultMutedVideoElement.remove();
document.body.appendChild(notDefaultMutedVideoElement);
println(`Re-inserting non-default muted video element into the document changes the muted state: ${notDefaultMutedVideoElement.muted}`);
const scriptCreatedVideoElement = document.createElement("video");
scriptCreatedVideoElement.setAttribute("muted", "");
document.body.appendChild(scriptCreatedVideoElement);
println(`Muted state of a script-created video element after adding the muted content attribute ${scriptCreatedVideoElement.muted}`);
});
</script>