demo.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
<div>
  <form
    class="ant-form ant-form-horizontal ant-advanced-search-form"
    id="advanced_search"
  >
    <div
      class="ant-row"
      style="margin-left:-12px;margin-right:-12px"
    >
      <div
        class="ant-col ant-col-8"
        style="padding-left:12px;padding-right:12px"
      >
        <div
          class="ant-row ant-form-item"
        >
          <div
            class="ant-col ant-form-item-label"
          >
            <label
              class="ant-form-item-required"
              for="advanced_search_field-0"
              title="Field 0"
            >
              Field 0
            </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="advanced_search_field-0"
                  placeholder="placeholder"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-col ant-col-8"
        style="padding-left:12px;padding-right:12px"
      >
        <div
          class="ant-row ant-form-item"
        >
          <div
            class="ant-col ant-form-item-label"
          >
            <label
              class="ant-form-item-required"
              for="advanced_search_field-1"
              title="Field 1"
            >
              Field 1
            </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="advanced_search_field-1"
                  placeholder="placeholder"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-col ant-col-8"
        style="padding-left:12px;padding-right:12px"
      >
        <div
          class="ant-row ant-form-item"
        >
          <div
            class="ant-col ant-form-item-label"
          >
            <label
              class="ant-form-item-required"
              for="advanced_search_field-2"
              title="Field 2"
            >
              Field 2
            </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="advanced_search_field-2"
                  placeholder="placeholder"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-col ant-col-8"
        style="padding-left:12px;padding-right:12px"
      >
        <div
          class="ant-row ant-form-item"
        >
          <div
            class="ant-col ant-form-item-label"
          >
            <label
              class="ant-form-item-required"
              for="advanced_search_field-3"
              title="Field 3"
            >
              Field 3
            </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="advanced_search_field-3"
                  placeholder="placeholder"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-col ant-col-8"
        style="padding-left:12px;padding-right:12px"
      >
        <div
          class="ant-row ant-form-item"
        >
          <div
            class="ant-col ant-form-item-label"
          >
            <label
              class="ant-form-item-required"
              for="advanced_search_field-4"
              title="Field 4"
            >
              Field 4
            </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="advanced_search_field-4"
                  placeholder="placeholder"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-col ant-col-8"
        style="padding-left:12px;padding-right:12px"
      >
        <div
          class="ant-row ant-form-item"
        >
          <div
            class="ant-col ant-form-item-label"
          >
            <label
              class="ant-form-item-required"
              for="advanced_search_field-5"
              title="Field 5"
            >
              Field 5
            </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="advanced_search_field-5"
                  placeholder="placeholder"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row"
    >
      <div
        class="ant-col ant-col-24"
        style="text-align:right"
      >
        <button
          class="ant-btn ant-btn-primary"
          type="submit"
        >
          <span>
            Search
          </span>
        </button>
        <button
          class="ant-btn"
          style="margin:0 8px"
          type="button"
        >
          <span>
            Clear
          </span>
        </button>
        <a
          style="font-size:12px"
        >
          <span
            aria-label="down"
            class="anticon anticon-down"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              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>
           Collapse
        </a>
      </div>
    </div>
  </form>
  <div
    class="search-result-list"
  >
    Search Result List
  </div>
</div>
`;

exports[`renders ./components/form/demo/basic.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="basic"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="basic_username"
        title="Username"
      >
        Username
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="basic_username"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="basic_password"
        title="Password"
      >
        Password
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-password ant-input-affix-wrapper"
          >
            <input
              action="click"
              class="ant-input"
              id="basic_password"
              type="password"
              value=""
            />
            <span
              class="ant-input-suffix"
            >
              <span
                aria-label="eye-invisible"
                class="anticon anticon-eye-invisible ant-input-password-icon"
                role="img"
                tabindex="-1"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="eye-invisible"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
                  />
                  <path
                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <label
            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
          >
            <span
              class="ant-checkbox ant-checkbox-checked"
            >
              <input
                checked=""
                class="ant-checkbox-input"
                id="basic_remember"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
            <span>
              Remember me
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="control-hooks"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="control-hooks_note"
        title="Note"
      >
        Note
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="control-hooks_note"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="control-hooks_gender"
        title="Gender"
      >
        Gender
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
          >
            <div
              class="ant-select-selector"
            >
              <span
                class="ant-select-selection-search"
              >
                <input
                  aria-activedescendant="control-hooks_gender_list_0"
                  aria-autocomplete="list"
                  aria-controls="control-hooks_gender_list"
                  aria-haspopup="listbox"
                  aria-owns="control-hooks_gender_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
                  id="control-hooks_gender"
                  readonly=""
                  role="combobox"
                  style="opacity:0"
                  unselectable="on"
                  value=""
                />
              </span>
              <span
                class="ant-select-selection-placeholder"
              >
                Select a option and change input text above
              </span>
            </div>
            <span
              aria-hidden="true"
              class="ant-select-arrow"
              style="user-select:none;-webkit-user-select:none"
              unselectable="on"
            >
              <span
                aria-label="down"
                class="anticon anticon-down"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  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>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
          <button
            class="ant-btn"
            type="button"
          >
            <span>
              Reset
            </span>
          </button>
          <button
            class="ant-btn ant-btn-link"
            type="button"
          >
            <span>
              Fill form
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="control-ref"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="control-ref_note"
        title="Note"
      >
        Note
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="control-ref_note"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="control-ref_gender"
        title="Gender"
      >
        Gender
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
          >
            <div
              class="ant-select-selector"
            >
              <span
                class="ant-select-selection-search"
              >
                <input
                  aria-activedescendant="control-ref_gender_list_0"
                  aria-autocomplete="list"
                  aria-controls="control-ref_gender_list"
                  aria-haspopup="listbox"
                  aria-owns="control-ref_gender_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
                  id="control-ref_gender"
                  readonly=""
                  role="combobox"
                  style="opacity:0"
                  unselectable="on"
                  value=""
                />
              </span>
              <span
                class="ant-select-selection-placeholder"
              >
                Select a option and change input text above
              </span>
            </div>
            <span
              aria-hidden="true"
              class="ant-select-arrow"
              style="user-select:none;-webkit-user-select:none"
              unselectable="on"
            >
              <span
                aria-label="down"
                class="anticon anticon-down"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  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>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
          <button
            class="ant-btn"
            type="button"
          >
            <span>
              Reset
            </span>
          </button>
          <button
            class="ant-btn ant-btn-link"
            type="button"
          >
            <span>
              Fill form
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`] = `
<form
  class="ant-form ant-form-inline"
  id="customized_form_controls"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label"
    >
      <label
        class=""
        for="customized_form_controls_price"
        title="Price"
      >
        Price
      </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"
        >
          <span>
            <input
              class="ant-input"
              style="width:100px"
              type="text"
              value="0"
            />
            <div
              class="ant-select ant-select-single ant-select-show-arrow"
              style="width:80px;margin:0 8px"
            >
              <div
                class="ant-select-selector"
              >
                <span
                  class="ant-select-selection-search"
                >
                  <input
                    aria-activedescendant="undefined_list_0"
                    aria-autocomplete="list"
                    aria-controls="undefined_list"
                    aria-haspopup="listbox"
                    aria-owns="undefined_list"
                    autocomplete="off"
                    class="ant-select-selection-search-input"
                    readonly=""
                    role="combobox"
                    style="opacity:0"
                    unselectable="on"
                    value=""
                  />
                </span>
                <span
                  class="ant-select-selection-item"
                >
                  RMB
                </span>
              </div>
              <span
                aria-hidden="true"
                class="ant-select-arrow"
                style="user-select:none;-webkit-user-select:none"
                unselectable="on"
              >
                <span
                  aria-label="down"
                  class="anticon anticon-down"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="dynamic_form_item"
>
  <div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <button
              class="ant-btn ant-btn-dashed"
              style="width:60%"
              type="button"
            >
              <span
                aria-label="plus"
                class="anticon anticon-plus"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="plus"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <defs />
                  <path
                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                  />
                  <path
                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
                  />
                </svg>
              </span>
              <span>
                 Add field
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="dynamic_rule"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-4 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="dynamic_rule_username"
        title="Name"
      >
        Name
      </label>
    </div>
    <div
      class="ant-col ant-col-8 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="dynamic_rule_username"
            placeholder="Please input your name"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-4 ant-form-item-label"
    >
      <label
        class=""
        for="dynamic_rule_nickname"
        title="Nickname"
      >
        Nickname
      </label>
    </div>
    <div
      class="ant-col ant-col-8 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="dynamic_rule_nickname"
            placeholder="Please input your nickname"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <label
            class="ant-checkbox-wrapper"
          >
            <span
              class="ant-checkbox"
            >
              <input
                class="ant-checkbox-input"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
            <span>
              Nickname is required
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="button"
          >
            <span>
              Check
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
<div>
  <form
    class="ant-form ant-form-horizontal"
    id="basicForm"
  >
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-8 ant-form-item-label"
      >
        <label
          class="ant-form-item-required"
          for="basicForm_group"
          title="Group Name"
        >
          Group Name
        </label>
      </div>
      <div
        class="ant-col ant-col-16 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <input
              class="ant-input"
              id="basicForm_group"
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-8 ant-form-item-label"
      >
        <label
          class=""
          title="User List"
        >
          User List
        </label>
      </div>
      <div
        class="ant-col ant-col-16 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <span
              class="ant-typography ant-form-text ant-typography-secondary"
            >
              ( 
              <span
                aria-label="smile"
                class="anticon anticon-smile"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="smile"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
                  />
                </svg>
              </span>
               No user yet. )
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <button
              class="ant-btn ant-btn-primary"
              type="submit"
            >
              <span>
                Submit
              </span>
            </button>
            <button
              class="ant-btn"
              style="margin:0 8px"
              type="button"
            >
              <span>
                Add User
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`renders ./components/form/demo/form-in-modal.md correctly 1`] = `
<div>
  <button
    class="ant-btn ant-btn-primary"
    type="button"
  >
    <span>
      New Collection
    </span>
  </button>
</div>
`;

exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
<div>
  <form
    class="ant-form ant-form-inline"
    id="global_state"
  >
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-form-item-label"
      >
        <label
          class="ant-form-item-required"
          for="global_state_username"
          title="Username"
        >
          Username
        </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="global_state_username"
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
    </div>
  </form>
  <pre
    class="language-bash"
  >
    [
  {
    "name": [
      "username"
    ],
    "value": "Ant Design"
  }
]
  </pre>
</div>
`;

exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
<form
  class="ant-form ant-form-inline"
  id="horizontal_login"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-affix-wrapper"
          >
            <span
              class="ant-input-prefix"
            >
              <span
                aria-label="user"
                class="anticon anticon-user site-form-item-icon"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="user"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
                  />
                </svg>
              </span>
            </span>
            <input
              class="ant-input"
              id="horizontal_login_username"
              placeholder="Username"
              type="text"
              value=""
            />
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-affix-wrapper"
          >
            <span
              class="ant-input-prefix"
            >
              <span
                aria-label="lock"
                class="anticon anticon-lock site-form-item-icon"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="lock"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
                  />
                </svg>
              </span>
            </span>
            <input
              class="ant-input"
              id="horizontal_login_password"
              placeholder="Password"
              type="password"
              value=""
            />
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Log in
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/layout.md correctly 1`] = `
<div>
  <form
    class="ant-form ant-form-horizontal"
  >
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          for="layout"
          title="Form Layout"
        >
          Form Layout
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <div
              class="ant-radio-group ant-radio-group-outline"
              id="layout"
            >
              <label
                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
              >
                <span
                  class="ant-radio-button ant-radio-button-checked"
                >
                  <input
                    checked=""
                    class="ant-radio-button-input"
                    type="radio"
                    value="horizontal"
                  />
                  <span
                    class="ant-radio-button-inner"
                  />
                </span>
                <span>
                  Horizontal
                </span>
              </label>
              <label
                class="ant-radio-button-wrapper"
              >
                <span
                  class="ant-radio-button"
                >
                  <input
                    class="ant-radio-button-input"
                    type="radio"
                    value="vertical"
                  />
                  <span
                    class="ant-radio-button-inner"
                  />
                </span>
                <span>
                  Vertical
                </span>
              </label>
              <label
                class="ant-radio-button-wrapper"
              >
                <span
                  class="ant-radio-button"
                >
                  <input
                    class="ant-radio-button-input"
                    type="radio"
                    value="inline"
                  />
                  <span
                    class="ant-radio-button-inner"
                  />
                </span>
                <span>
                  Inline
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="Field A"
        >
          Field A
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <input
              class="ant-input"
              placeholder="input placeholder"
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="Field B"
        >
          Field B
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <input
              class="ant-input"
              placeholder="input placeholder"
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <button
              class="ant-btn ant-btn-primary"
              type="button"
            >
              <span>
                Submit
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="nest-messages"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="nest-messages_user_name"
        title="Name"
      >
        Name
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="nest-messages_user_name"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class=""
        for="nest-messages_user_email"
        title="Email"
      >
        Email
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="nest-messages_user_email"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class=""
        for="nest-messages_user_age"
        title="Age"
      >
        Age
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-input-number"
          >
            <div
              class="ant-input-number-handler-wrap"
            >
              <span
                aria-label="Increase Value"
                class="ant-input-number-handler ant-input-number-handler-up"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="up"
                  class="anticon anticon-up ant-input-number-handler-up-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-label="Decrease Value"
                class="ant-input-number-handler ant-input-number-handler-down"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="down"
                  class="anticon anticon-down ant-input-number-handler-down-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-valuemin="-9007199254740991"
                autocomplete="off"
                class="ant-input-number-input"
                id="nest-messages_user_age"
                min="-9007199254740991"
                role="spinbutton"
                step="1"
                value=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class=""
        for="nest-messages_user_website"
        title="Website"
      >
        Website
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="nest-messages_user_website"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-8 ant-form-item-label"
    >
      <label
        class=""
        for="nest-messages_user_introduction"
        title="Introduction"
      >
        Introduction
      </label>
    </div>
    <div
      class="ant-col ant-col-16 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <textarea
            class="ant-input"
            id="nest-messages_user_introduction"
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal login-form"
  id="normal_login"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-affix-wrapper"
          >
            <span
              class="ant-input-prefix"
            >
              <span
                aria-label="user"
                class="anticon anticon-user site-form-item-icon"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="user"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
                  />
                </svg>
              </span>
            </span>
            <input
              class="ant-input"
              id="normal_login_username"
              placeholder="Username"
              type="text"
              value=""
            />
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-affix-wrapper"
          >
            <span
              class="ant-input-prefix"
            >
              <span
                aria-label="lock"
                class="anticon anticon-lock site-form-item-icon"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="lock"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
                  />
                </svg>
              </span>
            </span>
            <input
              class="ant-input"
              id="normal_login_password"
              placeholder="Password"
              type="password"
              value=""
            />
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <label
            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
          >
            <span
              class="ant-checkbox ant-checkbox-checked"
            >
              <input
                checked=""
                class="ant-checkbox-input"
                id="normal_login_remember"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
            <span>
              Remember me
            </span>
          </label>
          <a
            class="login-form-forgot"
            href=""
          >
            Forgot password
          </a>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn login-form-button ant-btn-primary"
            type="submit"
          >
            <span>
              Log in
            </span>
          </button>
          Or 
          <a
            href=""
          >
            register now!
          </a>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/register.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="register"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="register_email"
        title="E-mail"
      >
        E-mail
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="register_email"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="register_password"
        title="Password"
      >
        Password
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-password ant-input-affix-wrapper"
          >
            <input
              action="click"
              class="ant-input"
              id="register_password"
              type="password"
              value=""
            />
            <span
              class="ant-input-suffix"
            >
              <span
                aria-label="eye-invisible"
                class="anticon anticon-eye-invisible ant-input-password-icon"
                role="img"
                tabindex="-1"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="eye-invisible"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
                  />
                  <path
                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="register_confirm"
        title="Confirm Password"
      >
        Confirm Password
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-password ant-input-affix-wrapper"
          >
            <input
              action="click"
              class="ant-input"
              id="register_confirm"
              type="password"
              value=""
            />
            <span
              class="ant-input-suffix"
            >
              <span
                aria-label="eye-invisible"
                class="anticon anticon-eye-invisible ant-input-password-icon"
                role="img"
                tabindex="-1"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="eye-invisible"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
                  />
                  <path
                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="register_nickname"
        title=""
      >
        <span>
          Nickname 
          <span
            aria-label="question-circle"
            class="anticon anticon-question-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="question-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
              />
              <path
                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
              />
            </svg>
          </span>
        </span>
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="register_nickname"
            type="text"
            value=""
          />
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="register_residence"
        title="Habitual Residence"
      >
        Habitual Residence
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-cascader-picker"
            tabindex="0"
          >
            <span
              class="ant-cascader-picker-label"
            >
              Zhejiang / Hangzhou / West Lake
            </span>
            <input
              autocomplete="off"
              class="ant-input ant-cascader-input "
              id="register_residence"
              readonly=""
              tabindex="-1"
              type="text"
              value=""
            />
            <span
              aria-label="close-circle"
              class="anticon anticon-close-circle ant-cascader-picker-clear"
              role="img"
              tabindex="-1"
            >
              <svg
                aria-hidden="true"
                class=""
                data-icon="close-circle"
                fill="currentColor"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                />
              </svg>
            </span>
            <span
              aria-label="down"
              class="anticon anticon-down ant-cascader-picker-arrow"
              role="img"
            >
              <svg
                aria-hidden="true"
                class=""
                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>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="register_phone"
        title="Phone Number"
      >
        Phone Number
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-group-wrapper"
            style="width:100%"
          >
            <span
              class="ant-input-wrapper ant-input-group"
            >
              <span
                class="ant-input-group-addon"
              >
                <div
                  class="ant-select ant-select-single ant-select-show-arrow"
                  style="width:70px"
                >
                  <div
                    class="ant-select-selector"
                  >
                    <span
                      class="ant-select-selection-search"
                    >
                      <input
                        aria-activedescendant="register_prefix_list_0"
                        aria-autocomplete="list"
                        aria-controls="register_prefix_list"
                        aria-haspopup="listbox"
                        aria-owns="register_prefix_list"
                        autocomplete="off"
                        class="ant-select-selection-search-input"
                        id="register_prefix"
                        readonly=""
                        role="combobox"
                        style="opacity:0"
                        unselectable="on"
                        value=""
                      />
                    </span>
                    <span
                      class="ant-select-selection-item"
                    >
                      +86
                    </span>
                  </div>
                  <span
                    aria-hidden="true"
                    class="ant-select-arrow"
                    style="user-select:none;-webkit-user-select:none"
                    unselectable="on"
                  >
                    <span
                      aria-label="down"
                      class="anticon anticon-down"
                      role="img"
                    >
                      <svg
                        aria-hidden="true"
                        class=""
                        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>
              </span>
              <input
                class="ant-input"
                id="register_phone"
                type="text"
                value=""
              />
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="register_website"
        title="Website"
      >
        Website
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
          >
            <div
              class="ant-select-selector"
            >
              <span
                class="ant-select-selection-search"
              >
                <input
                  aria-activedescendant="register_website_list_0"
                  aria-autocomplete="list"
                  aria-controls="register_website_list"
                  aria-haspopup="listbox"
                  aria-owns="register_website_list"
                  autocomplete="off"
                  class="ant-input ant-select-selection-search-input"
                  id="register_website"
                  role="combobox"
                  type="text"
                  value=""
                />
              </span>
              <span
                class="ant-select-selection-placeholder"
              >
                website
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class=""
        title="Captcha"
      >
        Captcha
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-row"
            style="margin-left:-4px;margin-right:-4px"
          >
            <div
              class="ant-col ant-col-12"
              style="padding-left:4px;padding-right:4px"
            >
              <input
                class="ant-input"
                id="register_captcha"
                type="text"
                value=""
              />
            </div>
            <div
              class="ant-col ant-col-12"
              style="padding-left:4px;padding-right:4px"
            >
              <button
                class="ant-btn"
                type="button"
              >
                <span>
                  Get captcha
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-form-item-extra"
      >
        We must make sure that your are a human.
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <label
            class="ant-checkbox-wrapper"
          >
            <span
              class="ant-checkbox"
            >
              <input
                class="ant-checkbox-input"
                id="register_agreement"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
            <span>
              I have read the 
              <a
                href=""
              >
                agreement
              </a>
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Register
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/size.md correctly 1`] = `
<div>
  <form
    class="ant-form ant-form-horizontal ant-form-small"
  >
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          for="size"
          title="Form Size"
        >
          Form Size
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <div
              class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
              id="size"
            >
              <label
                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
              >
                <span
                  class="ant-radio-button ant-radio-button-checked"
                >
                  <input
                    checked=""
                    class="ant-radio-button-input"
                    type="radio"
                    value="small"
                  />
                  <span
                    class="ant-radio-button-inner"
                  />
                </span>
                <span>
                  Small
                </span>
              </label>
              <label
                class="ant-radio-button-wrapper"
              >
                <span
                  class="ant-radio-button"
                >
                  <input
                    class="ant-radio-button-input"
                    type="radio"
                    value="middle"
                  />
                  <span
                    class="ant-radio-button-inner"
                  />
                </span>
                <span>
                  Middle
                </span>
              </label>
              <label
                class="ant-radio-button-wrapper"
              >
                <span
                  class="ant-radio-button"
                >
                  <input
                    class="ant-radio-button-input"
                    type="radio"
                    value="large"
                  />
                  <span
                    class="ant-radio-button-inner"
                  />
                </span>
                <span>
                  Large
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="Input"
        >
          Input
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <input
              class="ant-input ant-input-sm"
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="Select"
        >
          Select
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <div
              class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
            >
              <div
                class="ant-select-selector"
              >
                <span
                  class="ant-select-selection-search"
                >
                  <input
                    aria-activedescendant="undefined_list_0"
                    aria-autocomplete="list"
                    aria-controls="undefined_list"
                    aria-haspopup="listbox"
                    aria-owns="undefined_list"
                    autocomplete="off"
                    class="ant-select-selection-search-input"
                    readonly=""
                    role="combobox"
                    style="opacity:0"
                    unselectable="on"
                    value=""
                  />
                </span>
                <span
                  class="ant-select-selection-placeholder"
                />
              </div>
              <span
                aria-hidden="true"
                class="ant-select-arrow"
                style="user-select:none;-webkit-user-select:none"
                unselectable="on"
              >
                <span
                  aria-label="down"
                  class="anticon anticon-down"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="TreeSelect"
        >
          TreeSelect
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <div
              class="ant-select ant-tree-select ant-select-sm ant-select-single ant-select-show-arrow"
            >
              <div
                class="ant-select-selector"
              >
                <span
                  class="ant-select-selection-search"
                >
                  <input
                    aria-activedescendant="undefined_list_0"
                    aria-autocomplete="list"
                    aria-controls="undefined_list"
                    aria-haspopup="listbox"
                    aria-owns="undefined_list"
                    autocomplete="off"
                    class="ant-select-selection-search-input"
                    readonly=""
                    role="combobox"
                    style="opacity:0"
                    unselectable="on"
                    value=""
                  />
                </span>
                <span
                  class="ant-select-selection-placeholder"
                />
              </div>
              <span
                aria-hidden="true"
                class="ant-select-arrow"
                style="user-select:none;-webkit-user-select:none"
                unselectable="on"
              >
                <span
                  aria-label="down"
                  class="anticon anticon-down"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="Cascader"
        >
          Cascader
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <span
              class="ant-cascader-picker ant-cascader-picker-small"
              tabindex="0"
            >
              <span
                class="ant-cascader-picker-label"
              />
              <input
                autocomplete="off"
                class="ant-input ant-input-sm ant-cascader-input ant-input-sm"
                placeholder="Please select"
                readonly=""
                tabindex="-1"
                type="text"
                value=""
              />
              <span
                aria-label="down"
                class="anticon anticon-down ant-cascader-picker-arrow"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  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>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="DatePicker"
        >
          DatePicker
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <div
              class="ant-picker ant-picker-small"
            >
              <div
                class="ant-picker-input"
              >
                <input
                  autocomplete="off"
                  placeholder="Select date"
                  readonly=""
                  size="12"
                  title=""
                  value=""
                />
                <span
                  class="ant-picker-suffix"
                >
                  <span
                    aria-label="calendar"
                    class="anticon anticon-calendar"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="calendar"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                      />
                    </svg>
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="InputNumber"
        >
          InputNumber
        </label>
      </div>
      <div
        class="ant-col ant-col-14 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-sm"
            >
              <div
                class="ant-input-number-handler-wrap"
              >
                <span
                  aria-label="Increase Value"
                  class="ant-input-number-handler ant-input-number-handler-up"
                  role="button"
                  unselectable="unselectable"
                >
                  <span
                    aria-label="up"
                    class="anticon anticon-up ant-input-number-handler-up-inner"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      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-label="Decrease Value"
                  class="ant-input-number-handler ant-input-number-handler-down"
                  role="button"
                  unselectable="unselectable"
                >
                  <span
                    aria-label="down"
                    class="anticon anticon-down ant-input-number-handler-down-inner"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      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-valuemin="-9007199254740991"
                  autocomplete="off"
                  class="ant-input-number-input"
                  min="-9007199254740991"
                  role="spinbutton"
                  step="1"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="Switch"
        >
          Switch
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <button
              aria-checked="false"
              class="ant-switch ant-switch-small"
              role="switch"
              type="button"
            >
              <div
                class="ant-switch-handle"
              />
              <span
                class="ant-switch-inner"
              />
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-row ant-form-item"
    >
      <div
        class="ant-col ant-col-4 ant-form-item-label"
      >
        <label
          class=""
          title="Button"
        >
          Button
        </label>
      </div>
      <div
        class="ant-col ant-col-14 ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <button
              class="ant-btn ant-btn-sm"
              type="button"
            >
              <span>
                Button
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="time_related_controls"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="time_related_controls_date-picker"
        title="DatePicker"
      >
        DatePicker
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker"
          >
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                id="time_related_controls_date-picker"
                placeholder="Select date"
                readonly=""
                size="12"
                title=""
                value=""
              />
              <span
                class="ant-picker-suffix"
              >
                <span
                  aria-label="calendar"
                  class="anticon anticon-calendar"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="calendar"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                    />
                  </svg>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="time_related_controls_date-time-picker"
        title="DatePicker[showTime]"
      >
        DatePicker[showTime]
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker"
          >
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                id="time_related_controls_date-time-picker"
                placeholder="Select date"
                readonly=""
                size="21"
                title=""
                value=""
              />
              <span
                class="ant-picker-suffix"
              >
                <span
                  aria-label="calendar"
                  class="anticon anticon-calendar"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="calendar"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                    />
                  </svg>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="time_related_controls_month-picker"
        title="MonthPicker"
      >
        MonthPicker
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker"
          >
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                id="time_related_controls_month-picker"
                placeholder="Select month"
                readonly=""
                size="12"
                title=""
                value=""
              />
              <span
                class="ant-picker-suffix"
              >
                <span
                  aria-label="calendar"
                  class="anticon anticon-calendar"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="calendar"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                    />
                  </svg>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="time_related_controls_range-picker"
        title="RangePicker"
      >
        RangePicker
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker ant-picker-range"
          >
            <div
              class="ant-picker-input ant-picker-input-active"
            >
              <input
                autocomplete="off"
                id="time_related_controls_range-picker"
                placeholder="Start date"
                readonly=""
                size="12"
                value=""
              />
            </div>
            <div
              class="ant-picker-range-separator"
            >
              <span
                aria-label="to"
                class="ant-picker-separator"
              >
                <span
                  aria-label="swap-right"
                  class="anticon anticon-swap-right"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="swap-right"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="0 0 1024 1024"
                    width="1em"
                  >
                    <path
                      d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
                    />
                  </svg>
                </span>
              </span>
            </div>
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                placeholder="End date"
                readonly=""
                size="12"
                value=""
              />
            </div>
            <div
              class="ant-picker-active-bar"
              style="left:0;width:0;position:absolute"
            />
            <span
              class="ant-picker-suffix"
            >
              <span
                aria-label="calendar"
                class="anticon anticon-calendar"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="calendar"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="time_related_controls_range-time-picker"
        title="RangePicker[showTime]"
      >
        RangePicker[showTime]
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker ant-picker-range"
          >
            <div
              class="ant-picker-input ant-picker-input-active"
            >
              <input
                autocomplete="off"
                id="time_related_controls_range-time-picker"
                placeholder="Start date"
                readonly=""
                size="21"
                value=""
              />
            </div>
            <div
              class="ant-picker-range-separator"
            >
              <span
                aria-label="to"
                class="ant-picker-separator"
              >
                <span
                  aria-label="swap-right"
                  class="anticon anticon-swap-right"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="swap-right"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="0 0 1024 1024"
                    width="1em"
                  >
                    <path
                      d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
                    />
                  </svg>
                </span>
              </span>
            </div>
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                placeholder="End date"
                readonly=""
                size="21"
                value=""
              />
            </div>
            <div
              class="ant-picker-active-bar"
              style="left:0;width:0;position:absolute"
            />
            <span
              class="ant-picker-suffix"
            >
              <span
                aria-label="calendar"
                class="anticon anticon-calendar"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="calendar"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
    >
      <label
        class="ant-form-item-required"
        for="time_related_controls_time-picker"
        title="TimePicker"
      >
        TimePicker
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker"
          >
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                id="time_related_controls_time-picker"
                placeholder="Select time"
                readonly=""
                size="10"
                title=""
                value=""
              />
              <span
                class="ant-picker-suffix"
              >
                <span
                  aria-label="clock-circle"
                  class="anticon anticon-clock-circle"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="clock-circle"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                    />
                    <path
                      d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
                    />
                  </svg>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
  id="validate_other"
>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        title="Plain Text"
      >
        Plain Text
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-form-text"
          >
            China
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="validate_other_select"
        title="Select"
      >
        Select
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-select ant-select-single ant-select-show-arrow"
          >
            <div
              class="ant-select-selector"
            >
              <span
                class="ant-select-selection-search"
              >
                <input
                  aria-activedescendant="validate_other_select_list_0"
                  aria-autocomplete="list"
                  aria-controls="validate_other_select_list"
                  aria-haspopup="listbox"
                  aria-owns="validate_other_select_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
                  id="validate_other_select"
                  readonly=""
                  role="combobox"
                  style="opacity:0"
                  unselectable="on"
                  value=""
                />
              </span>
              <span
                class="ant-select-selection-placeholder"
              >
                Please select a country
              </span>
            </div>
            <span
              aria-hidden="true"
              class="ant-select-arrow"
              style="user-select:none;-webkit-user-select:none"
              unselectable="on"
            >
              <span
                aria-label="down"
                class="anticon anticon-down"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  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>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class="ant-form-item-required"
        for="validate_other_select-multiple"
        title="Select[multiple]"
      >
        Select[multiple]
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-select ant-select-multiple ant-select-show-search"
          >
            <div
              class="ant-select-selector"
            >
              <span
                class="ant-select-selection-search"
                style="width:0"
              >
                <input
                  aria-activedescendant="validate_other_select-multiple_list_0"
                  aria-autocomplete="list"
                  aria-controls="validate_other_select-multiple_list"
                  aria-haspopup="listbox"
                  aria-owns="validate_other_select-multiple_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
                  id="validate_other_select-multiple"
                  readonly=""
                  role="combobox"
                  style="opacity:0"
                  unselectable="on"
                  value=""
                />
                <span
                  aria-hidden="true"
                  class="ant-select-selection-search-mirror"
                >
                   
                </span>
              </span>
              <span
                class="ant-select-selection-placeholder"
              >
                Please select favourite colors
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        title="InputNumber"
      >
        InputNumber
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-input-number"
          >
            <div
              class="ant-input-number-handler-wrap"
            >
              <span
                aria-label="Increase Value"
                class="ant-input-number-handler ant-input-number-handler-up"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="up"
                  class="anticon anticon-up ant-input-number-handler-up-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-label="Decrease Value"
                class="ant-input-number-handler ant-input-number-handler-down"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="down"
                  class="anticon anticon-down ant-input-number-handler-down-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-valuemax="10"
                aria-valuemin="1"
                aria-valuenow="3"
                autocomplete="off"
                class="ant-input-number-input"
                id="validate_other_input-number"
                max="10"
                min="1"
                role="spinbutton"
                step="1"
                value="3"
              />
            </div>
          </div>
          <span
            class="ant-form-text"
          >
             machines
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        for="validate_other_switch"
        title="Switch"
      >
        Switch
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            aria-checked="false"
            class="ant-switch"
            id="validate_other_switch"
            role="switch"
            type="button"
          >
            <div
              class="ant-switch-handle"
            />
            <span
              class="ant-switch-inner"
            />
          </button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        for="validate_other_slider"
        title="Slider"
      >
        Slider
      </label>
    </div>
    <div
      class="ant-col ant-col-14 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-with-marks"
          >
            <div
              class="ant-slider-rail"
            />
            <div
              class="ant-slider-track"
              style="left:0%;right:auto;width:0%"
            />
            <div
              class="ant-slider-step"
            >
              <span
                class="ant-slider-dot ant-slider-dot-active"
                style="left:0%"
              />
              <span
                class="ant-slider-dot"
                style="left:20%"
              />
              <span
                class="ant-slider-dot"
                style="left:40%"
              />
              <span
                class="ant-slider-dot"
                style="left:60%"
              />
              <span
                class="ant-slider-dot"
                style="left:80%"
              />
              <span
                class="ant-slider-dot"
                style="left:100%"
              />
            </div>
            <div
              aria-disabled="false"
              aria-valuemax="100"
              aria-valuemin="0"
              aria-valuenow="0"
              class="ant-slider-handle"
              role="slider"
              style="left:0%;right:auto;transform:translateX(-50%)"
              tabindex="0"
            />
            <div
              class="ant-slider-mark"
            >
              <span
                class="ant-slider-mark-text ant-slider-mark-text-active"
                style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
              >
                A
              </span>
              <span
                class="ant-slider-mark-text"
                style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
              >
                B
              </span>
              <span
                class="ant-slider-mark-text"
                style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
              >
                C
              </span>
              <span
                class="ant-slider-mark-text"
                style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
              >
                D
              </span>
              <span
                class="ant-slider-mark-text"
                style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
              >
                E
              </span>
              <span
                class="ant-slider-mark-text"
                style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
              >
                F
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        for="validate_other_radio-group"
        title="Radio.Group"
      >
        Radio.Group
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-radio-group ant-radio-group-outline"
            id="validate_other_radio-group"
          >
            <label
              class="ant-radio-wrapper"
            >
              <span
                class="ant-radio"
              >
                <input
                  class="ant-radio-input"
                  type="radio"
                  value="a"
                />
                <span
                  class="ant-radio-inner"
                />
              </span>
              <span>
                item 1
              </span>
            </label>
            <label
              class="ant-radio-wrapper"
            >
              <span
                class="ant-radio"
              >
                <input
                  class="ant-radio-input"
                  type="radio"
                  value="b"
                />
                <span
                  class="ant-radio-inner"
                />
              </span>
              <span>
                item 2
              </span>
            </label>
            <label
              class="ant-radio-wrapper"
            >
              <span
                class="ant-radio"
              >
                <input
                  class="ant-radio-input"
                  type="radio"
                  value="c"
                />
                <span
                  class="ant-radio-inner"
                />
              </span>
              <span>
                item 3
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        for="validate_other_radio-button"
        title="Radio.Button"
      >
        Radio.Button
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-radio-group ant-radio-group-outline"
            id="validate_other_radio-button"
          >
            <label
              class="ant-radio-button-wrapper"
            >
              <span
                class="ant-radio-button"
              >
                <input
                  class="ant-radio-button-input"
                  type="radio"
                  value="a"
                />
                <span
                  class="ant-radio-button-inner"
                />
              </span>
              <span>
                item 1
              </span>
            </label>
            <label
              class="ant-radio-button-wrapper"
            >
              <span
                class="ant-radio-button"
              >
                <input
                  class="ant-radio-button-input"
                  type="radio"
                  value="b"
                />
                <span
                  class="ant-radio-button-inner"
                />
              </span>
              <span>
                item 2
              </span>
            </label>
            <label
              class="ant-radio-button-wrapper"
            >
              <span
                class="ant-radio-button"
              >
                <input
                  class="ant-radio-button-input"
                  type="radio"
                  value="c"
                />
                <span
                  class="ant-radio-button-inner"
                />
              </span>
              <span>
                item 3
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        for="validate_other_checkbox-group"
        title="Checkbox.Group"
      >
        Checkbox.Group
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-checkbox-group"
            id="validate_other_checkbox-group"
          >
            <div
              class="ant-row"
            >
              <div
                class="ant-col ant-col-8"
              >
                <label
                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
                  style="line-height:32px"
                >
                  <span
                    class="ant-checkbox ant-checkbox-checked"
                  >
                    <input
                      checked=""
                      class="ant-checkbox-input"
                      type="checkbox"
                      value="A"
                    />
                    <span
                      class="ant-checkbox-inner"
                    />
                  </span>
                  <span>
                    A
                  </span>
                </label>
              </div>
              <div
                class="ant-col ant-col-8"
              >
                <label
                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
                  style="line-height:32px"
                >
                  <span
                    class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
                  >
                    <input
                      checked=""
                      class="ant-checkbox-input"
                      disabled=""
                      type="checkbox"
                      value="B"
                    />
                    <span
                      class="ant-checkbox-inner"
                    />
                  </span>
                  <span>
                    B
                  </span>
                </label>
              </div>
              <div
                class="ant-col ant-col-8"
              >
                <label
                  class="ant-checkbox-wrapper"
                  style="line-height:32px"
                >
                  <span
                    class="ant-checkbox"
                  >
                    <input
                      class="ant-checkbox-input"
                      type="checkbox"
                      value="C"
                    />
                    <span
                      class="ant-checkbox-inner"
                    />
                  </span>
                  <span>
                    C
                  </span>
                </label>
              </div>
              <div
                class="ant-col ant-col-8"
              >
                <label
                  class="ant-checkbox-wrapper"
                  style="line-height:32px"
                >
                  <span
                    class="ant-checkbox"
                  >
                    <input
                      class="ant-checkbox-input"
                      type="checkbox"
                      value="D"
                    />
                    <span
                      class="ant-checkbox-inner"
                    />
                  </span>
                  <span>
                    D
                  </span>
                </label>
              </div>
              <div
                class="ant-col ant-col-8"
              >
                <label
                  class="ant-checkbox-wrapper"
                  style="line-height:32px"
                >
                  <span
                    class="ant-checkbox"
                  >
                    <input
                      class="ant-checkbox-input"
                      type="checkbox"
                      value="E"
                    />
                    <span
                      class="ant-checkbox-inner"
                    />
                  </span>
                  <span>
                    E
                  </span>
                </label>
              </div>
              <div
                class="ant-col ant-col-8"
              >
                <label
                  class="ant-checkbox-wrapper"
                  style="line-height:32px"
                >
                  <span
                    class="ant-checkbox"
                  >
                    <input
                      class="ant-checkbox-input"
                      type="checkbox"
                      value="F"
                    />
                    <span
                      class="ant-checkbox-inner"
                    />
                  </span>
                  <span>
                    F
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        for="validate_other_rate"
        title="Rate"
      >
        Rate
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <ul
            class="ant-rate"
            role="radiogroup"
            tabindex="0"
          >
            <li
              class="ant-rate-star ant-rate-star-full"
            >
              <div
                aria-checked="true"
                aria-posinset="1"
                aria-setsize="5"
                role="radio"
                tabindex="0"
              >
                <div
                  class="ant-rate-star-first"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
                <div
                  class="ant-rate-star-second"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
              </div>
            </li>
            <li
              class="ant-rate-star ant-rate-star-full"
            >
              <div
                aria-checked="true"
                aria-posinset="2"
                aria-setsize="5"
                role="radio"
                tabindex="0"
              >
                <div
                  class="ant-rate-star-first"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
                <div
                  class="ant-rate-star-second"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
              </div>
            </li>
            <li
              class="ant-rate-star ant-rate-star-full"
            >
              <div
                aria-checked="true"
                aria-posinset="3"
                aria-setsize="5"
                role="radio"
                tabindex="0"
              >
                <div
                  class="ant-rate-star-first"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
                <div
                  class="ant-rate-star-second"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
              </div>
            </li>
            <li
              class="ant-rate-star ant-rate-star-zero"
            >
              <div
                aria-checked="true"
                aria-posinset="4"
                aria-setsize="5"
                role="radio"
                tabindex="0"
              >
                <div
                  class="ant-rate-star-first"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
                <div
                  class="ant-rate-star-second"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
              </div>
            </li>
            <li
              class="ant-rate-star ant-rate-star-zero"
            >
              <div
                aria-checked="false"
                aria-posinset="5"
                aria-setsize="5"
                role="radio"
                tabindex="0"
              >
                <div
                  class="ant-rate-star-first"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
                <div
                  class="ant-rate-star-second"
                >
                  <span
                    aria-label="star"
                    class="anticon anticon-star"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="star"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
                      />
                    </svg>
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        for="validate_other_upload"
        title="Upload"
      >
        Upload
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class=""
          >
            <div
              class="ant-upload ant-upload-select ant-upload-select-picture"
            >
              <span
                class="ant-upload"
                role="button"
                tabindex="0"
              >
                <input
                  accept=""
                  id="validate_other_upload"
                  style="display:none"
                  type="file"
                />
                <button
                  class="ant-btn"
                  type="button"
                >
                  <span
                    aria-label="upload"
                    class="anticon anticon-upload"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      class=""
                      data-icon="upload"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
                      />
                    </svg>
                  </span>
                  <span>
                     Click to upload
                  </span>
                </button>
              </span>
            </div>
            <div
              class="ant-upload-list ant-upload-list-picture"
            />
          </span>
        </div>
      </div>
      <div
        class="ant-form-item-extra"
      >
        longgggggggggggggggggggggggggggggggggg
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-6 ant-form-item-label"
    >
      <label
        class=""
        title="Dragger"
      >
        Dragger
      </label>
    </div>
    <div
      class="ant-col ant-col-14 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span>
            <div
              class="ant-upload ant-upload-drag"
            >
              <span
                class="ant-upload ant-upload-btn"
                role="button"
                tabindex="0"
              >
                <input
                  accept=""
                  id="validate_other_dragger"
                  style="display:none"
                  type="file"
                />
                <div
                  class="ant-upload-drag-container"
                >
                  <p
                    class="ant-upload-drag-icon"
                  >
                    <span
                      aria-label="inbox"
                      class="anticon anticon-inbox"
                      role="img"
                    >
                      <svg
                        aria-hidden="true"
                        class=""
                        data-icon="inbox"
                        fill="currentColor"
                        focusable="false"
                        height="1em"
                        viewBox="0 0 1024 1024"
                        width="1em"
                      >
                        <path
                          d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
                        />
                      </svg>
                    </span>
                  </p>
                  <p
                    class="ant-upload-text"
                  >
                    Click or drag file to this area to upload
                  </p>
                  <p
                    class="ant-upload-hint"
                  >
                    Support for a single or bulk upload.
                  </p>
                </div>
              </span>
            </div>
            <div
              class="ant-upload-list ant-upload-list-text"
            />
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
  >
    <div
      class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <button
            class="ant-btn ant-btn-primary"
            type="submit"
          >
            <span>
              Submit
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
>
  <div
    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Fail"
      >
        Fail
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="error"
            placeholder="unavailable choice"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="ant-form-item-explain"
      >
        <div>
          Should be combination of numbers & alphabets
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-warning"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Warning"
      >
        Warning
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-affix-wrapper"
          >
            <span
              class="ant-input-prefix"
            >
              <span
                aria-label="smile"
                class="anticon anticon-smile"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="smile"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
                  />
                </svg>
              </span>
            </span>
            <input
              class="ant-input"
              id="warning"
              placeholder="Warning"
              type="text"
              value=""
            />
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Validating"
      >
        Validating
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="validating"
            placeholder="I'm the content is being validated"
            type="text"
            value=""
          />
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="loading"
            class="anticon anticon-loading"
            role="img"
          >
            <svg
              aria-hidden="true"
              class="anticon-spin"
              data-icon="loading"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="0 0 1024 1024"
              width="1em"
            >
              <path
                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
              />
            </svg>
          </span>
        </span>
      </div>
      <div
        class="ant-form-item-explain"
      >
        <div>
          The information is being validated...
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Success"
      >
        Success
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="success"
            placeholder="I'm the content"
            type="text"
            value=""
          />
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="check-circle"
            class="anticon anticon-check-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="check-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Warning"
      >
        Warning
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="warning2"
            placeholder="Warning"
            type="text"
            value=""
          />
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="exclamation-circle"
            class="anticon anticon-exclamation-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="exclamation-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Fail"
      >
        Fail
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <input
            class="ant-input"
            id="error2"
            placeholder="unavailable choice"
            type="text"
            value=""
          />
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="close-circle"
            class="anticon anticon-close-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="close-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
              />
            </svg>
          </span>
        </span>
      </div>
      <div
        class="ant-form-item-explain"
      >
        <div>
          Should be combination of numbers & alphabets
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Success"
      >
        Success
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker"
            style="width:100%"
          >
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                placeholder="Select date"
                readonly=""
                size="12"
                title=""
                value=""
              />
              <span
                class="ant-picker-suffix"
              >
                <span
                  aria-label="calendar"
                  class="anticon anticon-calendar"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="calendar"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                    />
                  </svg>
                </span>
              </span>
            </div>
          </div>
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="check-circle"
            class="anticon anticon-check-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="check-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Warning"
      >
        Warning
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-picker"
            style="width:100%"
          >
            <div
              class="ant-picker-input"
            >
              <input
                autocomplete="off"
                placeholder="Select time"
                readonly=""
                size="10"
                title=""
                value=""
              />
              <span
                class="ant-picker-suffix"
              >
                <span
                  aria-label="clock-circle"
                  class="anticon anticon-clock-circle"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="clock-circle"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                    />
                    <path
                      d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
                    />
                  </svg>
                </span>
              </span>
            </div>
          </div>
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="exclamation-circle"
            class="anticon anticon-exclamation-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="exclamation-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Error"
      >
        Error
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-select ant-select-single ant-select-show-arrow"
          >
            <div
              class="ant-select-selector"
            >
              <span
                class="ant-select-selection-search"
              >
                <input
                  aria-activedescendant="undefined_list_0"
                  aria-autocomplete="list"
                  aria-controls="undefined_list"
                  aria-haspopup="listbox"
                  aria-owns="undefined_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
                  readonly=""
                  role="combobox"
                  style="opacity:0"
                  unselectable="on"
                  value=""
                />
              </span>
              <span
                class="ant-select-selection-placeholder"
              />
            </div>
            <span
              aria-hidden="true"
              class="ant-select-arrow"
              style="user-select:none;-webkit-user-select:none"
              unselectable="on"
            >
              <span
                aria-label="down"
                class="anticon anticon-down"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  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>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="close-circle"
            class="anticon anticon-close-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="close-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Validating"
      >
        Validating
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-cascader-picker"
            tabindex="0"
          >
            <span
              class="ant-cascader-picker-label"
            />
            <input
              autocomplete="off"
              class="ant-input ant-cascader-input "
              placeholder="Please select"
              readonly=""
              tabindex="-1"
              type="text"
              value=""
            />
            <span
              aria-label="down"
              class="anticon anticon-down ant-cascader-picker-arrow"
              role="img"
            >
              <svg
                aria-hidden="true"
                class=""
                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>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="loading"
            class="anticon anticon-loading"
            role="img"
          >
            <svg
              aria-hidden="true"
              class="anticon-spin"
              data-icon="loading"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="0 0 1024 1024"
              width="1em"
            >
              <path
                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
              />
            </svg>
          </span>
        </span>
      </div>
      <div
        class="ant-form-item-explain"
      >
        <div>
          The information is being validated...
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item"
    style="margin-bottom:0"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="inline"
      >
        inline
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
            style="display:inline-block;width:calc(50% - 12px)"
          >
            <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-picker"
                  >
                    <div
                      class="ant-picker-input"
                    >
                      <input
                        autocomplete="off"
                        placeholder="Select date"
                        readonly=""
                        size="12"
                        title=""
                        value=""
                      />
                      <span
                        class="ant-picker-suffix"
                      >
                        <span
                          aria-label="calendar"
                          class="anticon anticon-calendar"
                          role="img"
                        >
                          <svg
                            aria-hidden="true"
                            class=""
                            data-icon="calendar"
                            fill="currentColor"
                            focusable="false"
                            height="1em"
                            viewBox="64 64 896 896"
                            width="1em"
                          >
                            <path
                              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                            />
                          </svg>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="ant-form-item-explain"
              >
                <div>
                  Please select the correct date
                </div>
              </div>
            </div>
          </div>
          <span
            style="display:inline-block;width:24px;line-height:32px;text-align:center"
          >
            -
          </span>
          <div
            class="ant-row ant-form-item"
            style="display:inline-block;width:calc(50% - 12px)"
          >
            <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-picker"
                  >
                    <div
                      class="ant-picker-input"
                    >
                      <input
                        autocomplete="off"
                        placeholder="Select date"
                        readonly=""
                        size="12"
                        title=""
                        value=""
                      />
                      <span
                        class="ant-picker-suffix"
                      >
                        <span
                          aria-label="calendar"
                          class="anticon anticon-calendar"
                          role="img"
                        >
                          <svg
                            aria-hidden="true"
                            class=""
                            data-icon="calendar"
                            fill="currentColor"
                            focusable="false"
                            height="1em"
                            viewBox="64 64 896 896"
                            width="1em"
                          >
                            <path
                              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
                            />
                          </svg>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Success"
      >
        Success
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-input-number"
            style="width:100%"
          >
            <div
              class="ant-input-number-handler-wrap"
            >
              <span
                aria-label="Increase Value"
                class="ant-input-number-handler ant-input-number-handler-up"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="up"
                  class="anticon anticon-up ant-input-number-handler-up-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-label="Decrease Value"
                class="ant-input-number-handler ant-input-number-handler-down"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="down"
                  class="anticon anticon-down ant-input-number-handler-down-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-valuemin="-9007199254740991"
                autocomplete="off"
                class="ant-input-number-input"
                min="-9007199254740991"
                role="spinbutton"
                step="1"
                value=""
              />
            </div>
          </div>
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="check-circle"
            class="anticon anticon-check-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="check-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Success"
      >
        Success
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-affix-wrapper"
          >
            <input
              class="ant-input"
              placeholder="with allowClear"
              type="text"
              value=""
            />
            <span
              class="ant-input-suffix"
            >
              <span
                aria-label="close-circle"
                class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
                role="button"
                tabindex="-1"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="close-circle"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="check-circle"
            class="anticon anticon-check-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="check-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Warning"
      >
        Warning
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-password ant-input-affix-wrapper"
          >
            <input
              action="click"
              class="ant-input"
              placeholder="with input password"
              type="password"
              value=""
            />
            <span
              class="ant-input-suffix"
            >
              <span
                aria-label="eye-invisible"
                class="anticon anticon-eye-invisible ant-input-password-icon"
                role="img"
                tabindex="-1"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="eye-invisible"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
                  />
                  <path
                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="exclamation-circle"
            class="anticon anticon-exclamation-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="exclamation-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div
    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
  >
    <div
      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
    >
      <label
        class=""
        title="Error"
      >
        Error
      </label>
    </div>
    <div
      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <span
            class="ant-input-password ant-input-affix-wrapper"
          >
            <input
              action="click"
              class="ant-input"
              placeholder="with input password and allowClear"
              type="password"
              value=""
            />
            <span
              class="ant-input-suffix"
            >
              <span
                aria-label="close-circle"
                class="anticon anticon-close-circle ant-input-clear-icon ant-input-clear-icon-hidden"
                role="button"
                tabindex="-1"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="close-circle"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                  />
                </svg>
              </span>
              <span
                aria-label="eye-invisible"
                class="anticon anticon-eye-invisible ant-input-password-icon"
                role="img"
                tabindex="-1"
              >
                <svg
                  aria-hidden="true"
                  class=""
                  data-icon="eye-invisible"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
                  />
                  <path
                    d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
                  />
                </svg>
              </span>
            </span>
          </span>
        </div>
        <span
          class="ant-form-item-children-icon"
        >
          <span
            aria-label="close-circle"
            class="anticon anticon-close-circle"
            role="img"
          >
            <svg
              aria-hidden="true"
              class=""
              data-icon="close-circle"
              fill="currentColor"
              focusable="false"
              height="1em"
              viewBox="64 64 896 896"
              width="1em"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
              />
            </svg>
          </span>
        </span>
      </div>
    </div>
  </div>
</form>
`;

exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
<form
  class="ant-form ant-form-horizontal"
>
  <div
    class="ant-row ant-form-item ant-form-item-with-help"
  >
    <div
      class="ant-col ant-col-7 ant-form-item-label"
    >
      <label
        class=""
        title="Prime between 8 & 12"
      >
        Prime between 8 & 12
      </label>
    </div>
    <div
      class="ant-col ant-col-12 ant-form-item-control"
    >
      <div
        class="ant-form-item-control-input"
      >
        <div
          class="ant-form-item-control-input-content"
        >
          <div
            class="ant-input-number"
          >
            <div
              class="ant-input-number-handler-wrap"
            >
              <span
                aria-label="Increase Value"
                class="ant-input-number-handler ant-input-number-handler-up"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="up"
                  class="anticon anticon-up ant-input-number-handler-up-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-label="Decrease Value"
                class="ant-input-number-handler ant-input-number-handler-down"
                role="button"
                unselectable="unselectable"
              >
                <span
                  aria-label="down"
                  class="anticon anticon-down ant-input-number-handler-down-inner"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    class=""
                    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-valuemax="12"
                aria-valuemin="8"
                aria-valuenow="11"
                autocomplete="off"
                class="ant-input-number-input"
                max="12"
                min="8"
                role="spinbutton"
                step="1"
                value="11"
              />
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-form-item-explain"
      >
        <div>
          A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.
        </div>
      </div>
    </div>
  </div>
</form>
`;