@elementor/editor-canvas 4.2.0-911 → 4.2.0-912

package/src/components/grid-outline/__tests__/grid-outline.test.tsx

@@ -36,7 +36,7 @@ describe( '<GridOutline />', () => {
 		expect( svg ).toHaveAttribute( 'height', '200' );
 	} );
 
-	it( 'draws N+M boundary lines for an N×M grid (no gaps)', () => {
+	it( 'draws one rect per cell for an N×M grid', () => {
 		const { container } = renderWithTheme(
 			<GridOutline
 				tracks={ makeTracks( { columns: [ 100, 100, 100 ], rows: [ 80, 80 ] } ) }
@@ -45,10 +45,10 @@ describe( '<GridOutline />', () => {
 			/>
 		);
 
-		expect( container.querySelectorAll( 'line' ) ).toHaveLength( 4 + 3 );
+		expect( container.querySelectorAll( 'rect' ) ).toHaveLength( 3 * 2 );
 	} );
 
-	it( 'emits both edges of every gap between tracks', () => {
+	it( 'keeps the cell count stable with a gap and offsets cells past the gap', () => {
 		const { container } = renderWithTheme(
 			<GridOutline
 				tracks={ makeTracks( {
@@ -62,14 +62,21 @@ describe( '<GridOutline />', () => {
 			/>
 		);
 
-		expect( container.querySelectorAll( 'line' ) ).toHaveLength( 6 + 4 );
+		const rects = Array.from( container.querySelectorAll( 'rect' ) );
+		expect( rects ).toHaveLength( 3 * 2 );
+
+		const xs = rects.map( ( rect ) => rect.getAttribute( 'x' ) );
+		expect( xs ).toContain( '0.5' );
+		expect( xs ).toContain( '110.5' );
+		expect( xs ).toContain( '220.5' );
 	} );
 
-	it( 'snaps vertical line coordinates to half pixels for crisp 1px strokes', () => {
+	it( 'snaps cell coordinates to half pixels for crisp 1px strokes', () => {
 		const { container } = renderWithTheme(
 			<GridOutline
 				tracks={ makeTracks( {
 					columns: [ 100, 100 ],
+					rows: [ 80 ],
 					padding: { top: 10, right: 10, bottom: 10, left: 10 },
 				} ) }
 				width={ 220 }
@@ -77,14 +84,11 @@ describe( '<GridOutline />', () => {
 			/>
 		);
 
-		const verticals = Array.from( container.querySelectorAll( 'line' ) ).filter(
-			( line ) => line.getAttribute( 'x1' ) === line.getAttribute( 'x2' )
-		);
-
-		expect( verticals.map( ( line ) => line.getAttribute( 'x1' ) ) ).toEqual( [ '10.5', '110.5', '210.5' ] );
+		const xs = Array.from( container.querySelectorAll( 'rect' ) ).map( ( rect ) => rect.getAttribute( 'x' ) );
+		expect( xs ).toEqual( [ '10.5', '110.5' ] );
 	} );
 
-	it( 'spans horizontal lines across the padded content rect', () => {
+	it( 'spans a single full-width cell per row when only rows are defined', () => {
 		const { container } = renderWithTheme(
 			<GridOutline
 				tracks={ makeTracks( {
@@ -96,36 +100,33 @@ describe( '<GridOutline />', () => {
 			/>
 		);
 
-		const horizontals = Array.from( container.querySelectorAll( 'line' ) ).filter(
-			( line ) => line.getAttribute( 'y1' ) === line.getAttribute( 'y2' )
-		);
-
-		expect( horizontals.length ).toBeGreaterThan( 0 );
-		for ( const line of horizontals ) {
-			expect( line ).toHaveAttribute( 'x1', '4' );
-			expect( line ).toHaveAttribute( 'x2', '288' );
+		const rects = Array.from( container.querySelectorAll( 'rect' ) );
+		expect( rects ).toHaveLength( 2 );
+		for ( const rect of rects ) {
+			expect( rect ).toHaveAttribute( 'x', '4.5' );
+			expect( rect ).toHaveAttribute( 'width', '284' );
 		}
 	} );
 
-	it( 'passes the resolved iframe border color through to each line', () => {
+	it( 'passes the resolved iframe border color through to each cell', () => {
 		const { container } = renderWithTheme(
 			<GridOutline
-				tracks={ makeTracks( { columns: [ 100 ], borderColor: '#abcdef' } ) }
+				tracks={ makeTracks( { columns: [ 100 ], rows: [ 100 ], borderColor: '#abcdef' } ) }
 				width={ 100 }
 				height={ 100 }
 			/>
 		);
 
-		const lines = container.querySelectorAll( 'line' );
-		expect( lines.length ).toBeGreaterThan( 0 );
-		lines.forEach( ( line ) => {
-			expect( line ).toHaveAttribute( 'stroke', '#abcdef' );
+		const rects = container.querySelectorAll( 'rect' );
+		expect( rects.length ).toBeGreaterThan( 0 );
+		rects.forEach( ( rect ) => {
+			expect( rect ).toHaveAttribute( 'stroke', '#abcdef' );
 		} );
 	} );
 
-	it( 'renders no lines when there are no tracks on either axis', () => {
+	it( 'renders no cells when there are no tracks on either axis', () => {
 		const { container } = renderWithTheme( <GridOutline tracks={ makeTracks() } width={ 100 } height={ 100 } /> );
 
-		expect( container.querySelectorAll( 'line' ) ).toHaveLength( 0 );
+		expect( container.querySelectorAll( 'rect' ) ).toHaveLength( 0 );
 	} );
 } );

package/src/components/grid-outline/{grid-outline-line.tsx → grid-outline-cell.tsx}

@@ -4,20 +4,21 @@ const FALLBACK_COLOR = 'rgba(0, 0, 0, 0.12)';
 export const DASH = '2 2';
 
 type Props = {
-	x1: number;
-	x2: number;
-	y1: number;
-	y2: number;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
 	color?: string;
 };
 
-export function GridOutlineLine( { x1, x2, y1, y2, color }: Props ) {
+export function GridOutlineCell( { x, y, width, height, color }: Props ) {
 	return (
-		<line
-			x1={ x1 }
-			x2={ x2 }
-			y1={ y1 }
-			y2={ y2 }
+		<rect
+			x={ x }
+			y={ y }
+			width={ width }
+			height={ height }
+			fill="none"
 			stroke={ color || FALLBACK_COLOR }
 			strokeWidth={ 1 }
 			strokeDasharray={ DASH }

package/src/components/grid-outline/grid-outline.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
 import { type GridTracks } from '../../hooks/use-grid-tracks';
-import { computeOutlineGeometry, snapToHalfPixel } from '../../utils/grid-outline-utils';
-import { GridOutlineLine } from './grid-outline-line';
+import { computeCellRects, snapToHalfPixel } from '../../utils/grid-outline-utils';
+import { GridOutlineCell } from './grid-outline-cell';
 
 type Props = {
 	tracks: GridTracks;
@@ -11,7 +11,7 @@ type Props = {
 };
 
 export function GridOutline( { tracks, width, height }: Props ) {
-	const { vertical, horizontal, top, bottom, left, right } = computeOutlineGeometry( tracks, width, height );
+	const cells = computeCellRects( tracks, width, height );
 
 	return (
 		<svg
@@ -20,23 +20,13 @@ export function GridOutline( { tracks, width, height }: Props ) {
 			style={ { position: 'absolute', inset: 0, overflow: 'visible' } }
 			xmlns="http://www.w3.org/2000/svg"
 		>
-			{ vertical.map( ( x, i ) => (
-				<GridOutlineLine
-					key={ `v-${ i }` }
-					x1={ snapToHalfPixel( x ) }
-					x2={ snapToHalfPixel( x ) }
-					y1={ top }
-					y2={ bottom }
-					color={ tracks.borderColor }
-				/>
-			) ) }
-			{ horizontal.map( ( y, i ) => (
-				<GridOutlineLine
-					key={ `h-${ i }` }
-					x1={ left }
-					x2={ right }
-					y1={ snapToHalfPixel( y ) }
-					y2={ snapToHalfPixel( y ) }
+			{ cells.map( ( cell, i ) => (
+				<GridOutlineCell
+					key={ i }
+					x={ snapToHalfPixel( cell.x ) }
+					y={ snapToHalfPixel( cell.y ) }
+					width={ Math.round( cell.width ) }
+					height={ Math.round( cell.height ) }
 					color={ tracks.borderColor }
 				/>
 			) ) }

package/src/hooks/__tests__/use-grid-tracks.test.ts

@@ -1,4 +1,6 @@
-import { renderHook } from '@testing-library/react';
+import { dispatchWindowEvent } from 'test-utils';
+import { ELEMENT_STYLE_CHANGE_EVENT } from '@elementor/editor-elements';
+import { act, renderHook } from '@testing-library/react';
 
 import { useGridTracks } from '../use-grid-tracks';
 
@@ -26,9 +28,12 @@ const DEFAULT_STYLE: Style = {
 	'--e-a-border-color-bold': '',
 };
 
-function mockElement( style: Partial< Style > = {} ): HTMLElement {
+const DEVICE_MODE_CHANGE_EVENT = 'elementor/device-mode/change';
+
+function mockElement( style: Partial< Style > = {} ) {
 	const resolved: Style = { ...DEFAULT_STYLE, ...style };
-	const getComputedStyle = jest.fn().mockReturnValue( {
+
+	const getComputedStyle = jest.fn().mockImplementation( () => ( {
 		gridTemplateColumns: resolved.gridTemplateColumns,
 		gridTemplateRows: resolved.gridTemplateRows,
 		columnGap: resolved.columnGap,
@@ -38,13 +43,22 @@ function mockElement( style: Partial< Style > = {} ): HTMLElement {
 		paddingBottom: resolved.paddingBottom,
 		paddingLeft: resolved.paddingLeft,
 		getPropertyValue: ( name: string ) => ( name === '--e-a-border-color-bold' ? resolved[ name ] : '' ),
-	} );
+	} ) );
 
-	return {
+	const element = {
 		ownerDocument: {
-			defaultView: { getComputedStyle } as unknown as Window,
+			defaultView: {
+				getComputedStyle,
+				requestAnimationFrame: ( cb: FrameRequestCallback ) => {
+					cb( 0 );
+					return 1;
+				},
+				cancelAnimationFrame: jest.fn(),
+			} as unknown as Window,
 		},
 	} as unknown as HTMLElement;
+
+	return { element, resolved, getComputedStyle };
 }
 
 const RECT = new DOMRect( 0, 0, 320, 200 );
@@ -73,7 +87,7 @@ describe( 'useGridTracks', () => {
 	} );
 
 	it( 'parses resolved track lists, gaps, and padding from computed style', () => {
-		const element = mockElement( {
+		const { element } = mockElement( {
 			gridTemplateColumns: '100px 100px 100px',
 			gridTemplateRows: '80px 80px',
 			columnGap: '10px',
@@ -96,33 +110,8 @@ describe( 'useGridTracks', () => {
 		} );
 	} );
 
-	it( 'reads the --e-a-border-color-bold CSS variable from the iframe', () => {
-		const element = mockElement( {
-			gridTemplateColumns: '100px',
-			'--e-a-border-color-bold': '  #d5d8dc  ',
-		} );
-
-		const { result } = renderHook( () => useGridTracks( element, RECT ) );
-
-		expect( result.current.borderColor ).toBe( '#d5d8dc' );
-	} );
-
-	it( 'reports gap as 0 when computed style returns "normal"', () => {
-		const element = mockElement( {
-			gridTemplateColumns: '100px 100px',
-			columnGap: 'normal',
-			rowGap: 'normal',
-		} );
-
-		const { result } = renderHook( () => useGridTracks( element, RECT ) );
-
-		expect( result.current.columnGap ).toBe( 0 );
-		expect( result.current.rowGap ).toBe( 0 );
-	} );
-
 	it( 'recomputes when the rect dimensions change', () => {
-		const element = mockElement( { gridTemplateColumns: '100px' } );
-		const getComputedStyle = element.ownerDocument?.defaultView?.getComputedStyle as jest.Mock;
+		const { element, getComputedStyle } = mockElement( { gridTemplateColumns: '100px' } );
 
 		const { rerender } = renderHook( ( { rect } ) => useGridTracks( element, rect ), {
 			initialProps: { rect: new DOMRect( 0, 0, 320, 200 ) },
@@ -136,8 +125,7 @@ describe( 'useGridTracks', () => {
 	} );
 
 	it( 'does not recompute when the same rect dimensions are passed again', () => {
-		const element = mockElement( { gridTemplateColumns: '100px' } );
-		const getComputedStyle = element.ownerDocument?.defaultView?.getComputedStyle as jest.Mock;
+		const { element, getComputedStyle } = mockElement( { gridTemplateColumns: '100px' } );
 
 		const { rerender } = renderHook( ( { rect } ) => useGridTracks( element, rect ), {
 			initialProps: { rect: new DOMRect( 0, 0, 320, 200 ) },
@@ -149,4 +137,38 @@ describe( 'useGridTracks', () => {
 
 		expect( getComputedStyle.mock.calls.length ).toBe( callsBefore );
 	} );
+
+	it( 'recomputes when a grid style change event fires', () => {
+		const mock = mockElement( { gridTemplateColumns: '100px 100px' } );
+
+		const { result } = renderHook( () => useGridTracks( mock.element, RECT ) );
+
+		expect( result.current.columns ).toEqual( [ 100, 100 ] );
+
+		mock.resolved.gridTemplateColumns = '100px 100px 100px 100px';
+
+		act( () => {
+			dispatchWindowEvent( ELEMENT_STYLE_CHANGE_EVENT );
+		} );
+
+		expect( result.current.columns ).toEqual( [ 100, 100, 100, 100 ] );
+	} );
+
+	it( 'recomputes when the device mode changes', () => {
+		const mock = mockElement( { gridTemplateRows: '80px', rowGap: '8px' } );
+
+		const { result } = renderHook( () => useGridTracks( mock.element, RECT ) );
+
+		expect( result.current.rows ).toEqual( [ 80 ] );
+
+		mock.resolved.gridTemplateRows = '80px 80px';
+		mock.resolved.rowGap = '12px';
+
+		act( () => {
+			dispatchWindowEvent( DEVICE_MODE_CHANGE_EVENT );
+		} );
+
+		expect( result.current.rows ).toEqual( [ 80, 80 ] );
+		expect( result.current.rowGap ).toBe( 12 );
+	} );
 } );

package/src/hooks/use-grid-tracks.ts

@@ -1,6 +1,8 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
+import { ELEMENT_STYLE_CHANGE_EVENT } from '@elementor/editor-elements';
+import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
 
-import { parseTrackList, toPx } from '../utils/grid-outline-utils';
+import { toGridTracks } from '../utils/grid-outline-utils';
 
 export type GridTracks = {
 	columns: number[];
@@ -20,33 +22,32 @@ const EMPTY: GridTracks = {
 	borderColor: '',
 };
 
+const DEVICE_MODE_CHANGE_EVENT = 'elementor/device-mode/change';
+
 export function useGridTracks( element: HTMLElement | null, rect: DOMRect ): GridTracks {
-	return useMemo( () => {
-		if ( ! element ) {
-			return EMPTY;
-		}
+	const [ tracks, setTracks ] = useState< GridTracks >( EMPTY );
+
+	const trigger = useListenTo(
+		[ windowEvent( ELEMENT_STYLE_CHANGE_EVENT ), windowEvent( DEVICE_MODE_CHANGE_EVENT ) ],
+		() => ( {} )
+	);
 
-		const previewWindow = element.ownerDocument?.defaultView;
+	useEffect( () => {
+		const previewWindow = element?.ownerDocument?.defaultView;
 
-		if ( ! previewWindow ) {
-			return EMPTY;
+		if ( ! element || ! previewWindow ) {
+			setTracks( EMPTY );
+			return;
 		}
 
-		const computedStyle = previewWindow.getComputedStyle( element );
-
-		return {
-			columns: parseTrackList( computedStyle.gridTemplateColumns ),
-			rows: parseTrackList( computedStyle.gridTemplateRows ),
-			columnGap: toPx( computedStyle.columnGap ),
-			rowGap: toPx( computedStyle.rowGap ),
-			padding: {
-				top: toPx( computedStyle.paddingTop ),
-				right: toPx( computedStyle.paddingRight ),
-				bottom: toPx( computedStyle.paddingBottom ),
-				left: toPx( computedStyle.paddingLeft ),
-			},
-			borderColor: computedStyle.getPropertyValue( '--e-a-border-color-bold' ).trim(),
+		const frame = previewWindow.requestAnimationFrame( () => {
+			setTracks( toGridTracks( previewWindow.getComputedStyle( element ) ) );
+		} );
+
+		return () => {
+			previewWindow.cancelAnimationFrame( frame );
 		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ element, rect.width, rect.height ] );
+	}, [ element, rect.width, rect.height, trigger ] );
+
+	return tracks;
 }

package/src/utils/__tests__/grid-outline-utils.test.ts

@@ -1,5 +1,5 @@
 import { type GridTracks } from '../../hooks/use-grid-tracks';
-import { computeOutlineGeometry, parseTrackList, snapToHalfPixel, toPx } from '../grid-outline-utils';
+import { computeCellRects, parseTrackList, snapToHalfPixel, toGridTracks, toPx } from '../grid-outline-utils';
 
 function makeTracks( partial: Partial< GridTracks > = {} ): GridTracks {
 	return {
@@ -13,74 +13,77 @@ function makeTracks( partial: Partial< GridTracks > = {} ): GridTracks {
 	};
 }
 
-describe( 'computeOutlineGeometry', () => {
-	it( 'returns empty boundary lists when there are no tracks', () => {
-		const geometry = computeOutlineGeometry( makeTracks(), 100, 100 );
-
-		expect( geometry.vertical ).toEqual( [] );
-		expect( geometry.horizontal ).toEqual( [] );
+describe( 'computeCellRects', () => {
+	it( 'returns no cells when there are no tracks on either axis', () => {
+		expect( computeCellRects( makeTracks(), 100, 100 ) ).toEqual( [] );
 	} );
 
-	it( 'shifts boundaries by the padding offset on each axis', () => {
+	it( 'produces one rect per cell offset by the padding', () => {
 		const tracks = makeTracks( {
 			columns: [ 100, 100 ],
 			rows: [ 80, 80 ],
 			padding: { top: 5, right: 0, bottom: 0, left: 20 },
 		} );
 
-		const geometry = computeOutlineGeometry( tracks, 300, 300 );
-
-		expect( geometry.vertical ).toEqual( [ 20, 120, 220 ] );
-		expect( geometry.horizontal ).toEqual( [ 5, 85, 165 ] );
+		expect( computeCellRects( tracks, 300, 300 ) ).toEqual( [
+			{ x: 20, y: 5, width: 100, height: 80 },
+			{ x: 120, y: 5, width: 100, height: 80 },
+			{ x: 20, y: 85, width: 100, height: 80 },
+			{ x: 120, y: 85, width: 100, height: 80 },
+		] );
 	} );
 
-	it( 'emits both edges of every gap between tracks', () => {
+	it( 'separates cells by the gap so the gap stays empty', () => {
 		const tracks = makeTracks( {
 			columns: [ 100, 100, 100 ],
+			rows: [ 80 ],
 			columnGap: 10,
 		} );
 
-		const geometry = computeOutlineGeometry( tracks, 400, 100 );
-
-		// 0 — 100 [gap 10] 110 — 210 [gap 10] 220 — 320
-		expect( geometry.vertical ).toEqual( [ 0, 100, 110, 210, 220, 320 ] );
-	} );
-
-	it( 'collapses gap boundaries when the gap is zero', () => {
-		const tracks = makeTracks( {
-			rows: [ 50, 50, 50 ],
-			rowGap: 0,
-		} );
-
-		const geometry = computeOutlineGeometry( tracks, 100, 200 );
-
-		expect( geometry.horizontal ).toEqual( [ 0, 50, 100, 150 ] );
+		expect( computeCellRects( tracks, 400, 100 ) ).toEqual( [
+			{ x: 0, y: 0, width: 100, height: 80 },
+			{ x: 110, y: 0, width: 100, height: 80 },
+			{ x: 220, y: 0, width: 100, height: 80 },
+		] );
 	} );
 
 	it( 'handles uneven track sizes', () => {
 		const tracks = makeTracks( {
 			columns: [ 100, 200, 100 ],
+			rows: [ 50 ],
 			columnGap: 5,
 			padding: { top: 0, right: 0, bottom: 0, left: 10 },
 		} );
 
-		const geometry = computeOutlineGeometry( tracks, 500, 100 );
+		expect( computeCellRects( tracks, 500, 100 ) ).toEqual( [
+			{ x: 10, y: 0, width: 100, height: 50 },
+			{ x: 115, y: 0, width: 200, height: 50 },
+			{ x: 320, y: 0, width: 100, height: 50 },
+		] );
+	} );
 
-		// 10 — 110 [5] 115 — 315 [5] 320 — 420
-		expect( geometry.vertical ).toEqual( [ 10, 110, 115, 315, 320, 420 ] );
+	it( 'spans a single full-width cell per row when only rows are defined', () => {
+		const tracks = makeTracks( {
+			rows: [ 50, 50 ],
+			padding: { top: 8, right: 12, bottom: 6, left: 4 },
+		} );
+
+		expect( computeCellRects( tracks, 300, 120 ) ).toEqual( [
+			{ x: 4, y: 8, width: 284, height: 50 },
+			{ x: 4, y: 58, width: 284, height: 50 },
+		] );
 	} );
 
-	it( 'derives the content rect from element size and padding', () => {
+	it( 'spans a single full-height cell per column when only columns are defined', () => {
 		const tracks = makeTracks( {
+			columns: [ 100, 100 ],
 			padding: { top: 5, right: 8, bottom: 12, left: 20 },
 		} );
 
-		const geometry = computeOutlineGeometry( tracks, 300, 200 );
-
-		expect( geometry.top ).toBe( 5 );
-		expect( geometry.left ).toBe( 20 );
-		expect( geometry.right ).toBe( 292 );
-		expect( geometry.bottom ).toBe( 188 );
+		expect( computeCellRects( tracks, 300, 200 ) ).toEqual( [
+			{ x: 20, y: 5, width: 100, height: 183 },
+			{ x: 120, y: 5, width: 100, height: 183 },
+		] );
 	} );
 } );
 
@@ -140,3 +143,90 @@ describe( 'toPx', () => {
 		expect( toPx( input ) ).toBe( expected );
 	} );
 } );
+
+type ComputedStyleParts = {
+	gridTemplateColumns: string;
+	gridTemplateRows: string;
+	columnGap: string;
+	rowGap: string;
+	paddingTop: string;
+	paddingRight: string;
+	paddingBottom: string;
+	paddingLeft: string;
+	borderColor: string;
+};
+
+function mockComputedStyle( parts: Partial< ComputedStyleParts > = {} ): CSSStyleDeclaration {
+	const resolved: ComputedStyleParts = {
+		gridTemplateColumns: 'none',
+		gridTemplateRows: 'none',
+		columnGap: 'normal',
+		rowGap: 'normal',
+		paddingTop: '0px',
+		paddingRight: '0px',
+		paddingBottom: '0px',
+		paddingLeft: '0px',
+		borderColor: '',
+		...parts,
+	};
+
+	return {
+		gridTemplateColumns: resolved.gridTemplateColumns,
+		gridTemplateRows: resolved.gridTemplateRows,
+		columnGap: resolved.columnGap,
+		rowGap: resolved.rowGap,
+		paddingTop: resolved.paddingTop,
+		paddingRight: resolved.paddingRight,
+		paddingBottom: resolved.paddingBottom,
+		paddingLeft: resolved.paddingLeft,
+		getPropertyValue: ( name: string ) => ( name === '--e-a-border-color-bold' ? resolved.borderColor : '' ),
+	} as unknown as CSSStyleDeclaration;
+}
+
+describe( 'toGridTracks', () => {
+	it( 'parses resolved track lists, gaps, and padding from computed style', () => {
+		const tracks = toGridTracks(
+			mockComputedStyle( {
+				gridTemplateColumns: '100px 100px 100px',
+				gridTemplateRows: '80px 80px',
+				columnGap: '10px',
+				rowGap: '8px',
+				paddingTop: '5px',
+				paddingRight: '6px',
+				paddingBottom: '7px',
+				paddingLeft: '8px',
+			} )
+		);
+
+		expect( tracks ).toEqual( {
+			columns: [ 100, 100, 100 ],
+			rows: [ 80, 80 ],
+			columnGap: 10,
+			rowGap: 8,
+			padding: { top: 5, right: 6, bottom: 7, left: 8 },
+			borderColor: '',
+		} );
+	} );
+
+	it( 'returns empty track lists when the template is "none"', () => {
+		const tracks = toGridTracks( mockComputedStyle() );
+
+		expect( tracks.columns ).toEqual( [] );
+		expect( tracks.rows ).toEqual( [] );
+	} );
+
+	it( 'reports gap as 0 when computed style returns "normal"', () => {
+		const tracks = toGridTracks(
+			mockComputedStyle( { gridTemplateColumns: '100px 100px', columnGap: 'normal', rowGap: 'normal' } )
+		);
+
+		expect( tracks.columnGap ).toBe( 0 );
+		expect( tracks.rowGap ).toBe( 0 );
+	} );
+
+	it( 'trims the --e-a-border-color-bold CSS variable', () => {
+		const tracks = toGridTracks( mockComputedStyle( { borderColor: '  #d5d8dc  ' } ) );
+
+		expect( tracks.borderColor ).toBe( '#d5d8dc' );
+	} );
+} );