@wordpress/interactivity-router 2.25.0 → 2.26.0

package/src/assets/test/styles.test.ts

@@ -0,0 +1,758 @@
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeMedia,
+	updateStylesWithSCS,
+	preloadStyles,
+	applyStyles,
+	type StyleElement,
+} from '../styles';
+
+/**
+ * Mocks the `sheet` property for the
+ * passed HTMLStyleElement or HTMLLinkElement instance.
+ *
+ * @param element          Style or Link element.
+ * @param params           Values for certain props.
+ * @param params.disabled  Value for the `sheet.disabled` prop.
+ * @param params.mediaText Value for the `sheet.media.mediaText` prop.
+ */
+const mockSheet = (
+	element: StyleElement,
+	{ disabled, mediaText }: { disabled: boolean; mediaText: string }
+) => {
+	if ( element.sheet ) {
+		Object.assign( element.sheet, { disabled, media: { mediaText } } );
+	} else {
+		Object.defineProperty( element, 'sheet', {
+			value: {
+				disabled,
+				media: { mediaText },
+			},
+		} );
+	}
+};
+
+/**
+ * Creates an `HTMLStyleElement` instance for testing.
+ *
+ * @param id Value for the `id` attribute.
+ * @return An `HTMLStyleElement` instance.
+ */
+const createStyleElement = ( id: string ): HTMLStyleElement => {
+	const element = document.createElement( 'style' );
+	element.id = id;
+	element.textContent = `/* Style ${ id } */`;
+	return element;
+};
+
+/**
+ * Creates an `HTMLLinkElement` instance for testing.
+ *
+ * @param id   Value for the `id` attribute.
+ * @param href Value for the `href` attribute.
+ * @return An `HTMLLinkElement` instance.
+ */
+const createLinkElement = (
+	id: string,
+	href: string = `https://example.com/${ id }.css`
+): HTMLLinkElement => {
+	const element = document.createElement( 'link' );
+	element.id = id;
+	element.rel = 'stylesheet';
+	element.href = href;
+	return element;
+};
+
+describe( 'Router styles management', () => {
+	const parent = document.head;
+
+	beforeEach( () => {
+		document.head.replaceChildren();
+	} );
+
+	afterAll( () => {
+		document.head.replaceChildren();
+	} );
+
+	describe( 'updateStylesWithSCS', () => {
+		it( 'should append all elements when X is empty in the correct order', () => {
+			const X = [];
+			const Y = [
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link1' ),
+				createStyleElement( 'style2' ),
+			];
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 3 );
+			expect( childNodes.length ).toBe( 3 );
+
+			// Verify elements are in the correct order.
+			expect( childNodes[ 0 ] ).toBe( Y[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( Y[ 1 ] );
+			expect( childNodes[ 2 ] ).toBe( Y[ 2 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should handle when both X and Y are empty', () => {
+			const promises = updateStylesWithSCS( [], [], parent );
+
+			expect( promises.length ).toBe( 0 );
+			expect( parent.childNodes.length ).toBe( 0 );
+		} );
+
+		it( 'should do nothing when X is non-empty but Y is empty', () => {
+			const style1 = createStyleElement( 'style1' );
+			const style2 = createStyleElement( 'style2' );
+			const X = [ style1, style2 ];
+			// Pre-append X so they are in the DOM.
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, [], parent );
+			const { childNodes } = parent;
+
+			// No new promises should be generated.
+			expect( promises.length ).toBe( 0 );
+
+			// The DOM should still only have the original X elements.
+			expect( childNodes.length ).toBe( X.length );
+			expect( childNodes[ 0 ] ).toBe( style1 );
+			expect( childNodes[ 1 ] ).toBe( style2 );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should keep existing elements when they match in both X and Y', () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link1' ),
+			];
+			const Y = [
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link1' ),
+			];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 2 );
+			expect( childNodes.length ).toBe( 2 );
+
+			// Should maintain the original elements (not replace with clones).
+			expect( childNodes[ 0 ] ).toBe( X[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( X[ 1 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should insert new elements from Y in correct positions relative to X', () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style3' ),
+			];
+			const Y = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style2' ),
+				createStyleElement( 'style3' ),
+				createStyleElement( 'style4' ),
+			];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 4 );
+			expect( childNodes.length ).toBe( 4 );
+			expect( childNodes[ 0 ] ).toBe( X[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( Y[ 1 ] );
+			expect( childNodes[ 2 ] ).toBe( X[ 1 ] );
+			expect( childNodes[ 3 ] ).toBe( Y[ 3 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should handle Y having completely different elements than X', () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style2' ),
+			];
+			const Y = [
+				createStyleElement( 'style3' ),
+				createStyleElement( 'style4' ),
+			];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 2 );
+
+			// Check the specific order - based on the SCS algorithm.
+			// When X and Y are completely different, the SCS places.
+			// all elements from Y before X.
+			expect( childNodes[ 0 ] ).toBe( Y[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( Y[ 1 ] );
+			expect( childNodes[ 2 ] ).toBe( X[ 0 ] );
+			expect( childNodes[ 3 ] ).toBe( X[ 1 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should consider normalized media attributes when comparing elements', () => {
+			// These should be considered equal after normalizing the media attribute.
+			const X = [ createLinkElement( 'same-link' ) ];
+			const Y = [ createLinkElement( 'same-link' ) ];
+
+			X[ 0 ].setAttribute( 'media', 'preload' );
+			X[ 0 ].dataset.originalMedia = 'screen';
+
+			Y[ 0 ].setAttribute( 'media', 'screen' );
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( childNodes.length ).toBe( 1 );
+			expect( promises.length ).toBe( 1 );
+			expect( childNodes[ 0 ] ).toBe( X[ 0 ] );
+
+			// Verify the media attribute has not changed.
+			expect( childNodes[ 0 ] ).toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should treat style elements as already loaded', async () => {
+			const X = [ createStyleElement( 'style1' ) ];
+			const Y = [ createStyleElement( 'style1' ) ];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+
+			expect( promises.length ).toBe( 1 );
+			expect( await promises[ 0 ] ).toBe( X[ 0 ] );
+		} );
+
+		it( 'should return the same promise for equivalent link elements', () => {
+			const X = [ createLinkElement( 'link1' ) ];
+			const Y = [ createLinkElement( 'link1' ) ];
+
+			// First, add it to the DOM.
+			const promises1 = updateStylesWithSCS( [], X, parent );
+
+			// Then, use it in a second call.
+			const promises2 = updateStylesWithSCS( X, Y, parent );
+
+			// The promises should be the same.
+			expect( promises1[ 0 ] ).toBe( promises2[ 0 ] );
+		} );
+
+		it( 'should return the same promise for equivalent style elements', () => {
+			const X = [ createStyleElement( 'style1' ) ];
+			const Y = [ createStyleElement( 'style1' ) ];
+
+			// First, add it to the DOM.
+			const promises1 = updateStylesWithSCS( [], X, parent );
+
+			// Then, use it in a second call.
+			const promises2 = updateStylesWithSCS( X, Y, parent );
+
+			// The promises should be the same.
+			expect( promises1[ 0 ] ).toBe( promises2[ 0 ] );
+		} );
+
+		it( 'should handle complex reordering of elements maintaining the correct order', async () => {
+			// Initial set of elements.
+			const style1 = createStyleElement( 'style1' );
+			const style2 = createStyleElement( 'style2' );
+			const style3 = createStyleElement( 'style3' );
+			const style4 = createStyleElement( 'style4' );
+
+			const X = [ style1, style2, style3, style4 ];
+			parent.append( ...X );
+
+			// New set with reordering and some new elements.
+			const newStyle1 = createStyleElement( 'style1' );
+			const newStyle3 = createStyleElement( 'style3' );
+			const newStyle5 = createStyleElement( 'style5' );
+			const newStyle2 = createStyleElement( 'style2' );
+			const newStyle6 = createStyleElement( 'style6' );
+
+			const Y = [ newStyle1, newStyle3, newStyle5, newStyle2, newStyle6 ];
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 5 );
+
+			// Verify the exact order.
+			expect( childNodes[ 0 ] ).toBe( style1 );
+			expect( childNodes[ 1 ] ).toBe( newStyle3 );
+			expect( childNodes[ 2 ] ).toBe( newStyle5 );
+			expect( childNodes[ 3 ] ).toBe( style2 );
+			expect( childNodes[ 4 ] ).toBe( newStyle6 );
+			expect( childNodes[ 5 ] ).toBe( style3 );
+			expect( childNodes[ 6 ] ).toBe( style4 );
+
+			// Verify the promise values.
+			const values = await Promise.all( promises );
+			expect( values[ 0 ] ).toBe( style1 );
+			expect( values[ 1 ] ).toBe( newStyle3 );
+			expect( values[ 2 ] ).toBe( newStyle5 );
+			expect( values[ 3 ] ).toBe( style2 );
+			expect( values[ 4 ] ).toBe( newStyle6 );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 4 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 5 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 6 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should handle link elements with load events', async () => {
+			const link1 = createLinkElement( 'link1' );
+			const promises = updateStylesWithSCS( [], [ link1 ], parent );
+
+			// Manually trigger a load event.
+			link1.dispatchEvent( new Event( 'load' ) );
+
+			// The promise should resolve with the link element.
+			const result = await promises[ 0 ];
+			expect( result ).toBe( link1 );
+		} );
+
+		it( 'should reject the promise when a link element fails to load', async () => {
+			const link1 = createLinkElement( 'link-fail' );
+			// Remove load/error listeners by not adding it to the DOM initially.
+			const promises = updateStylesWithSCS( [], [ link1 ], parent );
+
+			// Simulate an error event.
+			const errorEvent = new Event( 'error' );
+			link1.dispatchEvent( errorEvent );
+
+			await expect( promises[ 0 ] ).rejects.toThrow(
+				`The style sheet with the following URL failed to load: ${ link1.href }`
+			);
+		} );
+
+		it( 'should handle mixed style and link elements', async () => {
+			const X = [
+				createLinkElement( 'link1' ),
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link2' ),
+				createStyleElement( 'style2' ),
+				createStyleElement( 'style3' ),
+			];
+			parent.append( ...X );
+
+			const Y = [
+				createLinkElement( 'link1' ),
+				createLinkElement( 'link3' ),
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link2' ),
+				createStyleElement( 'style2' ),
+				createLinkElement( 'link1' ),
+			];
+
+			// Run the update using X and Y.
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			// Expected DOM outcome (based on the SCS algorithm):.
+			// We expect that the existing link1 and link2 are reused, and the new link3 is inserted.
+			// The duplicate occurrences of link1 (via link1Clone and link1 itself in Y).
+			// should resolve to the original link1.
+			expect( childNodes.length ).toBe( 7 );
+			expect( [ ...childNodes ] ).toEqual( [
+				X[ 0 ],
+				Y[ 1 ],
+				X[ 1 ],
+				X[ 2 ],
+				X[ 3 ],
+				Y[ 5 ],
+				X[ 4 ],
+			] );
+
+			( childNodes as NodeListOf< StyleElement > ).forEach( ( element ) =>
+				element.dispatchEvent( new Event( 'load' ) )
+			);
+
+			// Verify that the returned promises resolve to the appropriate elements.
+			const resolved = await Promise.all( promises );
+
+			expect( promises.length ).toBe( 6 );
+			expect( resolved ).toEqual( [
+				X[ 0 ],
+				Y[ 1 ],
+				X[ 1 ],
+				X[ 2 ],
+				X[ 3 ],
+				Y[ 5 ],
+			] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 4 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 5 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 6 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should set media and data-original-media correctly on new elements', async () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style1Media' ),
+				createLinkElement( 'link1' ),
+				createLinkElement( 'link1Media' ),
+			];
+
+			X[ 1 ].setAttribute( 'media', 'screen' ); // style1Media
+			X[ 3 ].setAttribute( 'media', 'screen' ); // link1Media
+
+			mockSheet( X[ 2 ], { disabled: false, mediaText: 'all' } ); // link1
+			mockSheet( X[ 3 ], { disabled: false, mediaText: 'screen' } ); // link1Media
+
+			parent.append( ...X );
+
+			const Y = [
+				...X.map( ( e ) => e.cloneNode( true ) as StyleElement ),
+				createStyleElement( 'style2' ),
+				createStyleElement( 'style2Media' ),
+				createLinkElement( 'link2' ),
+				createLinkElement( 'link2Media' ),
+			];
+
+			Y[ 5 ].setAttribute( 'media', 'screen' ); // style2Media
+			Y[ 7 ].setAttribute( 'media', 'screen' ); // link2Media
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+
+			( parent.childNodes as NodeListOf< StyleElement > ).forEach(
+				( element ) => element.dispatchEvent( new Event( 'load' ) )
+			);
+
+			const elements = await Promise.all( promises );
+
+			const attributes = elements.map( ( e ) => ( {
+				id: e.id,
+				media: e.getAttribute( 'media' ),
+				originalMedia: e.getAttribute( 'data-original-media' ),
+			} ) );
+
+			expect( attributes ).toEqual( [
+				{
+					id: 'style1',
+					media: null,
+					originalMedia: null,
+				},
+				{
+					id: 'style1Media',
+					media: 'screen',
+					originalMedia: null,
+				},
+				{
+					id: 'link1',
+					media: null,
+					originalMedia: null,
+				},
+				{
+					id: 'link1Media',
+					media: 'screen',
+					originalMedia: null,
+				},
+				{
+					id: 'style2',
+					media: 'preload',
+					originalMedia: null,
+				},
+				{
+					id: 'style2Media',
+					media: 'preload',
+					originalMedia: 'screen',
+				},
+				{
+					id: 'link2',
+					media: 'preload',
+					originalMedia: null,
+				},
+				{
+					id: 'link2Media',
+					media: 'preload',
+					originalMedia: 'screen',
+				},
+			] );
+		} );
+	} );
+
+	// Tests for preloadStyles function.
+	describe( 'preloadStyles', () => {
+		it( 'should use cached promises for the same URL', () => {
+			// Create a test document.
+			const doc = document.implementation.createHTMLDocument();
+			const style = doc.createElement( 'style' );
+			doc.head.appendChild( style );
+
+			// First call should update the DOM.
+			const firstResult = preloadStyles(
+				doc,
+				'https://example.com/test'
+			);
+			expect( firstResult ).toBeTruthy();
+
+			// Second call should return the same promises.
+			const secondResult = preloadStyles(
+				doc,
+				'https://example.com/test'
+			);
+			expect( secondResult ).toBe( firstResult );
+		} );
+
+		it( 'should extract style elements from the provided document', () => {
+			// Create a test document with style elements.
+			const doc = document.implementation.createHTMLDocument();
+			const style1 = doc.createElement( 'style' );
+			style1.id = 'test-style-1';
+			const style2 = doc.createElement( 'link' );
+			style2.id = 'test-link-1';
+			style2.rel = 'stylesheet';
+			doc.head.appendChild( style1 );
+			doc.head.appendChild( style2 );
+
+			preloadStyles( doc, 'https://example.com/another-test-page' );
+
+			// Check that styles were extracted and added to the document.
+			const addedStyle1 = document.querySelector( '#test-style-1' );
+			const addedLink1 = document.querySelector( '#test-link-1' );
+			expect( addedStyle1 ).toBeTruthy();
+			expect( addedLink1 ).toBeTruthy();
+			expect( addedStyle1 ).toHaveAttribute( 'media', 'preload' );
+			expect( addedLink1 ).toHaveAttribute( 'media', 'preload' );
+		} );
+	} );
+
+	// Tests for applyStyles function.
+	describe( 'applyStyles', () => {
+		it( 'should enable included styles and disable others', () => {
+			// Create some style elements.
+			const style1 = createStyleElement( 'style1' );
+			const style2 = createStyleElement( 'style2' );
+			const style3 = createStyleElement( 'style3' );
+
+			// Add all to document.
+			document.head.appendChild( style1 );
+			document.head.appendChild( style2 );
+			document.head.appendChild( style3 );
+
+			// Init `sheet` property.
+			mockSheet( style1, { disabled: true, mediaText: 'all' } );
+			mockSheet( style2, { disabled: false, mediaText: 'all' } );
+			mockSheet( style3, { disabled: false, mediaText: 'preload' } );
+
+			// Apply styles to only style1 and style3.
+			applyStyles( [ style1, style3 ] );
+
+			// style1 and style3 should be enabled, style2 should be disabled.
+			expect( style1.sheet!.disabled ).toBe( false );
+			expect( style2.sheet!.disabled ).toBe( true );
+			expect( style3.sheet!.disabled ).toBe( false );
+		} );
+
+		it( 'should set media appropriately based on originalMedia', () => {
+			// Create link elements with originalMedia.
+			const link1 = createLinkElement( 'link1' );
+			link1.setAttribute( 'media', 'preload' );
+			link1.dataset.originalMedia = 'print';
+			const link2 = createLinkElement( 'link2' );
+			link2.setAttribute( 'media', 'preload' );
+			link2.dataset.originalMedia = 'screen';
+
+			// Add to document.
+			document.head.appendChild( link1 );
+			document.head.appendChild( link2 );
+
+			// Init `sheet` property.
+			mockSheet( link1, { disabled: false, mediaText: 'preload' } );
+			mockSheet( link2, { disabled: false, mediaText: 'preload' } );
+
+			// Apply styles.
+			applyStyles( [ link1, link2 ] );
+
+			// Check that media was set correctly.
+			expect( link1.sheet!.media.mediaText ).toBe( 'print' );
+			expect( link2.sheet!.media.mediaText ).toBe( 'screen' );
+		} );
+
+		it( 'should use "all" as default media if no originalMedia specified', () => {
+			// Create elements without originalMedia.
+			const link = createLinkElement( 'link' );
+			const style = createStyleElement( 'style' );
+			link.setAttribute( 'media', 'preload' );
+			style.setAttribute( 'media', 'preload' );
+
+			// Add to document.
+			document.head.append( link, style );
+
+			// Init `sheet` property.
+			mockSheet( link, { disabled: false, mediaText: 'preload' } );
+			mockSheet( style, { disabled: false, mediaText: 'preload' } );
+
+			// Apply styles.
+			applyStyles( [ link, style ] );
+
+			// Default should be "all".
+			expect( link.sheet!.media.mediaText ).toBe( 'all' );
+			expect( style.sheet!.media.mediaText ).toBe( 'all' );
+		} );
+	} );
+
+	describe( 'normalizeMedia', () => {
+		let linkElement: HTMLLinkElement;
+		let styleElement: HTMLStyleElement;
+
+		beforeEach( () => {
+			// Create fresh elements before each test
+			linkElement = document.createElement( 'link' );
+			linkElement.rel = 'stylesheet';
+			linkElement.href = './styles.css';
+
+			styleElement = document.createElement( 'style' );
+			styleElement.textContent = 'body { color: red; }';
+		} );
+
+		it( 'should always return a clone of the element', () => {
+			// Test with no media attribute
+			const result1 = normalizeMedia( linkElement );
+			expect( result1 ).not.toBe( linkElement );
+			expect( result1 ).toHaveAttribute( 'media', 'all' );
+
+			// Test with media attribute other than "preload"
+			linkElement.setAttribute( 'media', 'all' );
+			const result2 = normalizeMedia( linkElement );
+			expect( result2 ).not.toBe( linkElement );
+			expect( result2 ).toHaveAttribute( 'media', 'all' );
+
+			linkElement.setAttribute( 'media', 'preload' );
+			const result3 = normalizeMedia( linkElement );
+			expect( result3 ).not.toBe( linkElement );
+			expect( result3 ).toHaveAttribute(
+				'href',
+				linkElement.getAttribute( 'href' )
+			);
+		} );
+
+		it( 'should remove media attribute when media="preload" and no data-original-media exists', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+		} );
+
+		it( 'should restore original media when media="preload" and data-original-media exists', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			linkElement.dataset.originalMedia = 'all';
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+			expect( result.dataset.originalMedia ).toBeUndefined();
+		} );
+
+		it( 'should work with style elements too', () => {
+			styleElement.setAttribute( 'media', 'preload' );
+			styleElement.dataset.originalMedia = 'print';
+			const result = normalizeMedia( styleElement );
+			expect( result ).not.toBe( styleElement );
+			expect( result ).toHaveAttribute( 'media', 'print' );
+			expect( result.dataset.originalMedia ).toBeUndefined();
+		} );
+
+		it( 'should handle empty original media correctly', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			linkElement.dataset.originalMedia = '';
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+			expect( result.dataset.originalMedia ).toBeUndefined();
+		} );
+
+		it( 'should preserve other attributes when normalizing', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			linkElement.dataset.originalMedia = 'all';
+			linkElement.setAttribute( 'data-test', 'value' );
+			linkElement.setAttribute( 'integrity', 'hash123' );
+
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+			expect( result ).toHaveAttribute( 'data-test', 'value' );
+			expect( result ).toHaveAttribute( 'integrity', 'hash123' );
+		} );
+
+		it( 'should output the same for equivalent link elements', () => {
+			const head = document.createElement( 'head' );
+			head.innerHTML = `
+				<link rel="stylesheet" src="./assets/styles.css">
+				<link rel="stylesheet" src="./assets/styles.css" media="all">
+				<link rel="stylesheet" src="./assets/styles.css" media="preload">
+				<link rel="stylesheet" src="./assets/styles.css" media="preload" data-original-media="all">
+			`;
+
+			const links = [ ...head.childNodes ]
+				.filter( ( e ) => e instanceof HTMLLinkElement )
+				.map( normalizeMedia );
+
+			expect( links[ 0 ].isEqualNode( links[ 1 ] ) ).toBe( true );
+			expect( links[ 0 ].isEqualNode( links[ 2 ] ) ).toBe( true );
+			expect( links[ 0 ].isEqualNode( links[ 3 ] ) ).toBe( true );
+		} );
+
+		it( 'should output the same for equivalent style elements', () => {
+			const head = document.createElement( 'head' );
+			head.innerHTML = `
+				<style>
+					body { background: pink; }
+				</style>
+				<style media="all">
+					body { background: pink; }
+				</style>
+				<style media="preload">
+					body { background: pink; }
+				</style>
+				<style media="preload" data-original-media="all">
+					body { background: pink; }
+				</style>
+			`;
+
+			const styles = [ ...head.childNodes ]
+				.filter( ( e ) => e instanceof HTMLStyleElement )
+				.map( normalizeMedia );
+
+			expect( styles[ 0 ].isEqualNode( styles[ 1 ] ) ).toBe( true );
+			expect( styles[ 0 ].isEqualNode( styles[ 2 ] ) ).toBe( true );
+			expect( styles[ 0 ].isEqualNode( styles[ 3 ] ) ).toBe( true );
+		} );
+	} );
+} );