@remote-dom/polyfill 1.5.1 → 1.6.0

package/source/tests/name-and-namespace-normalization.test.ts

@@ -0,0 +1,319 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+import {Attr} from '../Attr.ts';
+import {HOOKS, HTML_NAMESPACE, SVG_NAMESPACE} from '../constants.ts';
+import {Window} from '../index.ts';
+
+let window: Window;
+let document: Window['document'];
+
+beforeEach(() => {
+  window = new Window();
+  Window.setGlobalThis(window);
+  document = window.document;
+});
+
+describe('DOM name and namespace normalization', () => {
+  it('uses the standard node names for non-element nodes', () => {
+    expect(document.nodeName).toBe('#document');
+    expect(document.createDocumentFragment().nodeName).toBe(
+      '#document-fragment',
+    );
+    expect(document.createTextNode('text').nodeName).toBe('#text');
+    expect(document.createComment('comment').nodeName).toBe('#comment');
+    expect(new Attr('data-state', 'ready').nodeName).toBe('data-state');
+  });
+
+  it('normalizes HTML element names while preserving SVG element names', () => {
+    const htmlElement = document.createElement('linearGradient');
+    const svgElement = document.createElementNS(
+      SVG_NAMESPACE,
+      'linearGradient',
+    );
+
+    expect(htmlElement.localName).toBe('lineargradient');
+    expect(htmlElement.nodeName).toBe('LINEARGRADIENT');
+    expect(htmlElement.tagName).toBe('LINEARGRADIENT');
+    expect(htmlElement.namespaceURI).toBe(HTML_NAMESPACE);
+
+    expect(svgElement.localName).toBe('linearGradient');
+    expect(svgElement.nodeName).toBe('linearGradient');
+    expect(svgElement.tagName).toBe('linearGradient');
+    expect(svgElement.namespaceURI).toBe(SVG_NAMESPACE);
+  });
+
+  it('uses normalized createElement names for custom-element lookup and storage', () => {
+    class CustomElement extends window.HTMLElement {}
+
+    window.customElements.define(
+      'x-example',
+      CustomElement as unknown as CustomElementConstructor,
+    );
+
+    const htmlElement = document.createElement('X-EXAMPLE');
+    const lowerNamespacedElement = document.createElementNS(
+      HTML_NAMESPACE,
+      'x-example',
+    );
+    const upperNamespacedElement = document.createElementNS(
+      HTML_NAMESPACE,
+      'X-EXAMPLE',
+    );
+
+    expect(htmlElement).toBeInstanceOf(CustomElement);
+    expect(htmlElement.localName).toBe('x-example');
+    expect(htmlElement.nodeName).toBe('X-EXAMPLE');
+
+    expect(lowerNamespacedElement).toBeInstanceOf(CustomElement);
+    expect(lowerNamespacedElement.localName).toBe('x-example');
+
+    expect(upperNamespacedElement).not.toBeInstanceOf(CustomElement);
+    expect(upperNamespacedElement.localName).toBe('X-EXAMPLE');
+  });
+
+  it('folds HTML attribute names for storage, lookup, hooks, and reactions', () => {
+    const setAttribute = vi.fn();
+    const removeAttribute = vi.fn();
+    const attributeChangedCallback = vi.fn();
+
+    class CustomElement extends window.HTMLElement {
+      static observedAttributes = ['data-state'];
+
+      attributeChangedCallback(
+        name: string,
+        oldValue: string | null,
+        newValue: string | null,
+        namespace: string | null,
+      ) {
+        attributeChangedCallback(name, oldValue, newValue, namespace);
+      }
+    }
+
+    window.customElements.define(
+      'attribute-example',
+      CustomElement as unknown as CustomElementConstructor,
+    );
+    window[HOOKS].setAttribute = setAttribute;
+    window[HOOKS].removeAttribute = removeAttribute;
+
+    const element = document.createElement('ATTRIBUTE-EXAMPLE');
+    element.setAttribute('DATA-STATE', 'ready');
+    const attribute = element.attributes.item(0)!;
+
+    expect(attribute.name).toBe('data-state');
+    expect(attribute.localName).toBe('data-state');
+    expect(element.getAttributeNames()).toEqual(['data-state']);
+    expect(element.getAttribute('DATA-STATE')).toBe('ready');
+    expect(element.hasAttribute('Data-State')).toBe(true);
+    expect(element.attributes.getNamedItem('DATA-STATE')).toBe(attribute);
+    expect(setAttribute).toHaveBeenCalledWith(
+      element,
+      'data-state',
+      'ready',
+      null,
+    );
+    expect(attributeChangedCallback).toHaveBeenCalledWith(
+      'data-state',
+      null,
+      'ready',
+      null,
+    );
+
+    element.removeAttribute('DATA-STATE');
+
+    expect(element.hasAttribute('data-state')).toBe(false);
+    expect(removeAttribute).toHaveBeenCalledWith(element, 'data-state', null);
+    expect(attributeChangedCallback).toHaveBeenLastCalledWith(
+      'data-state',
+      'ready',
+      null,
+      null,
+    );
+  });
+
+  it('preserves unnamespaced SVG attribute casing', () => {
+    const setAttribute = vi.fn();
+    window[HOOKS].setAttribute = setAttribute;
+    const element = document.createElementNS(SVG_NAMESPACE, 'svg');
+
+    element.setAttribute('viewBox', '0 0 10 10');
+
+    expect(element.getAttributeNames()).toEqual(['viewBox']);
+    expect(element.getAttribute('viewBox')).toBe('0 0 10 10');
+    expect(element.getAttribute('viewbox')).toBeNull();
+    expect(element.attributes.getNamedItem('viewBox')?.name).toBe('viewBox');
+    expect(setAttribute).toHaveBeenCalledWith(
+      element,
+      'viewBox',
+      '0 0 10 10',
+      null,
+    );
+  });
+
+  it('does not fold names passed to the namespace-aware attribute APIs', () => {
+    const setAttribute = vi.fn();
+    window[HOOKS].setAttribute = setAttribute;
+    const element = document.createElement('div');
+
+    element.setAttributeNS(SVG_NAMESPACE, 'svg:ViewBox', 'value');
+    const attribute = element.attributes.item(0)!;
+
+    expect(attribute.name).toBe('svg:ViewBox');
+    expect(attribute.localName).toBe('ViewBox');
+    expect(attribute.prefix).toBe('svg');
+    expect(element.getAttributeNS(SVG_NAMESPACE, 'ViewBox')).toBe('value');
+    expect(element.getAttributeNS(SVG_NAMESPACE, 'viewbox')).toBeNull();
+    expect(setAttribute).toHaveBeenCalledWith(
+      element,
+      'svg:ViewBox',
+      'value',
+      SVG_NAMESPACE,
+    );
+  });
+
+  it('matches namespaced attributes by namespace and local name', () => {
+    const removeAttribute = vi.fn();
+    window[HOOKS].removeAttribute = removeAttribute;
+    const element = document.createElementNS(SVG_NAMESPACE, 'svg');
+
+    element.setAttributeNS(HTML_NAMESPACE, 'first:state', 'initial');
+    const attribute = element.attributes.item(0)!;
+    element.setAttributeNS(HTML_NAMESPACE, 'second:state', 'updated');
+    element.setAttributeNS(SVG_NAMESPACE, 'svg:state', 'svg');
+
+    expect(element.attributes.length).toBe(2);
+    expect(attribute.ownerElement).toBe(element);
+    expect(attribute.name).toBe('first:state');
+    expect(element.getAttribute('first:state')).toBe('updated');
+    expect(element.getAttribute('second:state')).toBeNull();
+    expect(element.getAttributeNS(HTML_NAMESPACE, 'state')).toBe('updated');
+    expect(element.getAttributeNS(SVG_NAMESPACE, 'state')).toBe('svg');
+    expect(
+      element.attributes.getNamedItemNS(HTML_NAMESPACE, 'state')?.name,
+    ).toBe('first:state');
+
+    element.removeAttributeNS(HTML_NAMESPACE, 'state');
+
+    expect(element.getAttributeNS(HTML_NAMESPACE, 'state')).toBeNull();
+    expect(element.getAttributeNS(SVG_NAMESPACE, 'state')).toBe('svg');
+    expect(removeAttribute).toHaveBeenCalledWith(
+      element,
+      'first:state',
+      HTML_NAMESPACE,
+    );
+  });
+
+  it('keeps foreign attributes out of null-namespace consumers', () => {
+    const element = document.createElement('div');
+    element.setAttributeNS('urn:foreign', 'id', 'ghost');
+    element.setAttributeNS('urn:foreign', 'class', 'foreign');
+    element.setAttributeNS('urn:foreign', 'slot', 'aside');
+    element.setAttributeNS('urn:foreign', 'data-flag', 'present');
+    document.body.appendChild(element);
+
+    expect(element.getAttribute('id')).toBe('ghost');
+    expect(element.id).toBe('');
+    expect(element.slot).toBe('');
+    expect(document.getElementById('ghost')).toBeNull();
+    expect(document.querySelector('#ghost')).toBeNull();
+    expect(document.querySelector('.foreign')).toBeNull();
+    expect(document.querySelector('[data-flag]')).toBeNull();
+    expect(document.getElementsByClassName('foreign')).toHaveLength(0);
+  });
+
+  it('creates and mutates ordinary attributes alongside foreign names', () => {
+    const element = document.createElement('div');
+    element.setAttributeNS('urn:foreign', 'id', 'ghost');
+    element.setAttributeNS('urn:foreign', 'slot', 'aside');
+    element.setAttributeNS('urn:foreign', 'data-flag', 'foreign');
+    document.body.appendChild(element);
+
+    element.id = 'ordinary';
+    element.slot = 'aside';
+    expect(element.toggleAttribute('DATA-FLAG')).toBe(true);
+
+    expect(element.id).toBe('ordinary');
+    expect(element.slot).toBe('aside');
+    expect(element.getAttributeNS(null, 'data-flag')).toBe('');
+    expect(element.getAttributeNS('urn:foreign', 'id')).toBe('ghost');
+    expect(element.getAttributeNS('urn:foreign', 'slot')).toBe('aside');
+    expect(element.getAttributeNS('urn:foreign', 'data-flag')).toBe('foreign');
+    expect(document.getElementById('ordinary')).toBe(element);
+    expect(document.querySelector('#ordinary')).toBe(element);
+    expect(document.querySelector('[data-flag]')).toBe(element);
+
+    element.removeAttribute('ID');
+    expect(element.id).toBe('');
+    expect(element.getAttributeNS('urn:foreign', 'id')).toBe('ghost');
+
+    expect(element.toggleAttribute('DATA-FLAG')).toBe(false);
+    expect(element.getAttributeNS(null, 'data-flag')).toBeNull();
+    expect(element.getAttributeNS('urn:foreign', 'data-flag')).toBe('foreign');
+  });
+
+  it('converts setAttribute values before validating names', () => {
+    const element = document.createElement('div');
+    const conversionError = new TypeError('conversion failed');
+    const conversions: string[] = [];
+    let thrown: unknown;
+
+    try {
+      element.setAttribute(
+        {
+          toString() {
+            conversions.push('name');
+            return 'bad name';
+          },
+        } as any,
+        {
+          toString() {
+            conversions.push('value');
+            throw conversionError;
+          },
+        } as any,
+      );
+    } catch (error) {
+      thrown = error;
+    }
+
+    expect(conversions).toEqual(['name', 'value']);
+    expect(thrown).toBe(conversionError);
+    expect(element.attributes).toHaveLength(0);
+  });
+
+  it('converts setAttributeNS arguments before validating namespaces', () => {
+    const element = document.createElement('div');
+    const conversionError = new TypeError('conversion failed');
+    const conversions: string[] = [];
+    let thrown: unknown;
+
+    try {
+      element.setAttributeNS(
+        {
+          toString() {
+            conversions.push('namespace');
+            return '';
+          },
+        } as any,
+        {
+          toString() {
+            conversions.push('name');
+            return 'prefix:state';
+          },
+        } as any,
+        {
+          toString() {
+            conversions.push('value');
+            throw conversionError;
+          },
+        } as any,
+      );
+    } catch (error) {
+      thrown = error;
+    }
+
+    expect(conversions).toEqual(['namespace', 'name', 'value']);
+    expect(thrown).toBe(conversionError);
+    expect(element.attributes).toHaveLength(0);
+  });
+});

package/source/tests/named-node-map.test.ts

@@ -0,0 +1,122 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+
+import {Attr} from '../Attr.ts';
+import {NEXT} from '../constants.ts';
+import {Window} from '../index.ts';
+
+let document: Window['document'];
+
+beforeEach(() => {
+  const window = new Window();
+  Window.setGlobalThis(window);
+  document = window.document;
+});
+
+function createAttributeList() {
+  const element = document.createElement('div');
+  const attributes = [
+    new Attr('first', 'one'),
+    new Attr('second', 'two'),
+    new Attr('third', 'three'),
+  ];
+
+  for (const attribute of attributes) {
+    element.attributes.setNamedItem(attribute);
+  }
+
+  return {element, attributes};
+}
+
+describe('NamedNodeMap invariants', () => {
+  it.each([
+    {position: 'head', index: 0},
+    {position: 'middle', index: 1},
+    {position: 'tail', index: 2},
+  ])(
+    'preserves the full list when reinstalling its $position attribute',
+    ({index}) => {
+      const {element, attributes} = createAttributeList();
+      const attribute = attributes[index]!;
+
+      expect(element.attributes.setNamedItem(attribute)).toBe(attribute);
+      expect([...element.attributes]).toEqual(attributes);
+      expect(element.getAttributeNames()).toEqual(['first', 'second', 'third']);
+      expect(element.attributes.length).toBe(3);
+    },
+  );
+
+  it('detaches a replaced attribute without changing its list position', () => {
+    const {element, attributes} = createAttributeList();
+    const oldAttribute = attributes[1]!;
+    const replacement = new Attr('second', 'replacement');
+
+    expect(element.attributes.setNamedItem(replacement)).toBe(oldAttribute);
+    expect([...element.attributes]).toEqual([
+      attributes[0],
+      replacement,
+      attributes[2],
+    ]);
+    expect(oldAttribute.ownerElement).toBeNull();
+    expect(oldAttribute[NEXT]).toBeNull();
+
+    oldAttribute.value = 'detached';
+    expect(element.getAttribute('second')).toBe('replacement');
+  });
+
+  it.each([
+    {position: 'head', index: 0},
+    {position: 'middle', index: 1},
+    {position: 'tail', index: 2},
+  ])('detaches a removed $position attribute', ({index}) => {
+    const {element, attributes} = createAttributeList();
+    const attribute = attributes[index]!;
+
+    expect(element.attributes.removeNamedItem(attribute.name)).toBe(attribute);
+    expect([...element.attributes]).toEqual(
+      attributes.filter((candidate) => candidate !== attribute),
+    );
+    expect(attribute.ownerElement).toBeNull();
+    expect(attribute[NEXT]).toBeNull();
+  });
+
+  it('replaces Attr nodes by expanded name through setNamedItemNS', () => {
+    const element = document.createElement('div');
+    const original = new Attr('first:state', 'initial', 'urn:state');
+    const replacement = new Attr('second:state', 'updated', 'urn:state');
+    element.attributes.setNamedItemNS(original);
+
+    expect(element.attributes.setNamedItemNS(replacement)).toBe(original);
+    expect(element.attributes.length).toBe(1);
+    expect(element.attributes.item(0)).toBe(replacement);
+    expect(replacement.name).toBe('second:state');
+    expect(original.ownerElement).toBeNull();
+  });
+
+  it('rejects cross-element aliases but allows reuse after removal', () => {
+    const firstElement = document.createElement('div');
+    const secondElement = document.createElement('div');
+    const attribute = new Attr('shared', 'value');
+    const secondAttribute = new Attr('second', 'untouched');
+    firstElement.attributes.setNamedItem(attribute);
+    secondElement.attributes.setNamedItem(secondAttribute);
+
+    let thrown: unknown;
+    try {
+      secondElement.attributes.setNamedItem(attribute);
+    } catch (error) {
+      thrown = error;
+    }
+
+    expect(thrown).toBeInstanceOf(DOMException);
+    expect(thrown).toMatchObject({name: 'InUseAttributeError'});
+    expect([...firstElement.attributes]).toEqual([attribute]);
+    expect([...secondElement.attributes]).toEqual([secondAttribute]);
+    expect(attribute.ownerElement).toBe(firstElement);
+
+    expect(firstElement.attributes.removeNamedItem('shared')).toBe(attribute);
+    expect(secondElement.attributes.setNamedItem(attribute)).toBeNull();
+    expect([...firstElement.attributes]).toEqual([]);
+    expect([...secondElement.attributes]).toEqual([secondAttribute, attribute]);
+    expect(attribute.ownerElement).toBe(secondElement);
+  });
+});

package/source/tests/namespaced-attribute-reactions.test.ts

@@ -0,0 +1,141 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+
+import {HOOKS} from '../constants.ts';
+import {Window} from '../index.ts';
+
+let window: Window;
+let document: Window['document'];
+
+beforeEach(() => {
+  window = new Window();
+  Window.setGlobalThis(window);
+  document = window.document;
+});
+
+describe('namespaced attribute mutations', () => {
+  it('updates an existing expanded name in place and preserves its prefix', () => {
+    const events: string[] = [];
+
+    class CustomElement extends window.HTMLElement {
+      static observedAttributes = ['state'];
+
+      attributeChangedCallback(
+        name: string,
+        oldValue: string | null,
+        newValue: string | null,
+        namespace: string | null,
+      ) {
+        events.push(`callback:${name}:${oldValue}:${newValue}:${namespace}`);
+      }
+    }
+
+    window.customElements.define(
+      'namespaced-attribute',
+      CustomElement as unknown as CustomElementConstructor,
+    );
+    window[HOOKS].setAttribute = (_element, name, value, namespace) => {
+      events.push(`hook:${name}:${value}:${namespace}`);
+    };
+    const element = document.createElement('namespaced-attribute');
+    element.setAttributeNS('urn:state', 'first:state', 'initial');
+    const attribute = element.attributes.item(0)!;
+    events.length = 0;
+
+    element.setAttributeNS('urn:state', 'second:state', 'updated');
+
+    expect(element.attributes.item(0)).toBe(attribute);
+    expect(attribute.ownerElement).toBe(element);
+    expect(attribute.name).toBe('first:state');
+    expect(attribute.prefix).toBe('first');
+    expect(attribute.localName).toBe('state');
+    expect(attribute.value).toBe('updated');
+    expect(events).toEqual([
+      'hook:first:state:updated:urn:state',
+      'callback:state:initial:updated:urn:state',
+    ]);
+
+    events.length = 0;
+    element.setAttributeNS('urn:state', 'third:state', 'updated');
+    expect(events).toEqual([
+      'hook:first:state:updated:urn:state',
+      'callback:state:updated:updated:urn:state',
+    ]);
+  });
+
+  it.each(['value', 'nodeValue'] as const)(
+    'routes attached Attr.%s updates through hooks before reactions',
+    (property) => {
+      const events: string[] = [];
+
+      class CustomElement extends window.HTMLElement {
+        static observedAttributes = ['state'];
+
+        attributeChangedCallback(
+          name: string,
+          oldValue: string | null,
+          newValue: string | null,
+          namespace: string | null,
+        ) {
+          events.push(`callback:${name}:${oldValue}:${newValue}:${namespace}`);
+        }
+      }
+
+      window.customElements.define(
+        `attr-${property.toLowerCase()}`,
+        CustomElement as unknown as CustomElementConstructor,
+      );
+      window[HOOKS].setAttribute = (_element, name, value, namespace) => {
+        events.push(`hook:${name}:${value}:${namespace}`);
+      };
+      const element = document.createElement(`attr-${property.toLowerCase()}`);
+      element.setAttributeNS('urn:state', 'prefix:state', 'initial');
+      const attribute = element.attributes.item(0)!;
+      events.length = 0;
+
+      attribute[property] = 'direct';
+
+      expect(events).toEqual([
+        'hook:prefix:state:direct:urn:state',
+        'callback:state:initial:direct:urn:state',
+      ]);
+      expect(element.getAttributeNS('urn:state', 'state')).toBe('direct');
+    },
+  );
+
+  it('passes the local name and namespace to removal reactions', () => {
+    const callbacks: unknown[][] = [];
+
+    class CustomElement extends window.HTMLElement {
+      static observedAttributes = ['state'];
+
+      attributeChangedCallback(...args: unknown[]) {
+        callbacks.push(args);
+      }
+    }
+
+    window.customElements.define(
+      'remove-namespaced-attribute',
+      CustomElement as unknown as CustomElementConstructor,
+    );
+    const element = document.createElement('remove-namespaced-attribute');
+    element.setAttributeNS('urn:state', 'prefix:state', 'initial');
+    callbacks.length = 0;
+
+    element.removeAttributeNS('urn:state', 'state');
+
+    expect(callbacks).toEqual([['state', 'initial', null, 'urn:state']]);
+  });
+
+  it('validates qualified attribute names and normalizes empty namespaces', () => {
+    const element = document.createElement('div');
+
+    element.setAttributeNS('', 'state', 'value');
+    expect(element.attributes.item(0)?.namespaceURI).toBeNull();
+    expect(() =>
+      element.setAttributeNS(null, 'prefix:state', 'value'),
+    ).toThrowError(expect.objectContaining({name: 'NamespaceError'}));
+    expect(() =>
+      element.setAttributeNS('urn:state', 'prefix:', 'value'),
+    ).toThrowError(expect.objectContaining({name: 'InvalidCharacterError'}));
+  });
+});

package/source/tests/node.test.ts

@@ -0,0 +1,56 @@
+import {Window} from '../index.ts';
+
+import {beforeEach, describe, expect, it} from 'vitest';
+
+beforeEach(() => {
+  const window = new Window();
+  Window.setGlobalThis(window);
+});
+
+describe('Node.contains', () => {
+  it('returns true for itself', () => {
+    const element = document.createElement('div');
+
+    expect(element.contains(element)).toBe(true);
+  });
+
+  it('returns true for a direct child', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    parent.appendChild(child);
+
+    expect(parent.contains(child)).toBe(true);
+  });
+
+  it('returns true for a deep descendant', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    const grandchild = document.createElement('em');
+    parent.appendChild(child);
+    child.appendChild(grandchild);
+
+    expect(parent.contains(grandchild)).toBe(true);
+  });
+
+  it('returns false for a node in another subtree', () => {
+    const parent = document.createElement('div');
+    const otherParent = document.createElement('div');
+    const otherChild = document.createElement('span');
+    otherParent.appendChild(otherChild);
+
+    expect(parent.contains(otherChild)).toBe(false);
+  });
+
+  it('returns false for a detached node', () => {
+    const parent = document.createElement('div');
+    const detached = document.createElement('span');
+
+    expect(parent.contains(detached)).toBe(false);
+  });
+
+  it('returns false for null', () => {
+    const parent = document.createElement('div');
+
+    expect(parent.contains(null)).toBe(false);
+  });
+});