ant-design/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap

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

exports[`renders components/grid/demo/basic.tsx extend context correctly 1`] = `
Array [
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-24"
    >
      col
    </div>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-12"
    >
      col-12
    </div>
    <div
      class="ant-col ant-col-12"
    >
      col-12
    </div>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-8"
    >
      col-8
    </div>
    <div
      class="ant-col ant-col-8"
    >
      col-8
    </div>
    <div
      class="ant-col ant-col-8"
    >
      col-8
    </div>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-6"
    >
      col-6
    </div>
    <div
      class="ant-col ant-col-6"
    >
      col-6
    </div>
    <div
      class="ant-col ant-col-6"
    >
      col-6
    </div>
    <div
      class="ant-col ant-col-6"
    >
      col-6
    </div>
  </div>,
]
`;

exports[`renders components/grid/demo/basic.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/flex.tsx extend context correctly 1`] = `
Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      sub-element align left
    </span>
  </div>,
  <div
    class="ant-row ant-row-start"
  >
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      sub-element align center
    </span>
  </div>,
  <div
    class="ant-row ant-row-center"
  >
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      sub-element align right
    </span>
  </div>,
  <div
    class="ant-row ant-row-end"
  >
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      sub-element monospaced arrangement
    </span>
  </div>,
  <div
    class="ant-row ant-row-space-between"
  >
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      sub-element align full
    </span>
  </div>,
  <div
    class="ant-row ant-row-space-around"
  >
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      sub-element align evenly
    </span>
  </div>,
  <div
    class="ant-row ant-row-space-evenly"
  >
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-4"
    >
      col-4
    </div>
  </div>,
]
`;

exports[`renders components/grid/demo/flex.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/flex-align.tsx extend context correctly 1`] = `
Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Align Top
    </span>
  </div>,
  <div
    class="ant-row ant-row-center ant-row-top"
  >
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-100"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-50"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-120"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-80"
      >
        col-4
      </p>
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Align Middle
    </span>
  </div>,
  <div
    class="ant-row ant-row-space-around ant-row-middle"
  >
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-100"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-50"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-120"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-80"
      >
        col-4
      </p>
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Align Bottom
    </span>
  </div>,
  <div
    class="ant-row ant-row-space-between ant-row-bottom"
  >
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-100"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-50"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-120"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-4"
    >
      <p
        class="height-80"
      >
        col-4
      </p>
    </div>
  </div>,
]
`;

exports[`renders components/grid/demo/flex-align.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/flex-order.tsx extend context correctly 1`] = `
Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Normal
    </span>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-6 ant-col-order-4"
    >
      1 col-order-4
    </div>
    <div
      class="ant-col ant-col-6 ant-col-order-3"
    >
      2 col-order-3
    </div>
    <div
      class="ant-col ant-col-6 ant-col-order-2"
    >
      3 col-order-2
    </div>
    <div
      class="ant-col ant-col-6 ant-col-order-1"
    >
      4 col-order-1
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Responsive
    </span>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-6 ant-col-xs-order-1 ant-col-sm-order-2 ant-col-md-order-3 ant-col-lg-order-4"
    >
      1 col-order-responsive
    </div>
    <div
      class="ant-col ant-col-6 ant-col-xs-order-2 ant-col-sm-order-1 ant-col-md-order-4 ant-col-lg-order-3"
    >
      2 col-order-responsive
    </div>
    <div
      class="ant-col ant-col-6 ant-col-xs-order-3 ant-col-sm-order-4 ant-col-md-order-2 ant-col-lg-order-1"
    >
      3 col-order-responsive
    </div>
    <div
      class="ant-col ant-col-6 ant-col-xs-order-4 ant-col-sm-order-3 ant-col-md-order-1 ant-col-lg-order-2"
    >
      4 col-order-responsive
    </div>
  </div>,
]
`;

exports[`renders components/grid/demo/flex-order.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/flex-stretch.tsx extend context correctly 1`] = `
Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Percentage columns
    </span>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col"
      style="flex: 2 2 auto;"
    >
      2 / 5
    </div>
    <div
      class="ant-col"
      style="flex: 3 3 auto;"
    >
      3 / 5
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Fill rest
    </span>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col"
      style="flex: 0 0 100px;"
    >
      100px
    </div>
    <div
      class="ant-col"
      style="flex-basis: auto;"
    >
      Fill Rest
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Raw flex style
    </span>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col"
      style="flex: 1 1 200px;"
    >
      1 1 200px
    </div>
    <div
      class="ant-col"
      style="flex: 0 1 300px;"
    >
      0 1 300px
    </div>
  </div>,
  <div
    class="ant-row ant-row-no-wrap"
  >
    <div
      class="ant-col"
      style="flex: 0 0 auto; min-width: 0;"
    >
      <div
        style="padding: 0px 16px;"
      >
        none
      </div>
    </div>
    <div
      class="ant-col"
      style="flex-basis: auto; min-width: 0;"
    >
      auto with no-wrap
    </div>
  </div>,
]
`;

exports[`renders components/grid/demo/flex-stretch.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/gutter.tsx extend context correctly 1`] = `
Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Horizontal
    </span>
  </div>,
  <div
    class="ant-row"
    style="margin-left: -8px; margin-right: -8px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Responsive
    </span>
  </div>,
  <div
    class="ant-row"
    style="margin-left: -4px; margin-right: -4px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
  >
    <span
      class="ant-divider-inner-text"
    >
      Vertical
    </span>
  </div>,
  <div
    class="ant-row"
    style="margin-left: -8px; margin-right: -8px; row-gap: 24px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
  </div>,
]
`;

exports[`renders components/grid/demo/gutter.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/offset.tsx extend context correctly 1`] = `
Array [
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-8"
    >
      col-8
    </div>
    <div
      class="ant-col ant-col-8 ant-col-offset-8"
    >
      col-8
    </div>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-6 ant-col-offset-6"
    >
      col-6 col-offset-6
    </div>
    <div
      class="ant-col ant-col-6 ant-col-offset-6"
    >
      col-6 col-offset-6
    </div>
  </div>,
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-12 ant-col-offset-6"
    >
      col-12 col-offset-6
    </div>
  </div>,
]
`;

exports[`renders components/grid/demo/offset.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/playground.tsx extend context correctly 1`] = `
Array [
  <span>
    Horizontal Gutter (px): 
  </span>,
  <div
    style="width: 50%;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
    >
      <div
        class="ant-slider-rail"
      />
      <div
        class="ant-slider-track"
        style="left: 0%; width: 20%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
        aria-disabled="false"
        aria-orientation="horizontal"
        aria-valuemax="5"
        aria-valuemin="0"
        aria-valuenow="1"
        class="ant-slider-handle"
        role="slider"
        style="left: 20%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div
        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
      >
        <div
          class="ant-tooltip-arrow"
          style="position: absolute; bottom: 0px; left: 0px;"
        />
        <div
          class="ant-tooltip-content"
        >
          <div
            class="ant-tooltip-inner"
            role="tooltip"
          >
            16
          </div>
        </div>
      </div>
      <div
        class="ant-slider-mark"
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
          style="left: 0%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
          style="left: 20%; transform: translateX(-50%);"
        >
          16
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 40%; transform: translateX(-50%);"
        >
          24
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 60%; transform: translateX(-50%);"
        >
          32
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 80%; transform: translateX(-50%);"
        >
          40
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 100%; transform: translateX(-50%);"
        >
          48
        </span>
      </div>
    </div>
  </div>,
  <span>
    Vertical Gutter (px): 
  </span>,
  <div
    style="width: 50%;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
    >
      <div
        class="ant-slider-rail"
      />
      <div
        class="ant-slider-track"
        style="left: 0%; width: 20%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
        aria-disabled="false"
        aria-orientation="horizontal"
        aria-valuemax="5"
        aria-valuemin="0"
        aria-valuenow="1"
        class="ant-slider-handle"
        role="slider"
        style="left: 20%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div
        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
      >
        <div
          class="ant-tooltip-arrow"
          style="position: absolute; bottom: 0px; left: 0px;"
        />
        <div
          class="ant-tooltip-content"
        >
          <div
            class="ant-tooltip-inner"
            role="tooltip"
          >
            16
          </div>
        </div>
      </div>
      <div
        class="ant-slider-mark"
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
          style="left: 0%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
          style="left: 20%; transform: translateX(-50%);"
        >
          16
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 40%; transform: translateX(-50%);"
        >
          24
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 60%; transform: translateX(-50%);"
        >
          32
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 80%; transform: translateX(-50%);"
        >
          40
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 100%; transform: translateX(-50%);"
        >
          48
        </span>
      </div>
    </div>
  </div>,
  <span>
    Column Count:
  </span>,
  <div
    style="width: 50%; margin-bottom: 48px;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
    >
      <div
        class="ant-slider-rail"
      />
      <div
        class="ant-slider-track"
        style="left: 0%; width: 40%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
        aria-disabled="false"
        aria-orientation="horizontal"
        aria-valuemax="5"
        aria-valuemin="0"
        aria-valuenow="2"
        class="ant-slider-handle"
        role="slider"
        style="left: 40%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div
        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
      >
        <div
          class="ant-tooltip-arrow"
          style="position: absolute; bottom: 0px; left: 0px;"
        />
        <div
          class="ant-tooltip-content"
        >
          <div
            class="ant-tooltip-inner"
            role="tooltip"
          >
            4
          </div>
        </div>
      </div>
      <div
        class="ant-slider-mark"
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
          style="left: 0%; transform: translateX(-50%);"
        >
          2
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
          style="left: 20%; transform: translateX(-50%);"
        >
          3
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
          style="left: 40%; transform: translateX(-50%);"
        >
          4
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 60%; transform: translateX(-50%);"
        >
          6
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 80%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text"
          style="left: 100%; transform: translateX(-50%);"
        >
          12
        </span>
      </div>
    </div>
  </div>,
  <div
    class="ant-row"
    style="margin-left: -8px; margin-right: -8px; row-gap: 16px;"
  >
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
  </div>,
  Another Row:,
  <div
    class="ant-row"
    style="margin-left: -8px; margin-right: -8px; row-gap: 16px;"
  >
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-6"
      style="padding-left: 8px; padding-right: 8px;"
    >
      <div>
        Column
      </div>
    </div>
  </div>,
  <pre
    class="demo-code"
  >
    &lt;Row gutter={[16, 16]}&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
&lt;/Row&gt;
  </pre>,
  <pre
    class="demo-code"
  >
    &lt;Row gutter={[16, 16]}&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
&lt;/Row&gt;
  </pre>,
]
`;

exports[`renders components/grid/demo/playground.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/responsive.tsx extend context correctly 1`] = `
<div
  class="ant-row"
>
  <div
    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
  >
    Col
  </div>
</div>
`;

exports[`renders components/grid/demo/responsive.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/responsive-flex.tsx extend context correctly 1`] = `
<div
  class="ant-row"
>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
    style="--ant-col-xs-flex: 0 0 100%; --ant-col-sm-flex: 0 0 50%; --ant-col-md-flex: 0 0 40%; --ant-col-lg-flex: 0 0 20%; --ant-col-xl-flex: 0 0 10%;"
  >
    Col
  </div>
</div>
`;

exports[`renders components/grid/demo/responsive-flex.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/responsive-more.tsx extend context correctly 1`] = `
<div
  class="ant-row"
>
  <div
    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
  >
    Col
  </div>
  <div
    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
  >
    Col
  </div>
</div>
`;

exports[`renders components/grid/demo/responsive-more.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/sort.tsx extend context correctly 1`] = `
<div
  class="ant-row"
>
  <div
    class="ant-col ant-col-18 ant-col-push-6"
  >
    col-18 col-push-6
  </div>
  <div
    class="ant-col ant-col-6 ant-col-pull-18"
  >
    col-6 col-pull-18
  </div>
</div>
`;

exports[`renders components/grid/demo/sort.tsx extend context correctly 2`] = `[]`;

exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 1`] = `
Array [
  Current break point: ,
  <span
    class="ant-tag ant-tag-blue"
  >
    xs
  </span>,
]
`;

exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 2`] = `[]`;