diff --git a/tests/TestAttributes.svelte b/tests/AttributeCase.svelte
similarity index 51%
rename from tests/TestAttributes.svelte
rename to tests/AttributeCase.svelte
index d723561..6340cad 100644
--- a/tests/TestAttributes.svelte
+++ b/tests/AttributeCase.svelte
@@ -5,14 +5,14 @@
{#if lowercase}
-
lowercase: {lowercase}
+ lowercase: {lowercase}
{/if}
{#if camelCase}
- camelCase: {camelCase}
+ camelCase: {camelCase}
{/if}
{#if UPPERCASE}
- UPPERCASE: {UPPERCASE}
+ UPPERCASE: {UPPERCASE}
{/if}
diff --git a/tests/AttributeCase.test.js b/tests/AttributeCase.test.js
new file mode 100644
index 0000000..9518419
--- /dev/null
+++ b/tests/AttributeCase.test.js
@@ -0,0 +1,80 @@
+import { describe, beforeAll, afterAll, afterEach, test, expect, vi } from 'vitest';
+import AttributeCase from './AttributeCase.svelte';
+import svelteRetag from '../index.js';
+import { syncRaf } from './test-utils.js';
+
+let el = null;
+
+describe('Case: Test custom element attribute name case sensitivity', () => {
+ beforeAll(() => {
+ svelteRetag({ component: AttributeCase, tagname: 'attrib-case', shadow: false });
+
+ vi.spyOn(window, 'requestAnimationFrame').mockImplementation(syncRaf);
+ });
+
+ afterEach(() => {
+ if (el) {
+ el.remove();
+ }
+ });
+
+ afterAll(() => {
+ window.requestAnimationFrame.mockRestore();
+ });
+
+ test('all: lowercase attributes', () => {
+
+ el = document.createElement('div');
+ el.innerHTML = '';
+ document.body.appendChild(el);
+
+ expect(el.querySelector('.lower').innerHTML).toBe('SET');
+ expect(el.querySelector('.camel').innerHTML).toBe('SET');
+ expect(el.querySelector('.upper').innerHTML).toBe('SET');
+ });
+
+ test('all: uppercase attributes', () => {
+
+ el = document.createElement('div');
+ el.innerHTML = '';
+ document.body.appendChild(el);
+
+ expect(el.querySelector('.lower').innerHTML).toBe('SET');
+ expect(el.querySelector('.camel').innerHTML).toBe('SET');
+ expect(el.querySelector('.upper').innerHTML).toBe('SET');
+ });
+
+ test('all: mixed case attributes', () => {
+
+ el = document.createElement('div');
+ el.innerHTML = '';
+ document.body.appendChild(el);
+
+ expect(el.querySelector('.lower').innerHTML).toBe('SET');
+ expect(el.querySelector('.camel').innerHTML).toBe('SET');
+ expect(el.querySelector('.upper').innerHTML).toBe('SET');
+ });
+
+ test('explicitly empty', () => {
+
+ el = document.createElement('div');
+ el.innerHTML = '';
+ document.body.appendChild(el);
+
+ expect(el.querySelector('.lower')).toBe(null);
+ expect(el.querySelector('.camel')).toBe(null);
+ expect(el.querySelector('.upper')).toBe(null);
+ });
+
+ test('implicitly empty', () => {
+
+ el = document.createElement('div');
+ el.innerHTML = '';
+ document.body.appendChild(el);
+
+ expect(el.querySelector('.lower').innerHTML).toBe('default');
+ expect(el.querySelector('.camel').innerHTML).toBe('default');
+ expect(el.querySelector('.upper').innerHTML).toBe('default');
+ });
+
+});
diff --git a/tests/TestAttributes.test.js b/tests/TestAttributes.test.js
deleted file mode 100644
index 427cbed..0000000
--- a/tests/TestAttributes.test.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import { describe, beforeAll, afterAll, afterEach, test, expect, vi } from 'vitest';
-import TestAttributes from './TestAttributes.svelte';
-import svelteRetag from '../index.js';
-import { normalizeWhitespace, syncRaf } from './test-utils.js';
-
-let el = null;
-
-describe('Test custom element attributes', () => {
- beforeAll(() => {
- svelteRetag({ component: TestAttributes, tagname: 'test-attribs', shadow: false });
-
- vi.spyOn(window, 'requestAnimationFrame').mockImplementation(syncRaf);
- });
-
- afterEach(() => {
- if (el) {
- el.remove();
- }
- });
-
- afterAll(() => {
- window.requestAnimationFrame.mockRestore();
- });
-
- let allSetOutput = `
-
-
- lowercase: SET
- camelCase: SET
- UPPERCASE: SET
-
-
-
- `;
-
- test('all: lowercase attributes', () => {
-
- el = document.createElement('div');
- el.innerHTML = '';
- document.body.appendChild(el);
-
- expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput));
- });
-
- test('all: uppercase attributes', () => {
-
- el = document.createElement('div');
- el.innerHTML = '';
- document.body.appendChild(el);
-
- expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput));
- });
-
- test('all: mixed case attributes', () => {
-
- el = document.createElement('div');
- el.innerHTML = '';
- document.body.appendChild(el);
-
- expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(allSetOutput));
- });
-
- test('explicitly empty', () => {
-
- el = document.createElement('div');
- el.innerHTML = '';
- document.body.appendChild(el);
-
- let expectedOutput = `
-
-
-
-
-
- `;
-
- expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(expectedOutput));
- });
-
- test('implicitly empty', () => {
-
- el = document.createElement('div');
- el.innerHTML = '';
- document.body.appendChild(el);
-
- let expectedOutput = `
-
-
- lowercase: default
- camelCase: default
- UPPERCASE: default
-
-
-
- `;
-
- expect(normalizeWhitespace(el.innerHTML)).toBe(normalizeWhitespace(expectedOutput));
- });
-
-});