#623 tool_star cypress test cases added

cypress/integration/ui/__snapshots__/scenario1.js.snap

@@ -14,44 +14,6 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = `
 </svg>
 `;
 
-exports[`use all parts of svg-edit > check tool_line #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.5"
-      style="pointer-events:none"
-      x1="200"
-      y1="200"
-      x2="220"
-      y2="220"
-      id="svg_1"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </line>
-  </g>
-</svg>
-`;
-
 exports[`use all parts of svg-edit > check tool_shape #0`] = `
 <svg
   xmlns="http://www.w3.org/2000/svg"
@@ -66,139 +28,17 @@ exports[`use all parts of svg-edit > check tool_shape #0`] = `
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <line
-      fill="none"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      x1="200"
-      y1="200"
-      x2="220"
-      y2="220"
-      id="svg_1"
-      fill-opacity="1"
-      stroke-opacity="1"
-      transform="rotate(43.2643 210 210)"
-    ></line>
-    <path
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      opacity="0.5"
-      style="pointer-events:none"
-      d="m309.60653833763354,262.7975086895094 c37.05917105721012,-106.31729401658639 182.2582183141481,0 0,136.6936637356111 c-182.2582183141481,-136.6936637356111 -37.05917105721012,-243.0109577521975 0,-136.6936637356111 z"
-      id="svg_2"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </path>
-  </g>
-</svg>
-`;
-
-exports[`use all parts of svg-edit > check tool_rect_square #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"
-      style="pointer-events:inherit"
-      x1="200"
-      y1="200"
-      x2="220"
-      y2="220"
-      id="svg_1"
-      fill-opacity="1"
-      stroke-opacity="1"
-      transform="rotate(43.2643 210 210)"
-    ></line>
     <path
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      d="m309.60653833763354,262.7975086895094 c37.05917105721012,-106.31729401658639 182.2582183141481,0 0,136.6936637356111 c-182.2582183141481,-136.6936637356111 -37.05917105721012,-243.0109577521975 0,-136.6936637356111 z"
+      d="m208.99746606586632,203.82033218045854 c4.117685576066451,-11.81303239035457 20.250912669179264,0 0,15.18818450188445 c-20.250912669179264,-15.18818450188445 -4.117685576066451,-27.00121689223902 0,-15.18818450188445 z"
-      id="svg_2"
+      id="svg_1"
       fill-opacity="1"
       stroke-opacity="1"
+      transform="rotate(43.2545 208.997 209.008)"
     ></path>
-    <rect
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      opacity="0.5"
-      style="pointer-events:inherit"
-      x="296"
-      y="136"
-      width="150"
-      height="120"
-      id="svg_3"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </rect>
-    <rect
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      opacity="0.5"
-      style="pointer-events:inherit"
-      x="446"
-      y="76"
-      width="180"
-      height="180"
-      id="svg_4"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </rect>
-    <rect
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      opacity="0.5"
-      style="pointer-events:inherit"
-      x="216"
-      y="156"
-      width="100"
-      height="100"
-      id="svg_5"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </rect>
   </g>
 </svg>
 `;
@@ -217,75 +57,23 @@ exports[`use all parts of svg-edit > check tool_image #0`] = `
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <line
-      fill="none"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      x1="200"
-      y1="200"
-      x2="220"
-      y2="220"
-      id="svg_1"
-      fill-opacity="1"
-      stroke-opacity="1"
-      transform="rotate(43.2643 210 210)"
-    ></line>
     <path
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       style="pointer-events:inherit"
-      d="m309.60653833763354,262.7975086895094 c37.05917105721012,-106.31729401658639 182.2582183141481,0 0,136.6936637356111 c-182.2582183141481,-136.6936637356111 -37.05917105721012,-243.0109577521975 0,-136.6936637356111 z"
+      d="m208.99746606586632,203.82033218045854 c4.117685576066451,-11.81303239035457 20.250912669179264,0 0,15.18818450188445 c-20.250912669179264,-15.18818450188445 -4.117685576066451,-27.00121689223902 0,-15.18818450188445 z"
-      id="svg_2"
+      id="svg_1"
       fill-opacity="1"
       stroke-opacity="1"
+      transform="rotate(43.2545 208.997 209.008)"
     ></path>
-    <rect
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      x="296"
-      y="136"
-      width="150"
-      height="120"
-      id="svg_3"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
-    <rect
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      x="446"
-      y="76"
-      width="180"
-      height="180"
-      id="svg_4"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
-    <rect
-      fill="#FF0000"
-      stroke="#000000"
-      stroke-width="5"
-      style="pointer-events:inherit"
-      x="216"
-      y="156"
-      width="100"
-      height="100"
-      id="svg_5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <image
-      x="296"
+      x="295"
-      y="176"
+      y="295"
       width="20"
       height="20"
-      id="svg_6"
+      id="svg_2"
       opacity="0.5"
       style="pointer-events:inherit"
       xlink:href="./images/logo.svg"

cypress/integration/ui/__snapshots__/scenario7.js.snap

@@ -0,0 +1,750 @@
+exports[`use all parts of svg-edit > check tool_source_set #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"><title>Layer 1</title></g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_star #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">
+    <title>Layer 1</title>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokewidth="5"
+      starradiusmultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </polygon>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_star_clone #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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="300"
+      cy="150"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    ></polygon>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_rotation #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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="300"
+      cy="150"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2_id"
+      class="svg_2_class"
+      transform="rotate(25 320 163.634)"
+    ></polygon>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_star_change_blur #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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="300"
+      cy="150"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2_id"
+      class="svg_2_class"
+      transform="rotate(25 320 163.634)"
+      filter="url(#svg_2_id_blur)"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_change_opacity #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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="300"
+      cy="150"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2_id"
+      class="svg_2_class"
+      filter="url(#svg_2_id_blur)"
+      opacity="0.5"
+      transform="rotate(25 320 163.634)"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_bring_to_back #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>
+    <polygon
+      cx="300"
+      cy="150"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2_id"
+      class="svg_2_class"
+      filter="url(#svg_2_id_blur)"
+      opacity="0.5"
+      transform="rotate(25 320 163.634)"
+    ></polygon>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+    <polygon
+      cx="300"
+      cy="150"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2_id"
+      class="svg_2_class"
+      filter="url(#svg_2_id_blur)"
+      opacity="0.5"
+      transform="rotate(25 320 163.634)"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_delete #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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="5"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="15"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="15"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#FF0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#000000"
+      stroke-width="15"
+      fill-opacity="1"
+      stroke-opacity="1"
+      stroke-dasharray="5,2,2,2"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_change_stoke_fill_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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="5"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#bf0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 "
+      stroke="#0000bf"
+      stroke-width="15"
+      fill-opacity="1"
+      stroke-opacity="1"
+      stroke-dasharray="5,2,2,2"
+      stroke-linecap="square"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_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_star_change_sides #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>
+    <polygon
+      cx="300"
+      cy="150"
+      id="svg_1"
+      shape="star"
+      point="6"
+      r="66.66666666666667"
+      radialshift="0"
+      r2="22.222222222222225"
+      orient="point"
+      fill="#bf0000"
+      strokecolor="#000000"
+      strokeWidth="5"
+      starRadiusMultiplier="3"
+      points="301.08849207560223,76.2796007792155 312.1996031867133,123.70125847289464 358.8235189945648,109.61293411254883 323.31071429782446,142.94626744588217 358.82351899456484,176.27960077921549 312.1996031867134,162.1912764188697 301.08849207560223,209.61293411254883 289.97738096449115,162.1912764188697 243.35346515663966,176.2796007792155 278.86626985338,142.94626744588217 243.35346515663966,109.61293411254883 289.97738096449115,123.70125847289464 301.08849207560223,76.2796007792155 312.1996031867134,123.70125847289464 "
+      stroke="#0000bf"
+      stroke-width="15"
+      fill-opacity="1"
+      stroke-opacity="1"
+      stroke-dasharray="5,2,2,2"
+      stroke-linecap="square"
+    ></polygon>
+  </g>
+  <defs>
+    <filter id="svg_2_id_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;

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();
   });
-
 });

cypress/integration/ui/scenario7.js

@@ -0,0 +1,164 @@
+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(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+      <g class="layer">
+       <title>Layer 1</title>
+       </g>
+     </svg>`, { 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_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_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_stroke_style', function () {
+    cy.get('#svg_1').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_star_change_line_cap', function () {
+    cy.get('#svg_1').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_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();
+  });
+});