Skip to content

Commit

Permalink
fix: expand boolean attribute support (#15095)
Browse files Browse the repository at this point in the history
* 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`: jsdom/jsdom#1564
 - `nomodule`: jsdom/jsdom#2475
 - `autofocus`: jsdom/jsdom#3041
 - `inert`: jsdom/jsdom#3605
 - etc...: jestjs/jest#139 (comment)

* Adding changeset
  • Loading branch information
Rican7 authored Jan 23, 2025
1 parent d17f5c7 commit d47f4f5
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/strange-hairs-trade.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: expand boolean attribute support
16 changes: 13 additions & 3 deletions packages/svelte/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,10 @@ const DOM_BOOLEAN_ATTRIBUTES = [
'reversed',
'seamless',
'selected',
'webkitdirectory'
'webkitdirectory',
'defer',
'disablepictureinpicture',
'disableremoteplayback'
];

/**
Expand All @@ -197,7 +200,10 @@ const ATTRIBUTE_ALIASES = {
defaultvalue: 'defaultValue',
defaultchecked: 'defaultChecked',
srcobject: 'srcObject',
novalidate: 'noValidate'
novalidate: 'noValidate',
allowfullscreen: 'allowFullscreen',
disablepictureinpicture: 'disablePictureInPicture',
disableremoteplayback: 'disableRemotePlayback'
};

/**
Expand All @@ -219,7 +225,11 @@ const DOM_PROPERTIES = [
'volume',
'defaultValue',
'defaultChecked',
'srcObject'
'srcObject',
'noValidate',
'allowFullscreen',
'disablePictureInPicture',
'disableRemotePlayback'
];

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
`
});
Original file line number Diff line number Diff line change
@@ -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}

0 comments on commit d47f4f5

Please sign in to comment.