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

exports[`renders ./components/carousel/demo/autoplay.md extend context correctly 1`] = `
<div
  class="ant-carousel"
>
  <div
    class="slick-slider slick-initialized"
    dir="ltr"
  >
    <div
      class="slick-list"
    >
      <div
        class="slick-track"
        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
      style="display: block;"
    >
      <li
        class="slick-active"
      >
        <button>
          1
        </button>
      </li>
      <li
        class=""
      >
        <button>
          2
        </button>
      </li>
      <li
        class=""
      >
        <button>
          3
        </button>
      </li>
      <li
        class=""
      >
        <button>
          4
        </button>
      </li>
    </ul>
  </div>
</div>
`;

exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`] = `
<div
  class="ant-carousel"
>
  <div
    class="slick-slider slick-initialized"
    dir="ltr"
  >
    <div
      class="slick-list"
    >
      <div
        class="slick-track"
        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
      style="display: block;"
    >
      <li
        class="slick-active"
      >
        <button>
          1
        </button>
      </li>
      <li
        class=""
      >
        <button>
          2
        </button>
      </li>
      <li
        class=""
      >
        <button>
          3
        </button>
      </li>
      <li
        class=""
      >
        <button>
          4
        </button>
      </li>
    </ul>
  </div>
</div>
`;

exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`] = `
<div
  class="ant-carousel"
>
  <div
    class="slick-slider slick-initialized"
    dir="ltr"
  >
    <div
      class="slick-list"
    >
      <div
        class="slick-track"
        style="opacity: 1;"
      >
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
      style="display: block;"
    >
      <li
        class="slick-active"
      >
        <button>
          1
        </button>
      </li>
      <li
        class=""
      >
        <button>
          2
        </button>
      </li>
      <li
        class=""
      >
        <button>
          3
        </button>
      </li>
      <li
        class=""
      >
        <button>
          4
        </button>
      </li>
    </ul>
  </div>
</div>
`;

exports[`renders ./components/carousel/demo/position.md extend context correctly 1`] = `
Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
    style="margin-bottom: 8px;"
  >
    <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="top"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Top
      </span>
    </label>
    <label
      class="ant-radio-button-wrapper"
    >
      <span
        class="ant-radio-button"
      >
        <input
          class="ant-radio-button-input"
          type="radio"
          value="bottom"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Bottom
      </span>
    </label>
    <label
      class="ant-radio-button-wrapper"
    >
      <span
        class="ant-radio-button"
      >
        <input
          class="ant-radio-button-input"
          type="radio"
          value="left"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Left
      </span>
    </label>
    <label
      class="ant-radio-button-wrapper"
    >
      <span
        class="ant-radio-button"
      >
        <input
          class="ant-radio-button-input"
          type="radio"
          value="right"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Right
      </span>
    </label>
  </div>,
  <div
    class="ant-carousel"
  >
    <div
      class="slick-slider slick-initialized"
      dir="ltr"
    >
      <div
        class="slick-list"
      >
        <div
          class="slick-track"
          style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
        >
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="-1"
            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="false"
            class="slick-slide slick-active slick-current"
            data-index="0"
            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  1
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide"
            data-index="1"
            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  2
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide"
            data-index="2"
            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  3
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide"
            data-index="3"
            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="4"
            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  1
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="5"
            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  2
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="6"
            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  3
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="7"
            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul
        class="slick-dots slick-dots-top"
        style="display: block;"
      >
        <li
          class="slick-active"
        >
          <button>
            1
          </button>
        </li>
        <li
          class=""
        >
          <button>
            2
          </button>
        </li>
        <li
          class=""
        >
          <button>
            3
          </button>
        </li>
        <li
          class=""
        >
          <button>
            4
          </button>
        </li>
      </ul>
    </div>
  </div>,
]
`;