From 17cb462ca459aff79c831707c4d59e08770b5eb9 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 23 Oct 2024 17:35:26 +0100 Subject: [PATCH] fix: ensure muted DOM property works correctly in FF (#13751) Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- .changeset/wise-timers-look.md | 5 +++++ .../compiler/phases/2-analyze/visitors/RegularElement.js | 4 +++- .../phases/3-transform/client/visitors/RegularElement.js | 7 +++++++ .../phases/3-transform/client/visitors/shared/fragment.js | 2 +- .../expected.html | 4 ++-- 5 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 .changeset/wise-timers-look.md diff --git a/.changeset/wise-timers-look.md b/.changeset/wise-timers-look.md new file mode 100644 index 0000000000..0c98059220 --- /dev/null +++ b/.changeset/wise-timers-look.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure muted DOM property works correctly in FF diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js index dd8a594e61..98bb1ca92a 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js @@ -77,7 +77,9 @@ export function RegularElement(node, context) { if ( node.attributes.some( - (attribute) => attribute.type === 'Attribute' && attribute.name === 'autofocus' + (attribute) => + attribute.type === 'Attribute' && + (attribute.name === 'autofocus' || attribute.name === 'muted') ) ) { mark_subtree_dynamic(context.path); diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js index 5484c37cb7..86707b1a23 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js @@ -264,6 +264,7 @@ export function RegularElement(node, context) { if ( !is_custom_element && attribute.name !== 'autofocus' && + attribute.name !== 'muted' && (attribute.value === true || is_text_attribute(attribute)) ) { const name = get_attribute_name(node, attribute); @@ -531,6 +532,12 @@ function build_element_attribute_update_assignment(element, node_id, attribute, return false; } + // Special case for Firefox who needs it set as a property in order to work + if (name === 'muted') { + state.init.push(b.stmt(b.assignment('=', b.member(node_id, b.id('muted')), value))); + return false; + } + /** @type {Statement} */ let update; diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js index 4de1a11a97..022b8574d9 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js @@ -142,7 +142,7 @@ function is_static_element(node) { return false; } - if (attribute.name === 'autofocus') { + if (attribute.name === 'autofocus' || attribute.name === 'muted') { return false; } diff --git a/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html b/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html index f585d6bcdd..ddbe5169b7 100644 --- a/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html +++ b/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html @@ -1,2 +1,2 @@ -
-
+
+