Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit b084de5

Browse files
ReinmarReinmar
authored
Merge pull request #308 from ckeditor/t/306
Fix: Initial resize of a side image with no width predefined now gives correct percentage values. Closes #306.
2 parents f1e36bc + 90cee77 commit b084de5

File tree

1 file changed

+116
-23
lines changed

1 file changed

+116
-23
lines changed

‎tests/imageresize.js

Lines changed: 116 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -44,33 +44,19 @@ describe( 'ImageResize', () => {
4444
absoluteContainer.remove();
4545
} );
4646

47-
beforeEach( () => {
48-
editorElement = document.createElement( 'div' );
49-
50-
absoluteContainer.appendChild( editorElement );
51-
52-
return ClassicEditor
53-
.create( editorElement, {
54-
plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
55-
image: {
56-
resizeUnit: 'px'
57-
}
58-
} )
59-
.then( newEditor => {
60-
editor = newEditor;
61-
view = editor.editing.view;
62-
viewDocument = view.document;
63-
widget = viewDocument.getRoot().getChild( 1 );
64-
} );
65-
} );
66-
6747
afterEach( () => {
68-
editorElement.remove();
48+
if ( editorElement ) {
49+
editorElement.remove();
50+
}
6951

70-
return editor.destroy();
52+
if ( editor ) {
53+
return editor.destroy();
54+
}
7155
} );
7256

7357
describe( 'conversion', () => {
58+
beforeEach( () => createEditor() );
59+
7460
it( 'upcasts 100px width correctly', () => {
7561
editor.setData( `<figure class="image" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
7662

@@ -99,6 +85,8 @@ describe( 'ImageResize', () => {
9985
} );
10086

10187
describe( 'schema', () => {
88+
beforeEach( () => createEditor() );
89+
10290
it( 'allows the width attribute', () => {
10391
expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true;
10492
} );
@@ -109,6 +97,8 @@ describe( 'ImageResize', () => {
10997
} );
11098

11199
describe( 'command', () => {
100+
beforeEach( () => createEditor() );
101+
112102
it( 'defines the imageResize command', () => {
113103
expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand );
114104
} );
@@ -180,6 +170,8 @@ describe( 'ImageResize', () => {
180170
} );
181171

182172
describe( 'visual resizers', () => {
173+
beforeEach( () => createEditor() );
174+
183175
beforeEach( () => {
184176
setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
185177

@@ -202,7 +194,6 @@ describe( 'ImageResize', () => {
202194
} );
203195

204196
it( 'is shown when image is focused', () => {
205-
const widget = viewDocument.getRoot().getChild( 1 );
206197
const allResizers = editor.ui.getEditableElement().querySelectorAll( '.ck-widget__resizer__handle' );
207198
const domEventDataMock = {
208199
target: widget,
@@ -221,6 +212,8 @@ describe( 'ImageResize', () => {
221212
} );
222213

223214
describe( 'standard image resizing', () => {
215+
beforeEach( () => createEditor() );
216+
224217
beforeEach( () => {
225218
setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
226219

@@ -321,6 +314,8 @@ describe( 'ImageResize', () => {
321314
} );
322315

323316
describe( 'side image resizing', () => {
317+
beforeEach( () => createEditor() );
318+
324319
beforeEach( () => {
325320
setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
326321

@@ -435,7 +430,79 @@ describe( 'ImageResize', () => {
435430
}
436431
} );
437432

433+
describe( 'percent resizing', () => {
434+
beforeEach( () => createEditor( {
435+
plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ]
436+
} ) );
437+
438+
describe( 'standard image', () => {
439+
beforeEach( () => {
440+
setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
441+
442+
widget = viewDocument.getRoot().getChild( 1 );
443+
} );
444+
445+
it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
446+
expectedWidth: 16,
447+
modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
448+
pointerOffset: {
449+
x: 10,
450+
y: -10
451+
},
452+
resizerPosition: 'bottom-left'
453+
} ) );
454+
455+
it( 'enlarges correctly with right-bottom handler', generateResizeTest( {
456+
expectedWidth: 22,
457+
modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
458+
pointerOffset: {
459+
x: 0,
460+
y: 5
461+
},
462+
resizerPosition: 'bottom-right'
463+
} ) );
464+
465+
it( 'enlarges correctly an image with unsupported width unit', async () => {
466+
setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }" width="50pt"></image>]` );
467+
468+
widget = viewDocument.getRoot().getChild( 1 );
469+
470+
await generateResizeTest( {
471+
expectedWidth: 15,
472+
modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
473+
pointerOffset: {
474+
x: 0,
475+
y: 5
476+
},
477+
resizerPosition: 'bottom-right'
478+
} )();
479+
} );
480+
} );
481+
482+
describe( 'side image', () => {
483+
beforeEach( () => {
484+
setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
485+
486+
view = editor.editing.view;
487+
viewDocument = view.document;
488+
widget = viewDocument.getRoot().getChild( 1 );
489+
} );
490+
491+
it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
492+
expectedWidth: 18,
493+
modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
494+
pointerOffset: {
495+
x: 10,
496+
y: -10
497+
},
498+
resizerPosition: 'bottom-left'
499+
} ) );
500+
} );
501+
} );
502+
438503
describe( 'undo integration', () => {
504+
beforeEach( () => createEditor() );
505+
439506
beforeEach( () => {
440507
setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
441508

@@ -465,6 +532,8 @@ describe( 'ImageResize', () => {
465532
} );
466533

467534
describe( 'table integration', () => {
535+
beforeEach( () => createEditor() );
536+
468537
beforeEach( () => {
469538
setData( editor.model,
470539
'<table>' +
@@ -488,6 +557,8 @@ describe( 'ImageResize', () => {
488557
} );
489558

490559
describe( 'srcset integration', () => {
560+
beforeEach( () => createEditor() );
561+
491562
// The image is 96x96 pixels.
492563
const imageBaseUrl = '/assets/sample.png';
493564
const getModel = () => editor.model.document.getRoot().getChild( 0 );
@@ -561,6 +632,8 @@ describe( 'ImageResize', () => {
561632

562633
// TODO move to Resizer tests.
563634
describe( 'Resizer', () => {
635+
beforeEach( () => createEditor() );
636+
564637
it( 'uses rounded (int) values', async () => {
565638
setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
566639

@@ -688,4 +761,24 @@ describe( 'ImageResize', () => {
688761
editor.editing.view.focus();
689762
editor.ui.focusTracker.isFocused = true;
690763
}
764+
765+
function createEditor( config ) {
766+
editorElement = document.createElement( 'div' );
767+
768+
absoluteContainer.appendChild( editorElement );
769+
770+
return ClassicEditor
771+
.create( editorElement, config || {
772+
plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
773+
image: {
774+
resizeUnit: 'px'
775+
}
776+
} )
777+
.then( newEditor => {
778+
editor = newEditor;
779+
view = editor.editing.view;
780+
viewDocument = view.document;
781+
widget = viewDocument.getRoot().getChild( 1 );
782+
} );
783+
}
691784
} );

0 commit comments

Comments
 (0)