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

exports[`Resizable Skeleton Loader default setup renders the bars, labels, and grid with correct position, size, and rx percentages 1`] = `
<div
  class="gl-px-8"
>
  <svg
    class="gl-skeleton-loader"
    preserveAspectRatio="xMidYMid meet"
    version="1.1"
    viewBox="0 0 400 130"
  >
    <title>
      Loading
    </title>
    <rect
      clip-path="url(#null-idClip)"
      fill="url(#null-idGradient)"
      height="130"
      width="400"
      x="0"
      y="0"
    />
    <defs>
      <clippath
        id="reference-0"
      >
        <rect
          data-testid="skeleton-chart-grid"
          height="1px"
          width="100%"
          x="0"
          y="30%"
        />
        <rect
          data-testid="skeleton-chart-grid"
          height="1px"
          width="100%"
          x="0"
          y="60%"
        />
        <rect
          data-testid="skeleton-chart-grid"
          height="1px"
          width="100%"
          x="0"
          y="90%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="5%"
          rx="0.4%"
          width="4%"
          x="6%"
          y="85%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="7%"
          rx="0.4%"
          width="4%"
          x="18%"
          y="83%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="9%"
          rx="0.4%"
          width="4%"
          x="30%"
          y="81%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="14%"
          rx="0.4%"
          width="4%"
          x="42%"
          y="76%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="21%"
          rx="0.4%"
          width="4%"
          x="54%"
          y="69%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="35%"
          rx="0.4%"
          width="4%"
          x="66%"
          y="55%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="50%"
          rx="0.4%"
          width="4%"
          x="78%"
          y="40%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="80%"
          rx="0.4%"
          width="4%"
          x="90%"
          y="10%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="6.5%"
          y="97%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="18.5%"
          y="97%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="30.5%"
          y="97%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="42.5%"
          y="97%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="54.5%"
          y="97%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="66.5%"
          y="97%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="78.5%"
          y="97%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="3%"
          rx="0.4%"
          width="3%"
          x="90.5%"
          y="97%"
        />
      </clippath>
      <lineargradient
        id="reference-1"
      >
        <stop
          class="primary-stop"
          offset="0%"
        >
          <animate
            attributeName="offset"
            dur="1s"
            repeatCount="indefinite"
            values="-2; 1"
          />
        </stop>
        <stop
          class="secondary-stop"
          offset="50%"
        >
          <animate
            attributeName="offset"
            dur="1s"
            repeatCount="indefinite"
            values="-1.5; 1.5"
          />
        </stop>
        <stop
          class="primary-stop"
          offset="100%"
        >
          <animate
            attributeName="offset"
            dur="1s"
            repeatCount="indefinite"
            values="-1; 2"
          />
        </stop>
      </lineargradient>
    </defs>
  </svg>
</div>
`;

exports[`Resizable Skeleton Loader with custom settings renders the correct position, and size percentages for bars and labels with different settings 1`] = `
<div
  class="gl-px-8"
>
  <svg
    class="gl-skeleton-loader"
    preserveAspectRatio="xMidYMid meet"
    version="1.1"
    viewBox="0 0 400 130"
  >
    <title>
      Loading
    </title>
    <rect
      clip-path="url(#-idClip)"
      fill="url(#-idGradient)"
      height="130"
      width="400"
      x="0"
      y="0"
    />
    <defs>
      <clippath
        id="reference-0"
      >
        <rect
          data-testid="skeleton-chart-grid"
          height="1px"
          width="100%"
          x="0"
          y="30%"
        />
        <rect
          data-testid="skeleton-chart-grid"
          height="1px"
          width="100%"
          x="0"
          y="60%"
        />
        <rect
          data-testid="skeleton-chart-grid"
          height="1px"
          width="100%"
          x="0"
          y="90%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="5%"
          rx="0.6%"
          width="3%"
          x="6.0625%"
          y="85%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="7%"
          rx="0.6%"
          width="3%"
          x="18.1875%"
          y="83%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="9%"
          rx="0.6%"
          width="3%"
          x="30.3125%"
          y="81%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="14%"
          rx="0.6%"
          width="3%"
          x="42.4375%"
          y="76%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="21%"
          rx="0.6%"
          width="3%"
          x="54.5625%"
          y="69%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="35%"
          rx="0.6%"
          width="3%"
          x="66.6875%"
          y="55%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="50%"
          rx="0.6%"
          width="3%"
          x="78.8125%"
          y="40%"
        />
        <rect
          data-testid="skeleton-chart-bar"
          height="80%"
          rx="0.6%"
          width="3%"
          x="90.9375%"
          y="10%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="4.0625%"
          y="98%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="16.1875%"
          y="98%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="28.3125%"
          y="98%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="40.4375%"
          y="98%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="52.5625%"
          y="98%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="64.6875%"
          y="98%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="76.8125%"
          y="98%"
        />
        <rect
          data-testid="skeleton-chart-label"
          height="2%"
          rx="0.6%"
          width="7%"
          x="88.9375%"
          y="98%"
        />
      </clippath>
      <lineargradient
        id="reference-1"
      >
        <stop
          class="primary-stop"
          offset="0%"
        >
          <animate
            attributeName="offset"
            dur="1s"
            repeatCount="indefinite"
            values="-2; 1"
          />
        </stop>
        <stop
          class="secondary-stop"
          offset="50%"
        >
          <animate
            attributeName="offset"
            dur="1s"
            repeatCount="indefinite"
            values="-1.5; 1.5"
          />
        </stop>
        <stop
          class="primary-stop"
          offset="100%"
        >
          <animate
            attributeName="offset"
            dur="1s"
            repeatCount="indefinite"
            values="-1; 2"
          />
        </stop>
      </lineargradient>
    </defs>
  </svg>
</div>
`;