|
|
@@ -49,8 +49,10 @@ describe( 'ImageEngine', () => {
|
|
|
expect( editor.getData() ).to.equal( '<figure class="image"><img src="foo.png"></figure>' );
|
|
|
} );
|
|
|
|
|
|
- it( 'should convert with srcset attribute and add sizes attribute', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text" srcset="small.png 148w, big.png 1024w"></image>' );
|
|
|
+ it( 'should convert responsive attribute to srcset and sizes attribute', () => {
|
|
|
+ setModelData( document,
|
|
|
+ '<image src="foo.png" alt="alt text" responsive=\'{ "srcset": "small.png 148w, big.png 1024w" }\'></image>'
|
|
|
+ );
|
|
|
|
|
|
expect( editor.getData() ).to.equal(
|
|
|
'<figure class="image">' +
|
|
|
@@ -58,6 +60,68 @@ describe( 'ImageEngine', () => {
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
+
|
|
|
+ it( 'should convert responsive attribute to width, srcset and add sizes attribute', () => {
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'alt="alt text" ' +
|
|
|
+ 'responsive=\'{ "srcset": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
+ '</image>'
|
|
|
+ );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal(
|
|
|
+ '<figure class="image">' +
|
|
|
+ '<img srcset="small.png 148w, big.png 1024w" sizes="100vw" width="1024" alt="alt text" src="foo.png">' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not convert responsive attribute if is already consumed', () => {
|
|
|
+ editor.data.modelToView.on( 'addAttribute:responsive:image', ( evt, data, consumable ) => {
|
|
|
+ const parts = evt.name.split( ':' );
|
|
|
+ const consumableType = parts[ 0 ] + ':' + parts[ 1 ];
|
|
|
+ const modelImage = data.item;
|
|
|
+
|
|
|
+ consumable.consume( modelImage, consumableType );
|
|
|
+ }, { priority: 'high' } );
|
|
|
+
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'alt="alt text" ' +
|
|
|
+ 'responsive=\'{ "srcset": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
+ '</image>'
|
|
|
+ );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal(
|
|
|
+ '<figure class="image">' +
|
|
|
+ '<img alt="alt text" src="foo.png">' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not convert responsive attribute if has wrong data', () => {
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'alt="alt text" ' +
|
|
|
+ 'responsive=\'{ "foo":"bar" }\'>' +
|
|
|
+ '</image>' );
|
|
|
+
|
|
|
+ const image = document.getRoot().getChild( 0 );
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ const batch = document.batch();
|
|
|
+
|
|
|
+ batch.removeAttribute( image, 'responsive' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal(
|
|
|
+ '<figure class="image">' +
|
|
|
+ '<img alt="alt text" src="foo.png">' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
} );
|
|
|
|
|
|
describe( 'view to model', () => {
|
|
|
@@ -193,7 +257,18 @@ describe( 'ImageEngine', () => {
|
|
|
);
|
|
|
|
|
|
expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
- .to.equal( '<image alt="alt text" src="foo.png" srcset="small.png 148w, big.png 1024w"></image>' );
|
|
|
+ .to.equal( '<image alt="alt text" responsive="{"srcset":"small.png 148w, big.png 1024w"}" src="foo.png"></image>' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should convert image with srcset and width attributes', () => {
|
|
|
+ editor.setData(
|
|
|
+ '<figure class="image">' +
|
|
|
+ '<img src="foo.png" alt="alt text" srcset="small.png 148w, big.png 1024w" width="1024" />' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+
|
|
|
+ expect( getModelData( document, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<image alt="alt text" responsive="{"srcset":"small.png 148w, big.png 1024w","width":"1024"}" src="foo.png"></image>' );
|
|
|
} );
|
|
|
|
|
|
it( 'should ignore sizes attribute', () => {
|
|
|
@@ -204,7 +279,7 @@ describe( 'ImageEngine', () => {
|
|
|
);
|
|
|
|
|
|
expect( getModelData( document, { withoutSelection: true } ) )
|
|
|
- .to.equal( '<image alt="alt text" src="foo.png" srcset="small.png 148w, big.png 1024w"></image>' );
|
|
|
+ .to.equal( '<image alt="alt text" responsive="{"srcset":"small.png 148w, big.png 1024w"}" src="foo.png"></image>' );
|
|
|
} );
|
|
|
|
|
|
describe( 'should autohoist images', () => {
|
|
|
@@ -385,8 +460,13 @@ describe( 'ImageEngine', () => {
|
|
|
);
|
|
|
} );
|
|
|
|
|
|
- it( 'should convert srcset attribute to srcset and sizes', () => {
|
|
|
- setModelData( document, '<image src="foo.png" alt="alt text" srcset="small.png 148w, big.png 1024w"></image>' );
|
|
|
+ it( 'should convert responsive attribute to srcset and sizes', () => {
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'alt="alt text" ' +
|
|
|
+ 'responsive=\'{ "srcset":"small.png 148w, big.png 1024w" }\'>' +
|
|
|
+ '</image>' );
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
'<figure class="image ck-widget" contenteditable="false">' +
|
|
|
@@ -395,14 +475,51 @@ describe( 'ImageEngine', () => {
|
|
|
);
|
|
|
} );
|
|
|
|
|
|
- it( 'should remove sizes attribute when srcset attribute is removed', () => {
|
|
|
- setModelData( document, '<image src="foo.png" srcset="small.png 148w, big.png 1024w"></image>' );
|
|
|
+ it( 'should not convert responsive attribute if has wrong data', () => {
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'alt="alt text" ' +
|
|
|
+ 'responsive=\'{ "foo":"bar" }\'>' +
|
|
|
+ '</image>' );
|
|
|
+
|
|
|
+ const image = document.getRoot().getChild( 0 );
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ const batch = document.batch();
|
|
|
+
|
|
|
+ batch.removeAttribute( image, 'responsive' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<figure class="image ck-widget" contenteditable="false">' +
|
|
|
+ '<img alt="alt text" src="foo.png"></img>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should convert responsive attribute to srcset, width and sizes', () => {
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'alt="alt text" ' +
|
|
|
+ 'responsive=\'{ "srcset":"small.png 148w, big.png 1024w", "width":"1024" }\'>' +
|
|
|
+ '</image>' );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<figure class="image ck-widget" contenteditable="false">' +
|
|
|
+ '<img alt="alt text" sizes="100vw" src="foo.png" srcset="small.png 148w, big.png 1024w" width="1024"></img>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should remove sizes and srcsset attribute when responsive attribute is removed', () => {
|
|
|
+ setModelData( document, '<image src="foo.png" responsive=\'{ "srcset": "small.png 148w, big.png 1024w" }\'></image>' );
|
|
|
const image = document.getRoot().getChild( 0 );
|
|
|
|
|
|
document.enqueueChanges( () => {
|
|
|
const batch = document.batch();
|
|
|
|
|
|
- batch.removeAttribute( image, 'srcset' );
|
|
|
+ batch.removeAttribute( image, 'responsive' );
|
|
|
} );
|
|
|
|
|
|
expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
@@ -411,6 +528,52 @@ describe( 'ImageEngine', () => {
|
|
|
'</figure>'
|
|
|
);
|
|
|
} );
|
|
|
+
|
|
|
+ it( 'should remove width, sizes and srcsset attribute when responsive attribute is removed', () => {
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'responsive=\'{ "srcset": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
+ '</image>'
|
|
|
+ );
|
|
|
+ const image = document.getRoot().getChild( 0 );
|
|
|
+
|
|
|
+ document.enqueueChanges( () => {
|
|
|
+ const batch = document.batch();
|
|
|
+
|
|
|
+ batch.removeAttribute( image, 'responsive' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<figure class="image ck-widget" contenteditable="false">' +
|
|
|
+ '<img src="foo.png"></img>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should not convert responsive attribute if is already consumed', () => {
|
|
|
+ editor.editing.modelToView.on( 'addAttribute:responsive:image', ( evt, data, consumable ) => {
|
|
|
+ const parts = evt.name.split( ':' );
|
|
|
+ const consumableType = parts[ 0 ] + ':' + parts[ 1 ];
|
|
|
+ const modelImage = data.item;
|
|
|
+
|
|
|
+ consumable.consume( modelImage, consumableType );
|
|
|
+ }, { priority: 'high' } );
|
|
|
+
|
|
|
+ setModelData( document,
|
|
|
+ '<image ' +
|
|
|
+ 'src="foo.png" ' +
|
|
|
+ 'alt="alt text" ' +
|
|
|
+ 'responsive=\'{ "srcset": "small.png 148w, big.png 1024w", "width": "1024" }\'>' +
|
|
|
+ '</image>'
|
|
|
+ );
|
|
|
+
|
|
|
+ expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
|
|
|
+ '<figure class="image ck-widget" contenteditable="false">' +
|
|
|
+ '<img alt="alt text" src="foo.png"></img>' +
|
|
|
+ '</figure>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
} );
|
|
|
} );
|
|
|
} );
|