Current path: home/webdevt/www/wdp/wp-content/plugins/jetpack-boost/app/modules/optimizations/image-cdn/src/
?? Go up: /home/webdevt/www/wdp/wp-content/plugins/jetpack-boost/app/modules/optimizations/image-cdn
import {
calculateTargetSize,
dynamicSrcset,
findClosestImageSize,
getImageSizeFromUrl,
isSizeReusable,
parseImageSize,
} from './srcset';
function createImageSize( resize: string, mq: string ) {
const url = new URL( 'https://i0.wp.com/example.com/image.jpg' );
const [ width, height ] = resize.split( ',' ).map( item => parseInt( item, 10 ) );
const size = calculateTargetSize( { width, height } );
url.searchParams.set( 'resize', `${ size.width },${ size.height }` );
return `${ url } ${ mq }`;
}
function setBoundingRect( img: HTMLImageElement, width: number, height: number ) {
Object.defineProperty( img, 'getBoundingClientRect', {
value: () => ( {
width,
height,
top: 0,
right: width,
bottom: height,
left: 0,
} ),
writable: true,
} );
}
describe( 'parse image resize param', () => {
it( 'should parse valid resize param', () => {
expect( parseImageSize( '100,200' ) ).toEqual( { width: 100, height: 200 } );
} );
it( 'should return null for invalid resize param', () => {
expect( parseImageSize( 'invalid' ) ).toBeNull();
} );
} );
describe( 'getImageSizeFromUrl', () => {
it( 'should extract image size from URL', () => {
const url = 'https://i0.wp.com/example.com/image.jpg?resize=100,200';
expect( getImageSizeFromUrl( url ) ).toEqual( { width: 100, height: 200 } );
} );
it( 'should return null if resize param is missing', () => {
const url = 'https://i0.wp.com/example.com/image.jpg';
expect( getImageSizeFromUrl( url ) ).toBeNull();
} );
} );
describe( 'calculateTargetSize', () => {
it( 'should calculate target size based on bounding rect and dpr', () => {
const rect: DOMRect = {
width: 500,
height: 250,
x: 0,
y: 0,
top: 0,
right: 0,
bottom: 0,
left: 0,
toJSON: () => ( {} ),
};
window.devicePixelRatio = 2;
expect( calculateTargetSize( rect ) ).toEqual( { width: 1000, height: 500 } );
} );
it( 'should round up the target size to the nearest 10', () => {
const ratio = 600 / 200;
const rect: DOMRect = {
width: 600 - 9,
height: ( 600 - 9 ) / ratio, // = 197px
x: 0,
y: 0,
top: 0,
right: 0,
bottom: 0,
left: 0,
toJSON: () => ( {} ),
};
window.devicePixelRatio = 1;
expect( calculateTargetSize( rect ) ).toEqual( {
width: 600,
height: Math.ceil( 600 / ratio ),
} );
window.devicePixelRatio = 2;
expect( calculateTargetSize( rect ) ).toEqual( {
width: 1190,
height: Math.ceil( 1190 / ratio ),
} );
} );
} );
describe( 'isSizeReusable', () => {
it( 'should return true if the target width is close to the width', () => {
expect( isSizeReusable( 100, 100 ) ).toBe( true );
expect( isSizeReusable( 90, 100 ) ).toBe( true );
expect( isSizeReusable( 51, 100 ) ).toBe( true );
expect( isSizeReusable( 901, 1000 ) ).toBe( true );
expect( isSizeReusable( 50, 100 ) ).toBe( false );
expect( isSizeReusable( 101, 100 ) ).toBe( false );
expect( isSizeReusable( 150, 100 ) ).toBe( false );
expect( isSizeReusable( 900, 1000 ) ).toBe( false );
} );
} );
describe( 'findClosestImageSize', () => {
beforeEach( () => {
window.devicePixelRatio = 1;
} );
const srcset = [
createImageSize( '100,50', '200w' ),
createImageSize( '400,250', '800w' ),
createImageSize( '1400,700', '2400w' ),
];
it( 'should return undefined if the urls are invalid', () => {
expect( findClosestImageSize( [ 'foo.com', 'bar.com' ], 500 ) ).toBeUndefined();
} );
it( "should find the closest image that's larger than the target width", () => {
expect( findClosestImageSize( srcset, 51 ) ).toEqual( {
url: new URL( srcset[ 0 ].split( ' ' )[ 0 ] ),
width: 100,
height: 50,
} );
expect( findClosestImageSize( srcset, 1300 ) ).toEqual( {
url: new URL( srcset[ 2 ].split( ' ' )[ 0 ] ),
width: 1400,
height: 700,
} );
} );
it( 'should find the closest image even if the srcset is unordered', () => {
const unorderedSrcset = [
createImageSize( '1400,700', '1400w' ),
createImageSize( '100,50', '100w' ),
createImageSize( '400,250', '400w' ),
];
expect( findClosestImageSize( unorderedSrcset, 1300 ) ).toEqual( {
url: new URL( unorderedSrcset[ 0 ].split( ' ' )[ 0 ] ),
width: 1400,
height: 700,
} );
expect( findClosestImageSize( unorderedSrcset, 51 ) ).toEqual( {
url: new URL( unorderedSrcset[ 1 ].split( ' ' )[ 0 ] ),
width: 100,
height: 50,
} );
expect( findClosestImageSize( unorderedSrcset, 351 ) ).toEqual( {
url: new URL( unorderedSrcset[ 2 ].split( ' ' )[ 0 ] ),
width: 400,
height: 250,
} );
} );
it( "shouldn't find closest image if the closest image isn't close enough in size", () => {
expect( findClosestImageSize( srcset, 50 ) ).toBeUndefined();
expect( findClosestImageSize( srcset, 110 ) ).toBeUndefined();
expect( findClosestImageSize( srcset, 1100 ) ).toBeUndefined();
expect( findClosestImageSize( srcset, 1200 ) ).toBeUndefined();
} );
} );
function untrackedDynamicSrcset( img: HTMLImageElement ) {
dynamicSrcset( img );
img.srcset = img.srcset.replaceAll( /&_jb=\w+/gim, '' );
}
describe( 'dynamicSrcset', () => {
let img: HTMLImageElement;
it( '[manual validation] should create a new srcset entry for the target size', () => {
window.innerWidth = 9999;
window.devicePixelRatio = 1;
const manualValidationImg = document.createElement( 'img' );
manualValidationImg.setAttribute( 'src', 'https://i0.wp.com/example.com/image.jpg' );
manualValidationImg.setAttribute(
'srcset',
`https://i0.wp.com/example.com/image.jpg?resize=100%2C200 1000w, https://i0.wp.com/example.com/image.jpg?resize=400%2C200 400w, https://i0.wp.com/example.com/image.jpg?resize=1400%2C700 1400w`
);
manualValidationImg.setAttribute( 'width', '800' );
manualValidationImg.setAttribute( 'height', '400' );
setBoundingRect( manualValidationImg, 800, 400 );
untrackedDynamicSrcset( manualValidationImg );
expect( manualValidationImg.srcset ).toContain(
`https://i0.wp.com/example.com/image.jpg?resize=800%2C400 9999w`
);
window.devicePixelRatio = 2;
untrackedDynamicSrcset( manualValidationImg );
expect( manualValidationImg.srcset ).toContain(
`https://i0.wp.com/example.com/image.jpg?resize=1600%2C800 19998w`
);
} );
const testDevicePixelRatios = [ 1, 1.5 ];
testDevicePixelRatios.forEach( devicePixelRatio => {
const w = ( value: number ) => `${ value * devicePixelRatio }w`;
describe( `with devicePixelRatio ${ devicePixelRatio }`, () => {
beforeEach( () => {
window.devicePixelRatio = devicePixelRatio;
window.innerWidth = 5000;
img = document.createElement( 'img' );
img.src = 'https://i0.wp.com/example.com/image.jpg?resize=4444%2C2222';
const srcset = [
createImageSize( '100,50', '100w' ),
createImageSize( '400,250', '400w' ),
createImageSize( '1400,700', '1400w' ),
];
img.srcset = srcset.join( ',' );
img.setAttribute( 'width', '1000' );
img.setAttribute( 'height', '500' );
// Mocking the bounding rect of the image
setBoundingRect( img, 1000, 500 );
} );
it( 'srcset should include all original image sizes', () => {
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain( createImageSize( '100,50', '100w' ) );
expect( img.srcset ).toContain( createImageSize( '400,250', '400w' ) );
expect( img.srcset ).toContain( createImageSize( '1400,700', '1400w' ) );
} );
it( 'should create a new srcset entry for the target size', () => {
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain( createImageSize( '1000,500', w( window.innerWidth ) ) );
} );
it( 'should reuse existing srcset entry if the target size is close enough', () => {
setBoundingRect( img, 396, 248 );
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain( createImageSize( '400,250', w( window.innerWidth ) ) );
} );
it( "shouldn't upscale the image when reusing an srcset entry", () => {
setBoundingRect( img, 420, 260 );
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain( createImageSize( '420,260', w( window.innerWidth ) ) );
} );
it( 'should not update attributes if conditions are not met', () => {
const image = document.createElement( 'img' );
image.src = 'https://i0.wp.com/example.com/image.jpg';
untrackedDynamicSrcset( image );
expect( image.srcset ).toBe( '' );
expect( image.sizes ).toBe( '' );
} );
} );
} );
it( 'should reuse existing src image if the target size is close enough', () => {
window.innerWidth = 5000;
window.devicePixelRatio = 1;
setBoundingRect( img, 4400, 2200 );
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain(
`https://i0.wp.com/example.com/image.jpg?resize=4444%2C2222 5000w`
);
window.devicePixelRatio = 1.5;
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain(
`https://i0.wp.com/example.com/image.jpg?resize=6600%2C3300 7500w`
);
} );
it( 'should reuse existing src image after accounting for DPR > 1', () => {
window.innerWidth = 5000;
window.devicePixelRatio = 1;
// Fixed DPR 1 sizes as they'd appear in DOM
const srcset = [
createImageSize( '100,50', '100w' ),
createImageSize( '400,250', '400w' ),
createImageSize( '1400,700', '1400w' ),
];
// Pretend this is a dense display rendering a small image
window.devicePixelRatio = 3;
img.srcset = srcset.join( ',' );
setBoundingRect( img, 460, 230 );
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain(
`https://i0.wp.com/example.com/image.jpg?resize=1400%2C700 15000w`
);
setBoundingRect( img, 500, 250 );
untrackedDynamicSrcset( img );
expect( img.srcset ).toContain(
`https://i0.wp.com/example.com/image.jpg?resize=1500%2C750 15000w`
);
} );
} );