From d47f4f59084a26d8b47d864e961ddf76336a0ed8 Mon Sep 17 00:00:00 2001
From: "Trevor N. Suarez" <Rican7@gmail.com>
Date: Thu, 23 Jan 2025 00:55:12 -0700
Subject: [PATCH] fix: expand boolean attribute support (#15095)

* Adding test for expected boolean attribute support

* Improving support for more boolean attributes:

Added:
 - `defer`
 - `disablepictureinpicture`
 - `disableremoteplayback`

Improved:
 - `allowfullscreen`
 - `novalidate`

* Skipping JSDOM version of boolean attribute test

JSDOM lacks support for some attributes, so we'll skip it for now.

See:
 - `async`: https://github.com/jsdom/jsdom/issues/1564
 - `nomodule`: https://github.com/jsdom/jsdom/issues/2475
 - `autofocus`: https://github.com/jsdom/jsdom/issues/3041
 - `inert`: https://github.com/jsdom/jsdom/issues/3605
 - etc...: https://github.com/jestjs/jest/issues/139#issuecomment-592673550

* Adding changeset
---
 .changeset/strange-hairs-trade.md             |  5 ++
 packages/svelte/src/utils.js                  | 16 ++++-
 .../_config.js                                | 60 +++++++++++++++++++
 .../main.svelte                               | 22 +++++++
 4 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/strange-hairs-trade.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte

diff --git a/.changeset/strange-hairs-trade.md b/.changeset/strange-hairs-trade.md
new file mode 100644
index 0000000000..192e5ef3d1
--- /dev/null
+++ b/.changeset/strange-hairs-trade.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: expand boolean attribute support
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index b16c0551f1..e8e1bc224c 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -170,7 +170,10 @@ const DOM_BOOLEAN_ATTRIBUTES = [
 	'reversed',
 	'seamless',
 	'selected',
-	'webkitdirectory'
+	'webkitdirectory',
+	'defer',
+	'disablepictureinpicture',
+	'disableremoteplayback'
 ];
 
 /**
@@ -197,7 +200,10 @@ const ATTRIBUTE_ALIASES = {
 	defaultvalue: 'defaultValue',
 	defaultchecked: 'defaultChecked',
 	srcobject: 'srcObject',
-	novalidate: 'noValidate'
+	novalidate: 'noValidate',
+	allowfullscreen: 'allowFullscreen',
+	disablepictureinpicture: 'disablePictureInPicture',
+	disableremoteplayback: 'disableRemotePlayback'
 };
 
 /**
@@ -219,7 +225,11 @@ const DOM_PROPERTIES = [
 	'volume',
 	'defaultValue',
 	'defaultChecked',
-	'srcObject'
+	'srcObject',
+	'noValidate',
+	'allowFullscreen',
+	'disablePictureInPicture',
+	'disableRemotePlayback'
 ];
 
 /**
diff --git a/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js
new file mode 100644
index 0000000000..d0b8a421b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js
@@ -0,0 +1,60 @@
+import { test } from '../../test';
+
+export default test({
+	// JSDOM lacks support for some of these attributes, so we'll skip it for now.
+	//
+	// See:
+	//  - `async`: https://github.com/jsdom/jsdom/issues/1564
+	//  - `nomodule`: https://github.com/jsdom/jsdom/issues/2475
+	//  - `autofocus`: https://github.com/jsdom/jsdom/issues/3041
+	//  - `inert`: https://github.com/jsdom/jsdom/issues/3605
+	//  - etc...: https://github.com/jestjs/jest/issues/139#issuecomment-592673550
+	skip_mode: ['client'],
+
+	html: `
+	<script nomodule async defer></script>
+	<form novalidate></form>
+	<input readonly required checked webkitdirectory>
+	<select multiple disabled></select>
+	<button formnovalidate></button>
+	<img ismap>
+	<video autoplay controls loop muted playsinline disablepictureinpicture disableremoteplayback></video>
+	<audio disableremoteplayback></audio>
+	<track default>
+	<iframe allowfullscreen></iframe>
+	<details open></details>
+	<ol reversed></ol>
+	<div autofocus></div>
+	<span inert></span>
+
+	<script nomodule async defer></script>
+	<form novalidate></form>
+	<input readonly required checked webkitdirectory>
+	<select multiple disabled></select>
+	<button formnovalidate></button>
+	<img ismap>
+	<video autoplay controls loop muted playsinline disablepictureinpicture disableremoteplayback></video>
+	<audio disableremoteplayback></audio>
+	<track default>
+	<iframe allowfullscreen></iframe>
+	<details open></details>
+	<ol reversed></ol>
+	<div autofocus></div>
+	<span inert></span>
+
+	<script></script>
+	<form></form>
+	<input>
+	<select></select>
+	<button></button>
+	<img>
+	<video></video>
+	<audio></audio>
+	<track>
+	<iframe></iframe>
+	<details></details>
+	<ol></ol>
+	<div></div>
+	<span></span>
+`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte
new file mode 100644
index 0000000000..e9e5a16168
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let runesMode = $state('using a rune so that we trigger runes mode');
+
+	const attributeValues = [true, 'test', false];
+</script>
+
+{#each attributeValues as val}
+	<script NOMODULE={val} ASYNC={val} DEFER={val}></script>
+	<form NOVALIDATE={val}></form>
+	<input READONLY={val} REQUIRED={val} CHECKED={val} WEBKITDIRECTORY={val} />
+	<select MULTIPLE={val} DISABLED={val}></select>
+	<button FORMNOVALIDATE={val}></button>
+	<img ISMAP={val} />
+	<video AUTOPLAY={val} CONTROLS={val} LOOP={val} MUTED={val} PLAYSINLINE={val} DISABLEPICTUREINPICTURE={val} DISABLEREMOTEPLAYBACK={val}></video>
+	<audio DISABLEREMOTEPLAYBACK={val}></audio>
+	<track DEFAULT={val} />
+	<iframe ALLOWFULLSCREEN={val}></iframe>
+	<details OPEN={val}></details>
+	<ol REVERSED={val}></ol>
+	<div AUTOFOCUS={val}></div>
+	<span INERT={val}></span>
+{/each}