diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap
index 33621388..84f6b010 100644
--- a/cypress/integration/ui/__snapshots__/scenario.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario.js.snap
@@ -10,19 +10,7 @@ exports[`use various parts of svg-edit > check tool_source #0`] = `
y="480"
viewBox="0 0 640 480"
>
-
- Layer 1
-
-
+ Layer 1
`;
@@ -37,22 +25,11 @@ exports[`use various parts of svg-edit > check tool_fhpath #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
`;
@@ -68,27 +45,17 @@ exports[`use various parts of svg-edit > check tool_text #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_clone #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_clone #0`] = `
fill="#000000"
stroke="#000000"
stroke-width="0"
- x="136"
- y="107"
+ x="66"
+ y="55"
font-size="24"
font-family="Serif"
text-anchor="middle"
@@ -176,27 +133,17 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_italic #0`] = `
fill="#000000"
stroke="#000000"
stroke-width="0"
- x="136"
- y="107"
+ x="66"
+ y="55"
font-size="24"
font-family="Serif"
text-anchor="middle"
@@ -239,27 +186,17 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
x="640"
y="480"
viewBox="0 0 640 480"
+ fill-opacity="1"
+ stroke-opacity="1"
>
Layer 1
-
check tool_bold #0`] = `
fill="#000000"
stroke="#000000"
stroke-width="0"
- x="136"
- y="107"
+ x="66"
+ y="55"
font-size="24"
font-family="Serif"
text-anchor="middle"
@@ -292,7 +229,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
`;
-exports[`use various parts of svg-edit > check change color #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate #0`] = `
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_font_size #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stroke_width #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color #0`] = `
+
`;
-exports[`use various parts of svg-edit > check tool_star #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = `
`;
-exports[`use various parts of svg-edit > check tool_polygon #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = `
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_delete #0`] = `
+
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_font_family #0`] = `
+
`;
diff --git a/cypress/integration/ui/__snapshots__/scenario1.js.snap b/cypress/integration/ui/__snapshots__/scenario1.js.snap
index ee4d81cd..5a8ea21f 100644
--- a/cypress/integration/ui/__snapshots__/scenario1.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario1.js.snap
@@ -14,44 +14,6 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = `
`;
-exports[`use all parts of svg-edit > check tool_line #0`] = `
-
-`;
-
exports[`use all parts of svg-edit > check tool_shape #0`] = `
-`;
-
-exports[`use all parts of svg-edit > check tool_rect_square #0`] = `
-
`;
@@ -217,75 +57,23 @@ exports[`use all parts of svg-edit > check tool_image #0`] = `
>
Layer 1
-
-
-
-
check tool_line_clone #0`] = `
`;
-exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`] = `
+exports[`use all parts of svg-edit > check tool_line_bring_to_back #0`] = `
`;
+
+exports[`use all parts of svg-edit > check tool_line_bring_to_front #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_x_y_coordinate #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_stroke_width #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_stoke_color #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_line_align_to_page #0`] = `
+
+`;
diff --git a/cypress/integration/ui/__snapshots__/scenario6.js.snap b/cypress/integration/ui/__snapshots__/scenario6.js.snap
new file mode 100644
index 00000000..ab739f1c
--- /dev/null
+++ b/cypress/integration/ui/__snapshots__/scenario6.js.snap
@@ -0,0 +1,605 @@
+exports[`use all parts of svg-edit > check tool_source_set #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_clone #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_change_rotation #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_change_blur #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_change_opacity #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_bring_to_back #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_bring_to_front #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_delete #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_align_to_page #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_change_stroke_width #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_change_stoke_fill_color #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_polygon_change_sides #0`] = `
+
+`;
diff --git a/cypress/integration/ui/__snapshots__/scenario7.js.snap b/cypress/integration/ui/__snapshots__/scenario7.js.snap
new file mode 100644
index 00000000..8f3a7b28
--- /dev/null
+++ b/cypress/integration/ui/__snapshots__/scenario7.js.snap
@@ -0,0 +1,659 @@
+exports[`use all parts of svg-edit > check tool_source_set #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_clone #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_rotation #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_blur #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_opacity #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_bring_to_back #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_bring_to_front #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_delete #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_align_to_page #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_stroke_width #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_stoke_fill_color #0`] = `
+
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_sides #0`] = `
+
+`;
diff --git a/cypress/integration/ui/scenario.js b/cypress/integration/ui/scenario.js
index df1eec6a..51424509 100644
--- a/cypress/integration/ui/scenario.js
+++ b/cypress/integration/ui/scenario.js
@@ -18,7 +18,6 @@ describe('use various parts of svg-edit', function () {
.type(``, { force: true, parseSpecialCharSequences: false });
cy.get('#tool_source_save').click({ force: true });
@@ -27,7 +26,7 @@ describe('use various parts of svg-edit', function () {
it('check tool_fhpath', function () {
cy.get('#tool_fhpath')
.click({ force: true });
- cy.get('#rect')
+ cy.get('#svgcontent')
.trigger('mousemove', 200, 200, { force: true })
.trigger('mousedown', 200, 200, { force: true })
.trigger('mousemove', 20, 20, { force: true })
@@ -37,7 +36,7 @@ describe('use various parts of svg-edit', function () {
it('check tool_text', function () {
cy.get('#tool_text')
.click({ force: true });
- cy.get('#rect')
+ cy.get('#svgcontent')
.trigger('mousedown', 46, 35, { force: true })
.trigger('mouseup', { force: true });
// svgedit use the #text text field to capture the text
@@ -63,11 +62,49 @@ describe('use various parts of svg-edit', function () {
.click({ force: true });
testSnapshot();
});
- it('check change color', function () {
+ it('check tool_text_change_x_y_coordinate', function () {
+ cy.get('#svg_2').click({ force: true });
+ for(let n = 0; n < 25; n ++){
+ cy.get('#selected_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ for(let n = 0; n < 25; n ++){
+ cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_font_size', function () {
cy.get('#svg_1').click({ force: true });
- cy.get('[data-rgb="#ffff00"]')
+ for(let n = 0; n < 10; n ++){
+ cy.get('#font_size').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_stroke_width', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
.click({ force: true });
- testSnapshot();
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_stoke_fill_color', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('.QuickColor').eq(51).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('#Ok').eq(0).click({ force: true });
+ cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true });
+ cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('.QuickColor').eq(3).click({ force: true });
+ cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('#Ok').eq(0).click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_text_anchor_start', function () {
cy.get('#svg_1').click({ force: true });
@@ -87,22 +124,67 @@ describe('use various parts of svg-edit', function () {
.click({ force: true });
testSnapshot();
});
- it('check tool_star', function () {
- cy.get('#tool_star')
- .click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousedown', 300, 150, { force: true })
- .trigger('mousemove', 300, 250, { force: true })
- .trigger('mouseup', { force: true });
- testSnapshot();
+ it('check tool_text_change_rotation', function () {
+ cy.get('#svg_2').click({ force: true });
+ for(let n = 0; n < 5; n ++){
+ cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
});
- it('check tool_polygon', function () {
- cy.get('#tool_polygon')
+ it('check tool_text_change_blur', function () {
+ cy.get('#svg_2').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_opacity', function () {
+ cy.get('#svg_2').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_align_to_page', function () {
+ cy.get('#svg_2').click({ force: true });
+ cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+ cy.get('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
.click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousedown', 350, 250, { force: true })
- .trigger('mousemove', 350, 370, { force: true })
- .trigger('mouseup', { force: true });
- testSnapshot();
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_class', function () {
+ cy.get('#svg_2').click({ force: true });
+ cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+ .type('svg_2_class{enter}', { force: true });
+ cy.get('#svg_2')
+ .should('satisfy', ($el) => {
+ const classList = Array.from($el[0].classList);
+ return classList.includes('svg_2_class');
+ });
+ });
+ it('check tool_text_change_id', function () {
+ cy.get('#svg_2').click({ force: true }).click({ force: true });
+ cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+ .type('_id{enter}', { force: true });
+ cy.get('#svg_2_id')
+ .should('satisfy', ($el) => {
+ const classList = Array.from($el[0].classList);
+ return classList.includes('svg_2_class');
+ });
+ });
+ it('check tool_text_delete', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_delete').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_text_change_font_family', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#tool_font_family').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+ cy.get('#tool_font_family').find('se-list-item').eq(6).shadow().find('elix-option').eq(0)
+ .click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
});
});
diff --git a/cypress/integration/ui/scenario1.js b/cypress/integration/ui/scenario1.js
index 9813aed0..a6567cc0 100644
--- a/cypress/integration/ui/scenario1.js
+++ b/cypress/integration/ui/scenario1.js
@@ -23,18 +23,6 @@ describe('use all parts of svg-edit', function () {
cy.get('#tool_source_save').click({ force: true });
testSnapshot();
});
- it('check tool_line', function () {
- cy.get('#tool_line')
- .click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousemove', 200, 200, { force: true })
- .trigger('mousedown', 200, 200, { force: true })
- .trigger('mousemove', 20, 20, { force: true })
- .trigger('mouseup', { force: true });
- // cy.get('#angle').click({ force: true }).invoke('attr', 'value', '45');
- //.shadow().get('elix-number-spin-box').shadow().find('plain-repeat-button-0').click({ force: true });
- cy.get('#svgcontent').toMatchSnapshot();
- });
it('check tool_shape', function () {
cy.get('#tool_shapelib').shadow().find('.overall').eq(0).click({ force: true });
cy.get('[data-shape="heart"]').click({ force: true });
@@ -49,30 +37,7 @@ describe('use all parts of svg-edit', function () {
.trigger('mouseup', { force: true });
cy.get('#svgcontent').toMatchSnapshot();
});
- it('check tool_rect_square', function () {
- cy.get('#tool_rect').click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousedown', 100, -60, { force: true })
- .trigger('mousemove', 250, 60, { force: true })
- .trigger('mouseup', { force: true });
- cy.get('#tool_square').click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousedown', 250, -60, { force: true })
- .trigger('mousemove', 430, 120, { force: true })
- .trigger('mouseup', { force: true });
- cy.get('#tool_fhrect')
- .click({ force: true });
- cy.get('#svgcontent')
- .trigger('mousedown', 20, 80, { force: true })
- .trigger('mousemove', 120, 80, { force: true })
- .trigger('mousemove', 120, 180, { force: true })
- .trigger('mousemove', 20, 180, { force: true })
- .trigger('mousemove', 20, 80, { force: true })
- .trigger('mouseup', 20, 80, { force: true });
- cy.get('#svgcontent').toMatchSnapshot();
- });
it('check tool_image', function () {
-
cy.get('#tool_image').click({ force: true });
cy.get('#svgcontent')
.trigger('mousedown', 100, 100, { force: true })
@@ -87,5 +52,4 @@ describe('use all parts of svg-edit', function () {
});
cy.get('#svgcontent').toMatchSnapshot();
});
-
});
diff --git a/cypress/integration/ui/scenario5.js b/cypress/integration/ui/scenario5.js
index 4fd22c95..efa7eb78 100644
--- a/cypress/integration/ui/scenario5.js
+++ b/cypress/integration/ui/scenario5.js
@@ -94,7 +94,17 @@ describe('use all parts of svg-edit', function () {
cy.get('#tool_clone').click({ force: true });
cy.get('#svgcontent').toMatchSnapshot();
});
- it('check tool_fhrect_change_x_y_coordinate', function () {
+ it('check tool_line_bring_to_back', function () {
+ cy.get('#svg_2').click({ force: true });
+ cy.get('#tool_move_bottom').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_line_bring_to_front', function () {
+ cy.get('#svg_2').click({ force: true });
+ cy.get('#tool_move_top').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_line_change_x_y_coordinate', function () {
cy.get('#svg_2').click({ force: true });
for(let n = 0; n < 25; n ++){
cy.get('#line_x1').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
@@ -114,4 +124,30 @@ describe('use all parts of svg-edit', function () {
}
cy.get('#svgcontent').toMatchSnapshot();
});
+ it('check tool_line_change_stroke_width', function () {
+ cy.get('#svg_2').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_line_change_stoke_color', function () {
+ cy.get('#svg_3').click({ force: true });
+ cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('.QuickColor').eq(9).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('#Ok').eq(0).click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_line_align_to_page', function () {
+ cy.get('#svg_3').click({ force: true });
+ cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+ cy.get('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
+ .click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
});
diff --git a/cypress/integration/ui/scenario6.js b/cypress/integration/ui/scenario6.js
new file mode 100644
index 00000000..1f6e749d
--- /dev/null
+++ b/cypress/integration/ui/scenario6.js
@@ -0,0 +1,150 @@
+import {
+ visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
+
+const testSnapshot = () => {
+ cy.get('#svgcontent').cleanSnapshot();
+};
+
+describe('use all parts of svg-edit', function () {
+ before(() => {
+ visitAndApproveStorage();
+ });
+
+ it('check tool_source_set', function () {
+ cy.get('#tool_source').click({ force: true });
+ cy.get('#svg_source_textarea')
+ .type('{selectall}', { force: true })
+ .type(``, { force: true, parseSpecialCharSequences: false });
+ cy.get('#tool_source_save').click({ force: true });
+ testSnapshot();
+ });
+ it('check tool_polygon', function () {
+ cy.get('#tool_polygon')
+ .click({ force: true });
+ cy.get('#svgcontent')
+ .trigger('mousedown', 325, 250, { force: true })
+ .trigger('mousemove', 325, 345, { force: true })
+ .trigger('mouseup', { force: true });
+ testSnapshot();
+ });
+ it('check tool_polygon_clone', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#tool_clone').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_change_class', function () {
+ cy.get('#svg_2').click({ force: true });
+ cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+ .type('svg_2_class{enter}', { force: true });
+ cy.get('#svg_2')
+ .should('satisfy', ($el) => {
+ const classList = Array.from($el[0].classList);
+ return classList.includes('svg_2_class');
+ });
+ });
+ it('check tool_polygon_change_id', function () {
+ cy.get('#svg_2').click({ force: true }).click({ force: true });
+ cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+ .type('_id{enter}', { force: true });
+ cy.get('#svg_2_id')
+ .should('satisfy', ($el) => {
+ const classList = Array.from($el[0].classList);
+ return classList.includes('svg_2_class');
+ });
+ });
+ it('check tool_polygon_change_rotation', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ for(let n = 0; n < 5; n ++){
+ cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_change_blur', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_change_opacity', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_bring_to_back', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_move_bottom').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_bring_to_front', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_move_top').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_delete', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_delete').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_align_to_page', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+ cy.get('#tool_position').find('se-list-item').eq(0).shadow().find('elix-option').eq(0)
+ .click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ /* it('check tool_polygon_change_x_y_coordinate', function () {
+ cy.get('#svg_1').click({ force: true });
+ for(let n = 0; n < 25; n ++){
+ cy.get('#selected_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ for(let n = 0; n < 25; n ++){
+ cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ }); */
+ it('check tool_polygon_change_stroke_width', function () {
+ cy.get('#svg_1').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_change_stoke_fill_color', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('.QuickColor').eq(51).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('#Ok').eq(0).click({ force: true });
+ cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true });
+ cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('.QuickColor').eq(3).click({ force: true });
+ cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('#Ok').eq(0).click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_polygon_change_sides', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#polySides').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+});
diff --git a/cypress/integration/ui/scenario7.js b/cypress/integration/ui/scenario7.js
new file mode 100644
index 00000000..5ba4cde1
--- /dev/null
+++ b/cypress/integration/ui/scenario7.js
@@ -0,0 +1,138 @@
+import {
+ visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
+
+const testSnapshot = () => {
+ cy.get('#svgcontent').cleanSnapshot();
+};
+
+describe('use all parts of svg-edit', function () {
+ before(() => {
+ visitAndApproveStorage();
+ });
+
+ it('check tool_source_set', function () {
+ cy.get('#tool_source').click({ force: true });
+ cy.get('#svg_source_textarea')
+ .type('{selectall}', { force: true })
+ .type(``, { force: true, parseSpecialCharSequences: false });
+ cy.get('#tool_source_save').click({ force: true });
+ testSnapshot();
+ });
+ it('check tool_star', function () {
+ cy.get('#tool_star')
+ .click({ force: true });
+ cy.get('#svgcontent')
+ .trigger('mousedown', 300, 150, { force: true })
+ .trigger('mousemove', 300, 250, { force: true })
+ .trigger('mouseup', { force: true });
+ testSnapshot();
+ });
+ it('check tool_star_clone', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#tool_clone').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_change_class', function () {
+ cy.get('#svg_2').click({ force: true });
+ cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+ .type('svg_2_class{enter}', { force: true });
+ cy.get('#svg_2')
+ .should('satisfy', ($el) => {
+ const classList = Array.from($el[0].classList);
+ return classList.includes('svg_2_class');
+ });
+ });
+ it('check tool_star_change_id', function () {
+ cy.get('#svg_2').click({ force: true }).click({ force: true });
+ cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+ .type('_id{enter}', { force: true });
+ cy.get('#svg_2_id')
+ .should('satisfy', ($el) => {
+ const classList = Array.from($el[0].classList);
+ return classList.includes('svg_2_class');
+ });
+ });
+ it('check tool_star_change_rotation', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ for(let n = 0; n < 5; n ++){
+ cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_change_blur', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_change_opacity', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_bring_to_back', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_move_bottom').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_bring_to_front', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_move_top').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_delete', function () {
+ cy.get('#svg_2_id').click({ force: true });
+ cy.get('#tool_delete').click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_align_to_page', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+ cy.get('#tool_position').find('se-list-item').eq(0).shadow().find('elix-option').eq(0)
+ .click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_change_stroke_width', function () {
+ cy.get('#svg_1').click({ force: true });
+ for(let n = 0; n < 10; n ++){
+ cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ }
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_change_stoke_fill_color', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('.QuickColor').eq(51).click({ force: true });
+ cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('#Ok').eq(0).click({ force: true });
+ cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true });
+ cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('.QuickColor').eq(3).click({ force: true });
+ cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+ .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+ .find('#Ok').eq(0).click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+ it('check tool_star_change_sides', function () {
+ cy.get('#svg_1').click({ force: true });
+ cy.get('#starNumPoints').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+ .click({ force: true });
+ cy.get('#svgcontent').toMatchSnapshot();
+ });
+});
diff --git a/src/svgcanvas/path-actions.js b/src/svgcanvas/path-actions.js
index 407a947c..b4a1c6e0 100644
--- a/src/svgcanvas/path-actions.js
+++ b/src/svgcanvas/path-actions.js
@@ -442,7 +442,7 @@ export const pathActionsMethod = (function () {
const newD = newpath.getAttribute('d');
const origD = path.elem.getAttribute('d');
path.elem.setAttribute('d', origD + newD);
- newpath.parentNode.removeChild();
+ newpath.parentNode.removeChild(newpath);
if (path.matrix) {
pathActionsContext_.recalcRotatedPath();
}