diff --git a/cypress/integration/ui/__snapshots__/scenario5.js.snap b/cypress/integration/ui/__snapshots__/scenario5.js.snap
index 947b63a5..a9135fb8 100644
--- a/cypress/integration/ui/__snapshots__/scenario5.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario5.js.snap
@@ -252,7 +252,7 @@ exports[`use all parts of svg-edit > check tool_line_clone #0`] = `
 </svg>
 `;
 
-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`] = `
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
@@ -271,10 +271,10 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
-      x1="225"
+      x1="200"
       y1="200"
-      x2="475"
-      y2="425"
+      x2="450"
+      y2="450"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
@@ -310,3 +310,419 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`
   </defs>
 </svg>
 `;
+
+exports[`use all parts of svg-edit > check tool_line_bring_to_front #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.25"
+      style="pointer-events:none"
+      x1="220"
+      y1="220"
+      x2="470"
+      y2="470"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="0.5"
+        id="svg_4"
+      ></animate>
+    </line>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      x1="200"
+      y1="200"
+      x2="450"
+      y2="450"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></line>
+  </g>
+  <defs>
+    <filter id="svg_1_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_x_y_coordinate #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.25"
+      style="pointer-events:none"
+      x1="220"
+      y1="220"
+      x2="470"
+      y2="470"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="0.5"
+        id="svg_4"
+      ></animate>
+    </line>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      x1="225"
+      y1="200"
+      x2="475"
+      y2="425"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></line>
+  </g>
+  <defs>
+    <filter id="svg_1_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_stroke_width #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.25"
+      style="pointer-events:none"
+      x1="220"
+      y1="220"
+      x2="470"
+      y2="470"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="0.5"
+        id="svg_4"
+      ></animate>
+    </line>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="15"
+      opacity="0.5"
+      x1="225"
+      y1="200"
+      x2="475"
+      y2="425"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></line>
+  </g>
+  <defs>
+    <filter id="svg_1_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_stroke_style #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.25"
+      style="pointer-events:none"
+      x1="220"
+      y1="220"
+      x2="470"
+      y2="470"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="0.5"
+        id="svg_4"
+      ></animate>
+    </line>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="15"
+      opacity="0.5"
+      x1="225"
+      y1="200"
+      x2="475"
+      y2="425"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></line>
+  </g>
+  <defs>
+    <filter id="svg_1_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_line_cap #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.25"
+      style="pointer-events:none"
+      x1="220"
+      y1="220"
+      x2="470"
+      y2="470"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="0.5"
+        id="svg_4"
+      ></animate>
+    </line>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="15"
+      opacity="0.5"
+      x1="225"
+      y1="200"
+      x2="475"
+      y2="425"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      stroke-dasharray="5,2,2,2"
+    ></line>
+  </g>
+  <defs>
+    <filter id="svg_1_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_line_align_to_page #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.25"
+      x1="220"
+      y1="220"
+      x2="470"
+      y2="470"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="0.5"
+        id="svg_4"
+      ></animate>
+    </line>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="15"
+      opacity="0.5"
+      x1="225"
+      y1="200"
+      x2="475"
+      y2="425"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      stroke-dasharray="5,2,2,2"
+      stroke-linecap="square"
+    ></line>
+  </g>
+  <defs>
+    <filter id="svg_1_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_line_change_stoke_color #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#bf5f00"
+      stroke-width="5"
+      opacity="0.25"
+      x1="387.5"
+      y1="220"
+      x2="637.5"
+      y2="470"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_3"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="0.5"
+        id="svg_4"
+      ></animate>
+    </line>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="15"
+      opacity="0.5"
+      x1="225"
+      y1="200"
+      x2="475"
+      y2="425"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+      stroke-dasharray="5,2,2,2"
+      stroke-linecap="square"
+    ></line>
+  </g>
+  <defs>
+    <filter id="svg_1_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
diff --git a/cypress/integration/ui/scenario5.js b/cypress/integration/ui/scenario5.js
index 4fd22c95..ce20994d 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,44 @@ 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_stroke_style', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#stroke_style').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+    cy.get('#stroke_style').find('se-list-item').eq(3).shadow().find('elix-option').eq(0)
+      .click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_line_change_line_cap', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#stroke_linecap').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+    cy.get('#stroke_linecap').find('se-list-item').eq(1).shadow().find('elix-option').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();
+  });
+  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();
+  });
 });