diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
index d397a83e1ed3..e5dc9abb7590 100644
--- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10,17 +10,1266 @@ exports[`renders ./components/watermark/demo/basic.tsx extend context correctly
 </div>
 `;
 
-exports[`renders ./components/watermark/demo/image.tsx extend context correctly 1`] = `
+exports[`renders ./components/watermark/demo/custom.tsx extend context correctly 1`] = `
 <div
-  style="position:relative"
+  style="display:flex"
 >
   <div
-    style="height:500px"
-  />
+    style="position:relative"
+  >
+    <article
+      class="ant-typography"
+    >
+      <div
+        class="ant-typography"
+      >
+        The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.
+      </div>
+      <div
+        class="ant-typography"
+      >
+        Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.
+      </div>
+      <div
+        class="ant-typography"
+      >
+        Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.
+      </div>
+    </article>
+    <img
+      alt="示例图片"
+      src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
+      style="z-index:10;width:100%;max-width:800px;position:relative"
+    />
+  </div>
+  <form
+    class="ant-form ant-form-vertical"
+    style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-left:20px;margin-left:20px"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="content"
+            title="Content"
+          >
+            Content
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="content"
+                placeholder="请输入"
+                type="text"
+                value="Ant Design"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="color"
+            title="Color"
+          >
+            Color
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                style="padding:4px;background:#fff;border-radius:2px;border:1px solid #dedede;display:inline-block;cursor:pointer"
+              >
+                <div
+                  style="width:36px;height:14px;border-radius:2px;background:rgba(0, 0, 0, 0.15)"
+                />
+              </div>
+              <div>
+                <div
+                  class="ant-popover"
+                  style="opacity:0"
+                >
+                  <div
+                    class="ant-popover-content"
+                  >
+                    <div
+                      class="ant-popover-arrow"
+                    >
+                      <span
+                        class="ant-popover-arrow-content"
+                      />
+                    </div>
+                    <div
+                      class="ant-popover-inner"
+                      role="tooltip"
+                      style="padding:0"
+                    >
+                      <div
+                        class="ant-popover-inner-content"
+                      >
+                        <div
+                          class="sketch-picker "
+                          style="width:200px;padding:10px 10px 0;box-sizing:initial;background:#fff;-ms-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-o-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"
+                        >
+                          <div
+                            style="width:100%;padding-bottom:75%;position:relative;overflow:hidden"
+                          >
+                            <div
+                              style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:hsl(0,100%, 50%)"
+                            >
+                              <style>
+          .saturation-white {
+            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
+            background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+          }
+          .saturation-black {
+            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
+            background: linear-gradient(to top, #000, rgba(0,0,0,0));
+          }
+                              </style>
+                              <div
+                                class="saturation-white"
+                                style="position:absolute;top:0px;right:0px;bottom:0px;left:0px"
+                              >
+                                <div
+                                  class="saturation-black"
+                                  style="position:absolute;top:0px;right:0px;bottom:0px;left:0px"
+                                />
+                                <div
+                                  style="position:absolute;top:100%;left:0%;cursor:default"
+                                >
+                                  <div
+                                    style="width:4px;height:4px;-ms-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4);-o-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+            0 0 1px 2px rgba(0,0,0,.4);-ms-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;cursor:hand;-ms-transform:translate(-2px, -2px);-moz-transform:translate(-2px, -2px);-o-transform:translate(-2px, -2px);-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexbox-fix"
+                            style="display:flex"
+                          >
+                            <div
+                              style="padding:4px 0;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1"
+                            >
+                              <div
+                                style="position:relative;height:10px;overflow:hidden"
+                              >
+                                <div
+                                  style="position:absolute;top:0px;right:0px;bottom:0px;left:0px"
+                                >
+                                  <div
+                                    class="hue-horizontal"
+                                    style="padding:0 2px;position:relative;height:100%"
+                                  >
+                                    <style>
+            .hue-horizontal {
+              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
+                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+              background: -webkit-linear-gradient(to right, #f00 0%, #ff0
+                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+            }
+            .hue-vertical {
+              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
+                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
+                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+            }
+                                    </style>
+                                    <div
+                                      style="position:absolute;left:0%"
+                                    >
+                                      <div
+                                        style="margin-top:1px;width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px)"
+                                      />
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                style="position:relative;height:10px;margin-top:4px;overflow:hidden"
+                              >
+                                <div
+                                  style="position:absolute;top:0px;right:0px;bottom:0px;left:0px"
+                                >
+                                  <div
+                                    style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden"
+                                  >
+                                    <div
+                                      style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,00) center left"
+                                    />
+                                  </div>
+                                  <div
+                                    style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:linear-gradient(to right, rgba(0,0,0, 0) 0%,
+           rgba(0,0,0, 1) 100%)"
+                                  />
+                                  <div
+                                    style="position:relative;height:100%;margin:0 3px"
+                                  >
+                                    <div
+                                      style="position:absolute;left:15%"
+                                    >
+                                      <div
+                                        style="width:4px;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;height:8px;-ms-box-shadow:0 0 2px rgba(0, 0, 0, .6);-moz-box-shadow:0 0 2px rgba(0, 0, 0, .6);-o-box-shadow:0 0 2px rgba(0, 0, 0, .6);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);box-shadow:0 0 2px rgba(0, 0, 0, .6);background:#fff;margin-top:1px;-ms-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);-webkit-transform:translateX(-2px);transform:translateX(-2px)"
+                                      />
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              style="width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px"
+                            >
+                              <div
+                                style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:url(data:image/png;base64,00) center left"
+                              />
+                              <div
+                                style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:rgba(0,0,0,0.15);-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
+                              />
+                            </div>
+                          </div>
+                          <div
+                            class="flexbox-fix"
+                            style="display:flex;padding-top:4px"
+                          >
+                            <div
+                              style="-webkit-box-flex:2;-moz-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2"
+                            >
+                              <div
+                                style="position:relative"
+                              >
+                                <input
+                                  id="rc-editable-input-1"
+                                  spellcheck="false"
+                                  style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px"
+                                  value="000000"
+                                />
+                                <label
+                                  for="rc-editable-input-1"
+                                  style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize"
+                                >
+                                  hex
+                                </label>
+                              </div>
+                            </div>
+                            <div
+                              style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px"
+                            >
+                              <div
+                                style="position:relative"
+                              >
+                                <input
+                                  id="rc-editable-input-2"
+                                  spellcheck="false"
+                                  style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px"
+                                  value="0"
+                                />
+                                <label
+                                  for="rc-editable-input-2"
+                                  style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;cursor:ew-resize"
+                                >
+                                  r
+                                </label>
+                              </div>
+                            </div>
+                            <div
+                              style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px"
+                            >
+                              <div
+                                style="position:relative"
+                              >
+                                <input
+                                  id="rc-editable-input-3"
+                                  spellcheck="false"
+                                  style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px"
+                                  value="0"
+                                />
+                                <label
+                                  for="rc-editable-input-3"
+                                  style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;cursor:ew-resize"
+                                >
+                                  g
+                                </label>
+                              </div>
+                            </div>
+                            <div
+                              style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px"
+                            >
+                              <div
+                                style="position:relative"
+                              >
+                                <input
+                                  id="rc-editable-input-4"
+                                  spellcheck="false"
+                                  style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px"
+                                  value="0"
+                                />
+                                <label
+                                  for="rc-editable-input-4"
+                                  style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;cursor:ew-resize"
+                                >
+                                  b
+                                </label>
+                              </div>
+                            </div>
+                            <div
+                              style="-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding-left:6px"
+                            >
+                              <div
+                                style="position:relative"
+                              >
+                                <input
+                                  id="rc-editable-input-5"
+                                  spellcheck="false"
+                                  style="width:80%;padding:4px 10% 3px;border:none;-ms-box-shadow:inset 0 0 0 1px #ccc;-moz-box-shadow:inset 0 0 0 1px #ccc;-o-box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;font-size:11px"
+                                  value="15"
+                                />
+                                <label
+                                  for="rc-editable-input-5"
+                                  style="display:block;text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize;cursor:ew-resize"
+                                >
+                                  a
+                                </label>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexbox-fix"
+                            style="margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid #eee;display:flex;flex-wrap:wrap;position:relative"
+                          >
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#D0021B;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#D0021B"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#F5A623;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#F5A623"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#F8E71C;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#F8E71C"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#8B572A;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#8B572A"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#7ED321;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#7ED321"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#417505;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#417505"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#BD10E0;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#BD10E0"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#9013FE;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#9013FE"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#4A90E2;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#4A90E2"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#50E3C2;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#50E3C2"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#B8E986;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#B8E986"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#000000;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#000000"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#4A4A4A;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#4A4A4A"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#9B9B9B;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#9B9B9B"
+                                />
+                              </span>
+                            </div>
+                            <div
+                              style="width:16px;height:16px;margin:0 10px 10px 0"
+                            >
+                              <span>
+                                <div
+                                  style="background:#FFFFFF;height:100%;width:100%;cursor:pointer;position:relative;outline:none;-ms-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-ms-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-o-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)"
+                                  tabindex="0"
+                                  title="#FFFFFF"
+                                />
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="fontSize"
+            title="FontSize"
+          >
+            FontSize
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left:0%;width:16%"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="false"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  aria-valuenow="16"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left:16%;transform:translateX(-50%)"
+                  tabindex="0"
+                />
+                <div>
+                  <div
+                    class="ant-tooltip ant-slider-tooltip"
+                    style="opacity:0"
+                  >
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-arrow"
+                      >
+                        <span
+                          class="ant-tooltip-arrow-content"
+                        />
+                      </div>
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      >
+                        16
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="zIndex"
+            title="zIndex"
+          >
+            zIndex
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left:0%;width:11%"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="false"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  aria-valuenow="11"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left:11%;transform:translateX(-50%)"
+                  tabindex="0"
+                />
+                <div>
+                  <div
+                    class="ant-tooltip ant-slider-tooltip"
+                    style="opacity:0"
+                  >
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-arrow"
+                      >
+                        <span
+                          class="ant-tooltip-arrow-content"
+                        />
+                      </div>
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      >
+                        11
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="rotate"
+            title="Rotate"
+          >
+            Rotate
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left:0%;width:43.888888888888886%"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="false"
+                  aria-valuemax="180"
+                  aria-valuemin="-180"
+                  aria-valuenow="-22"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left:43.888888888888886%;transform:translateX(-50%)"
+                  tabindex="0"
+                />
+                <div>
+                  <div
+                    class="ant-tooltip ant-slider-tooltip"
+                    style="opacity:0"
+                  >
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-arrow"
+                      >
+                        <span
+                          class="ant-tooltip-arrow-content"
+                        />
+                      </div>
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      >
+                        -22
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+      style="margin-bottom:0"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Gap"
+          >
+            Gap
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-space ant-space-horizontal ant-space-align-baseline"
+                style="display:flex"
+              >
+                <div
+                  class="ant-space-item"
+                  style="margin-right:8px"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  aria-valuenow="200"
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="gap_0"
+                                  placeholder="gapX"
+                                  role="spinbutton"
+                                  step="1"
+                                  value="200"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-space-item"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  aria-valuenow="200"
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="gap_1"
+                                  placeholder="gapY"
+                                  role="spinbutton"
+                                  step="1"
+                                  value="200"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+      style="margin-bottom:0"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Offset"
+          >
+            Offset
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-space ant-space-horizontal ant-space-align-baseline"
+                style="display:flex"
+              >
+                <div
+                  class="ant-space-item"
+                  style="margin-right:8px"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="offset_0"
+                                  placeholder="offsetLeft"
+                                  role="spinbutton"
+                                  step="1"
+                                  value=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-space-item"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="offset_1"
+                                  placeholder="offsetTop"
+                                  role="spinbutton"
+                                  step="1"
+                                  value=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
 </div>
 `;
 
-exports[`renders ./components/watermark/demo/multi-line.tsx extend context correctly 1`] = `
+exports[`renders ./components/watermark/demo/image.tsx extend context correctly 1`] = `
 <div
   style="position:relative"
 >
@@ -30,33 +1279,12 @@ exports[`renders ./components/watermark/demo/multi-line.tsx extend context corre
 </div>
 `;
 
-exports[`renders ./components/watermark/demo/z-index.tsx extend context correctly 1`] = `
+exports[`renders ./components/watermark/demo/multi-line.tsx extend context correctly 1`] = `
 <div
   style="position:relative"
 >
-  <article
-    class="ant-typography"
-  >
-    <div
-      class="ant-typography"
-    >
-      The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.
-    </div>
-    <div
-      class="ant-typography"
-    >
-      Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.
-    </div>
-    <div
-      class="ant-typography"
-    >
-      Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.
-    </div>
-  </article>
-  <img
-    alt="示例图片"
-    src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
-    style="z-index:10;max-width:100%;position:relative"
+  <div
+    style="height:500px"
   />
 </div>
 `;
diff --git a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
index 662f93cfc6fb..66842ae9484e 100644
--- a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
@@ -10,17 +10,764 @@ exports[`renders ./components/watermark/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/watermark/demo/image.tsx correctly 1`] = `
+exports[`renders ./components/watermark/demo/custom.tsx correctly 1`] = `
 <div
-  style="position:relative"
+  style="display:flex"
 >
   <div
-    style="height:500px"
-  />
+    style="position:relative"
+  >
+    <article
+      class="ant-typography"
+    >
+      <div
+        class="ant-typography"
+      >
+        The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.
+      </div>
+      <div
+        class="ant-typography"
+      >
+        Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.
+      </div>
+      <div
+        class="ant-typography"
+      >
+        Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.
+      </div>
+    </article>
+    <img
+      alt="示例图片"
+      src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
+      style="z-index:10;width:100%;max-width:800px;position:relative"
+    />
+  </div>
+  <form
+    class="ant-form ant-form-vertical"
+    style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-left:20px;margin-left:20px"
+  >
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="content"
+            title="Content"
+          >
+            Content
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <input
+                class="ant-input"
+                id="content"
+                placeholder="请输入"
+                type="text"
+                value="Ant Design"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="color"
+            title="Color"
+          >
+            Color
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                style="padding:4px;background:#fff;border-radius:2px;border:1px solid #dedede;display:inline-block;cursor:pointer"
+              >
+                <div
+                  style="width:36px;height:14px;border-radius:2px;background:rgba(0, 0, 0, 0.15)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="fontSize"
+            title="FontSize"
+          >
+            FontSize
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left:0%;width:16%"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="false"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  aria-valuenow="16"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left:16%;transform:translateX(-50%)"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="zIndex"
+            title="zIndex"
+          >
+            zIndex
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left:0%;width:11%"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="false"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  aria-valuenow="11"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left:11%;transform:translateX(-50%)"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            for="rotate"
+            title="Rotate"
+          >
+            Rotate
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left:0%;width:43.888888888888886%"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="false"
+                  aria-valuemax="180"
+                  aria-valuemin="-180"
+                  aria-valuenow="-22"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left:43.888888888888886%;transform:translateX(-50%)"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+      style="margin-bottom:0"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Gap"
+          >
+            Gap
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-space ant-space-horizontal ant-space-align-baseline"
+                style="display:flex"
+              >
+                <div
+                  class="ant-space-item"
+                  style="margin-right:8px"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  aria-valuenow="200"
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="gap_0"
+                                  placeholder="gapX"
+                                  role="spinbutton"
+                                  step="1"
+                                  value="200"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-space-item"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  aria-valuenow="200"
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="gap_1"
+                                  placeholder="gapY"
+                                  role="spinbutton"
+                                  step="1"
+                                  value="200"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-form-item"
+      style="margin-bottom:0"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Offset"
+          >
+            Offset
+          </label>
+        </div>
+        <div
+          class="ant-col ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-space ant-space-horizontal ant-space-align-baseline"
+                style="display:flex"
+              >
+                <div
+                  class="ant-space-item"
+                  style="margin-right:8px"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="offset_0"
+                                  placeholder="offsetLeft"
+                                  role="spinbutton"
+                                  step="1"
+                                  value=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-space-item"
+                >
+                  <div
+                    class="ant-form-item"
+                  >
+                    <div
+                      class="ant-row ant-form-item-row"
+                    >
+                      <div
+                        class="ant-col ant-form-item-control"
+                      >
+                        <div
+                          class="ant-form-item-control-input"
+                        >
+                          <div
+                            class="ant-form-item-control-input-content"
+                          >
+                            <div
+                              class="ant-input-number ant-input-number-in-form-item"
+                              style="width:100%"
+                            >
+                              <div
+                                class="ant-input-number-handler-wrap"
+                              >
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Increase Value"
+                                  class="ant-input-number-handler ant-input-number-handler-up"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="up"
+                                    class="anticon anticon-up ant-input-number-handler-up-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="up"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                                <span
+                                  aria-disabled="false"
+                                  aria-label="Decrease Value"
+                                  class="ant-input-number-handler ant-input-number-handler-down"
+                                  role="button"
+                                  unselectable="on"
+                                >
+                                  <span
+                                    aria-label="down"
+                                    class="anticon anticon-down ant-input-number-handler-down-inner"
+                                    role="img"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      data-icon="down"
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height="1em"
+                                      viewBox="64 64 896 896"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </div>
+                              <div
+                                class="ant-input-number-input-wrap"
+                              >
+                                <input
+                                  autocomplete="off"
+                                  class="ant-input-number-input"
+                                  id="offset_1"
+                                  placeholder="offsetTop"
+                                  role="spinbutton"
+                                  step="1"
+                                  value=""
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
 </div>
 `;
 
-exports[`renders ./components/watermark/demo/multi-line.tsx correctly 1`] = `
+exports[`renders ./components/watermark/demo/image.tsx correctly 1`] = `
 <div
   style="position:relative"
 >
@@ -30,33 +777,12 @@ exports[`renders ./components/watermark/demo/multi-line.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/watermark/demo/z-index.tsx correctly 1`] = `
+exports[`renders ./components/watermark/demo/multi-line.tsx correctly 1`] = `
 <div
   style="position:relative"
 >
-  <article
-    class="ant-typography"
-  >
-    <div
-      class="ant-typography"
-    >
-      The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design.
-    </div>
-    <div
-      class="ant-typography"
-    >
-      Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.
-    </div>
-    <div
-      class="ant-typography"
-    >
-      Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.
-    </div>
-  </article>
-  <img
-    alt="示例图片"
-    src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
-    style="z-index:10;max-width:100%;position:relative"
+  <div
+    style="height:500px"
   />
 </div>
 `;
diff --git a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap
index 89e435bb5107..4dfac1422744 100644
--- a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`Watermark Observe the modification of data-watermark-id 1`] = `
   >
     <div
       data-watermark-id="jfei"
-      style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 320px; pointer-events: none; background-repeat: repeat; background-position: -300px -300px; background-image: url('data:image/png;base64,00'); "
+      style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 216px; pointer-events: none; background-repeat: repeat; background-position: -300px -300px; background-image: url('data:image/png;base64,00'); "
     />
   </div>
 </div>
@@ -44,7 +44,7 @@ exports[`Watermark The offset should be correct 1`] = `
   >
     <div
       data-watermark-id="7mte-1669650061677"
-      style="z-index: 9; position: absolute; left: 100px; top: 100px; width: calc(100% - 100px); height: calc(100% - 100px); background-size: 320px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); "
+      style="z-index: 9; position: absolute; left: 100px; top: 100px; width: calc(100% - 100px); height: calc(100% - 100px); background-size: 214px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); "
     />
   </div>
 </div>
@@ -58,7 +58,7 @@ exports[`Watermark The watermark should render successfully 1`] = `
   >
     <div
       data-watermark-id="7mte-1669650061677"
-      style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 320px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); "
+      style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 210px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); "
     />
   </div>
 </div>
@@ -67,5 +67,10 @@ exports[`Watermark The watermark should render successfully 1`] = `
 exports[`Watermark rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
   style="position: relative;"
-/>
+>
+  <div
+    data-watermark-id="7mte-1669650061677"
+    style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 200px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); "
+  />
+</div>
 `;
diff --git a/components/watermark/demo/custom.md b/components/watermark/demo/custom.md
new file mode 100644
index 000000000000..ae369deb64a4
--- /dev/null
+++ b/components/watermark/demo/custom.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过自定义参数配置预览水印效果。
+
+## en-US
+
+Preview the watermark effect by configuring custom parameters.
diff --git a/components/watermark/demo/custom.tsx b/components/watermark/demo/custom.tsx
new file mode 100644
index 000000000000..f608ec397fae
--- /dev/null
+++ b/components/watermark/demo/custom.tsx
@@ -0,0 +1,167 @@
+import React, { useMemo, useState } from 'react';
+import { Watermark, Popover, Typography, Form, Input, Slider, Space, InputNumber } from 'antd';
+import { SketchPicker } from 'react-color';
+import type { RGBColor } from 'react-color';
+
+const { Paragraph } = Typography;
+
+interface ColorPickerProps {
+  value?: RGBColor;
+  onChange?: (value: RGBColor) => void;
+}
+
+const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
+  const switchStyle = {
+    padding: 4,
+    background: '#fff',
+    borderRadius: 2,
+    border: '1px solid #dedede',
+    display: 'inline-block',
+    cursor: 'pointer',
+  };
+
+  const colorStyle = {
+    width: 36,
+    height: 14,
+    borderRadius: 2,
+    background: `rgba(${value?.r}, ${value?.g}, ${value?.b}, ${value?.a})`,
+  };
+
+  return (
+    <Popover
+      trigger="click"
+      placement="bottomLeft"
+      overlayInnerStyle={{ padding: 0 }}
+      content={<SketchPicker color={value} onChange={(color) => onChange?.(color.rgb)} />}
+    >
+      <div style={switchStyle}>
+        <div style={colorStyle} />
+      </div>
+    </Popover>
+  );
+};
+
+const App: React.FC = () => {
+  const [form] = Form.useForm();
+  const [config, setConfig] = useState({
+    content: 'Ant Design',
+    color: { r: 0, g: 0, b: 0, a: 0.15 },
+    fontSize: 16,
+    zIndex: 11,
+    rotate: -22,
+    gap: [200, 200] as [number, number],
+    offset: undefined,
+  });
+  const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
+
+  const watermarkProps = useMemo(
+    () => ({
+      content,
+      font: {
+        color: `rgba(${color.r},${color.g},${color.b},${color.a})`,
+        fontSize,
+      },
+      zIndex,
+      rotate,
+      gap,
+      offset,
+    }),
+    [config],
+  );
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <Watermark {...watermarkProps}>
+        <Typography>
+          <Paragraph>
+            The light-speed iteration of the digital world makes products more complex. However,
+            human consciousness and attention resources are limited. Facing this design
+            contradiction, the pursuit of natural interaction will be the consistent direction of
+            Ant Design.
+          </Paragraph>
+          <Paragraph>
+            Natural user cognition: According to cognitive psychology, about 80% of external
+            information is obtained through visual channels. The most important visual elements in
+            the interface design, including layout, colors, illustrations, icons, etc., should fully
+            absorb the laws of nature, thereby reducing the user&apos;s cognitive cost and bringing
+            authentic and smooth feelings. In some scenarios, opportunely adding other sensory
+            channels such as hearing, touch can create a richer and more natural product experience.
+          </Paragraph>
+          <Paragraph>
+            Natural user behavior: In the interaction with the system, the designer should fully
+            understand the relationship between users, system roles, and task objectives, and also
+            contextually organize system functions and services. At the same time, a series of
+            methods such as behavior analysis, artificial intelligence and sensors could be applied
+            to assist users to make effective decisions and reduce extra operations of users, to
+            save users&apos; mental and physical resources and make human-computer interaction more
+            natural.
+          </Paragraph>
+        </Typography>
+        <img
+          style={{
+            zIndex: 10,
+            width: '100%',
+            maxWidth: 800,
+            position: 'relative',
+          }}
+          src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
+          alt="示例图片"
+        />
+      </Watermark>
+      <Form
+        style={{
+          width: 280,
+          flexShrink: 0,
+          borderLeft: '1px solid #eee',
+          paddingLeft: 20,
+          marginLeft: 20,
+        }}
+        form={form}
+        layout="vertical"
+        initialValues={config}
+        onValuesChange={(_, values) => {
+          setConfig(values);
+          console.log(_, values);
+        }}
+      >
+        <Form.Item name="content" label="Content">
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item name="color" label="Color">
+          <ColorPicker />
+        </Form.Item>
+        <Form.Item name="fontSize" label="FontSize">
+          <Slider step={1} min={0} max={100} />
+        </Form.Item>
+        <Form.Item name="zIndex" label="zIndex">
+          <Slider step={1} min={0} max={100} />
+        </Form.Item>
+        <Form.Item name="rotate" label="Rotate">
+          <Slider step={1} min={-180} max={180} />
+        </Form.Item>
+        <Form.Item label="Gap" style={{ marginBottom: 0 }}>
+          <Space style={{ display: 'flex' }} align="baseline">
+            <Form.Item name={['gap', 0]}>
+              <InputNumber placeholder="gapX" style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name={['gap', 1]}>
+              <InputNumber placeholder="gapY" style={{ width: '100%' }} />
+            </Form.Item>
+          </Space>
+        </Form.Item>
+        <Form.Item label="Offset" style={{ marginBottom: 0 }}>
+          <Space style={{ display: 'flex' }} align="baseline">
+            <Form.Item name={['offset', 0]}>
+              <InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name={['offset', 1]}>
+              <InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
+            </Form.Item>
+          </Space>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+
+export default App;
diff --git a/components/watermark/demo/z-index.md b/components/watermark/demo/z-index.md
deleted file mode 100644
index ee397be7b311..000000000000
--- a/components/watermark/demo/z-index.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-zIndex 默认值为 9，通过设置更大的 `zIndex` 堆叠在元素的顶级。
-
-## en-US
-
-zIndex defaults to 9, by setting a larger `zIndex` to stack at the top level of the element.
diff --git a/components/watermark/demo/z-index.tsx b/components/watermark/demo/z-index.tsx
deleted file mode 100644
index 1000c94f280f..000000000000
--- a/components/watermark/demo/z-index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Watermark, Typography } from 'antd';
-
-const { Paragraph } = Typography;
-
-const App: React.FC = () => (
-  <Watermark
-    height={30}
-    width={130}
-    zIndex={11}
-    image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
-  >
-    <Typography>
-      <Paragraph>
-        The light-speed iteration of the digital world makes products more complex. However, human
-        consciousness and attention resources are limited. Facing this design contradiction, the
-        pursuit of natural interaction will be the consistent direction of Ant Design.
-      </Paragraph>
-      <Paragraph>
-        Natural user cognition: According to cognitive psychology, about 80% of external information
-        is obtained through visual channels. The most important visual elements in the interface
-        design, including layout, colors, illustrations, icons, etc., should fully absorb the laws
-        of nature, thereby reducing the user&apos;s cognitive cost and bringing authentic and smooth
-        feelings. In some scenarios, opportunely adding other sensory channels such as hearing,
-        touch can create a richer and more natural product experience.
-      </Paragraph>
-      <Paragraph>
-        Natural user behavior: In the interaction with the system, the designer should fully
-        understand the relationship between users, system roles, and task objectives, and also
-        contextually organize system functions and services. At the same time, a series of methods
-        such as behavior analysis, artificial intelligence and sensors could be applied to assist
-        users to make effective decisions and reduce extra operations of users, to save users&apos;
-        mental and physical resources and make human-computer interaction more natural.
-      </Paragraph>
-    </Typography>
-    <img
-      src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
-      alt="示例图片"
-      style={{ zIndex: 10, maxWidth: '100%', position: 'relative' }}
-    />
-  </Watermark>
-);
-
-export default App;
diff --git a/components/watermark/index.en-US.md b/components/watermark/index.en-US.md
index f7f9d2d62294..76528c01e459 100644
--- a/components/watermark/index.en-US.md
+++ b/components/watermark/index.en-US.md
@@ -20,7 +20,7 @@ Add specific text or patterns to the page.
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/multi-line.tsx">Multi-line watermark</code>
 <code src="./demo/image.tsx">Image watermark</code>
-<code src="./demo/z-index.tsx">High priority</code>
+<code src="./demo/custom.tsx">Custom configuration</code>
 
 ## API
 
@@ -28,8 +28,8 @@ Add specific text or patterns to the page.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| width | The width of the watermark | number | 120 |  |
-| height | The height of the watermark | number | 64 |  |
+| width | The width of the watermark, the default value of `content` is its own width | number | 120 |  |
+| height | The height of the watermark, the default value of `content` is its own height | number | 64 |  |
 | rotate | When the watermark is drawn, the rotation Angle, unit `°` | number | -22 |  |
 | zIndex | The z-index of the appended watermark element | number | 9 |  |
 | image | Image source, it is recommended to export 2x or 3x image, high priority | string | - |  |
diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx
index 50ea2dba240d..d6f65fb6df5b 100644
--- a/components/watermark/index.tsx
+++ b/components/watermark/index.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import useMutationObserver from './useMutationObserver';
 
+const FontGap = 3;
+
 const getStyleStr = (style: Record<string, string | number>): string => {
   let styleStr = '';
   Object.keys(style).forEach((item) => {
@@ -39,8 +41,8 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
      */
     zIndex = 9,
     rotate = -22,
-    width = 120,
-    height = 64,
+    width,
+    height,
     image,
     content,
     font = {},
@@ -88,18 +90,18 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     };
   }, [offset, gap]);
 
-  const markStyle: React.CSSProperties = {
+  const getMarkStyle = (markWidth: number) => ({
     zIndex,
     position: 'absolute',
     left: 0,
     top: 0,
     width: '100%',
     height: '100%',
-    backgroundSize: `${gapX + width}px`,
+    backgroundSize: `${gapX + markWidth}px`,
     pointerEvents: 'none',
     backgroundRepeat: 'repeat',
     ...offsetStyle,
-  };
+  });
 
   const containerRef = useRef<HTMLDivElement>(null);
   const watermarkDom = useRef<HTMLDivElement>();
@@ -133,14 +135,14 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     return flag;
   };
 
-  const appendWatermark = (base64Url: string) => {
+  const appendWatermark = (base64Url: string, markWidth: number) => {
     if (containerRef.current && watermarkDom.current) {
       destroyObserver();
       watermarkDom.current.setAttribute(WATERMARK_ID_NAME, watermarkId);
       watermarkDom.current.setAttribute(
         'style',
         getStyleStr({
-          ...markStyle,
+          ...getMarkStyle(markWidth),
           backgroundImage: `url('${base64Url}')`,
         }),
       );
@@ -157,6 +159,23 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     }
   };
 
+  /**
+   * Get the width and height of the watermark. The default values are as follows
+   * Image: [120, 64]; Content: It's calculated by content;
+   */
+  const getMarkSize = (ctx: CanvasRenderingContext2D) => {
+    let defaultWidth = 120;
+    let defaultHeight = 64;
+    if (!image && ctx.measureText) {
+      ctx.font = `${Number(fontSize)}px ${fontFamily}`;
+      const contents = Array.isArray(content) ? content : [content];
+      const widths = contents.map((item) => ctx.measureText(item as string).width);
+      defaultWidth = Math.ceil(Math.max(...widths));
+      defaultHeight = Number(fontSize) * contents.length + (contents.length - 1) * FontGap;
+    }
+    return [width ?? defaultWidth, height ?? defaultHeight];
+  };
+
   const renderWatermark = () => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
@@ -166,21 +185,21 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
         watermarkDom.current = document.createElement('div');
       }
 
-      const ratio = window.devicePixelRatio;
-      const canvasWidth = `${(gapX + width) * ratio}px`;
-      const canvasHeight = `${(gapY + height) * ratio}px`;
-
+      const ratio = window.devicePixelRatio || 1;
+      const [markWidth, markHeight] = getMarkSize(ctx);
+      const canvasWidth = `${(gapX + markWidth) * ratio}px`;
+      const canvasHeight = `${(gapY + markHeight) * ratio}px`;
       canvas.setAttribute('width', canvasWidth);
       canvas.setAttribute('height', canvasHeight);
 
-      const markWidth = width * ratio;
-      const markHeight = height * ratio;
+      const mergedMarkWidth = markWidth * ratio;
+      const mergedMarkHeight = markHeight * ratio;
       const gapXCenter = (gapX * ratio) / 2;
       const gapYCenter = (gapY * ratio) / 2;
 
       /** Rotate with the canvas as the center point */
-      const centerX = (markWidth + gapX * ratio) / 2;
-      const centerY = (markHeight + gapY * ratio) / 2;
+      const centerX = (mergedMarkWidth + gapX * ratio) / 2;
+      const centerY = (mergedMarkHeight + gapY * ratio) / 2;
       ctx.translate(centerX, centerY);
       ctx.rotate((Math.PI / 180) * Number(rotate));
       ctx.translate(-centerX, -centerY);
@@ -188,27 +207,27 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
       if (image) {
         const img = new Image();
         img.onload = () => {
-          ctx.drawImage(img, gapXCenter, gapYCenter, markWidth, markHeight);
-          appendWatermark(canvas.toDataURL());
+          ctx.drawImage(img, gapXCenter, gapYCenter, mergedMarkWidth, mergedMarkHeight);
+          appendWatermark(canvas.toDataURL(), markWidth);
         };
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
         img.src = image;
-      } else if (content) {
-        const markSize = Number(fontSize) * ratio;
-        const fontGap = ratio * 3;
-        ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
+      } else {
+        const mergedFontSize = Number(fontSize) * ratio;
+        ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${mergedMarkHeight}px ${fontFamily}`;
         ctx.fillStyle = color;
         ctx.textAlign = 'center';
-        ctx.translate(markWidth / 2, markSize);
+        ctx.textBaseline = 'top';
+        ctx.translate(mergedMarkWidth / 2, 0);
         if (Array.isArray(content)) {
           content?.forEach((item: string, index: number) =>
-            ctx.fillText(item, gapXCenter, gapYCenter + index * (markSize + fontGap)),
+            ctx.fillText(item, gapXCenter, gapYCenter + index * (mergedFontSize + FontGap * ratio)),
           );
         } else {
-          ctx.fillText(content, gapXCenter, gapYCenter);
+          ctx.fillText(content ?? '', gapXCenter, gapYCenter);
         }
-        appendWatermark(canvas.toDataURL());
+        appendWatermark(canvas.toDataURL(), markWidth);
       }
     }
   };
diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md
index 8b4f29efa8fd..d9f14b8b4725 100644
--- a/components/watermark/index.zh-CN.md
+++ b/components/watermark/index.zh-CN.md
@@ -21,7 +21,7 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/multi-line.tsx">多行水印</code>
 <code src="./demo/image.tsx">图片水印</code>
-<code src="./demo/z-index.tsx">高优先级</code>
+<code src="./demo/custom.tsx">自定义配置</code>
 
 ## API
 
@@ -29,8 +29,8 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| width | 水印的宽度 | number | 120 |  |
-| height | 水印的高度 | number | 64 |  |
+| width | 水印的宽度，`content` 的默认值为自身的宽度 | number | 120 |  |
+| height | 水印的高度，`content` 的默认值为自身的高度 | number | 64 |  |
 | rotate | 水印绘制时，旋转的角度，单位 `°` | number | -22 |  |
 | zIndex | 追加的水印元素的 z-index | number | 9 |  |
 | image | 图片源，建议导出 2 倍或 3 倍图，优先级高 | string | - |  |