import React from 'react';
import { composeStories } from '@storybook/react-vite';

import { render as testRender } from '../../../vitest/render';

import * as stories from './Image.stories';

const composedStories = composeStories(stories);

describe('Image Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Responsive',
      'CoverWithCustomRatio',
      'Example800x600',
      'Portrait600x900',
      'Small200x200',
      'Square600x600',
      'Large2000x1200',
      'Widescreen1600x900',
      'SizeSmall',
      'SizeLarge',
      'LoadingError',
    ]);

    const untestedStories = storyNames.filter(name => !testedStories.has(name));

    expect(untestedStories).toEqual([]);
  });

  it('renders Default story', () => {
    const Story = composedStories.Default;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Product image"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMDB4MTAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders Responsive story', () => {
    const Story = composedStories.Responsive;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--responsive"
      role="presentation"
    >
      <img
        alt="Responsive product image"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMDB4MTAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders CoverWithCustomRatio story', () => {
    const Story = composedStories.CoverWithCustomRatio;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 4 / 3;"
    >
      <img
        alt="Cover product image"
        class="v2image__img v2image__img--cover"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMDB4MTAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders Example800x600 story', () => {
    const Story = composedStories.Example800x600;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Example 800x600"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNjAwIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCI+CiAgPHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj44MDB4NjAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders Portrait600x900 story', () => {
    const Story = composedStories.Portrait600x900;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Portrait 600x900"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgOTAwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjkwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4OTAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders Small200x200 story', () => {
    const Story = composedStories.Small200x200;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Small example 200x200"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDB4MjAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders Square600x600 story', () => {
    const Story = composedStories.Square600x600;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Square example600x600"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjYwMCI+CiAgPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj42MDB4NjAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders Large2000x1200 story', () => {
    const Story = composedStories.Large2000x1200;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Large example 2000x1200"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAwIDEyMDAiIHdpZHRoPSIyMDAwIiBoZWlnaHQ9IjEyMDAiPgogIDxyZWN0IHdpZHRoPSIyMDAwIiBoZWlnaHQ9IjEyMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4yMDAweDEyMDA8L3RleHQ+Cjwvc3ZnPg=="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders Widescreen1600x900 story', () => {
    const Story = composedStories.Widescreen1600x900;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Widescreen 1600x900"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgd2lkdGg9IjE2MDAiIGhlaWdodD0iOTAwIj4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xNjAweDkwMDwvdGV4dD4KPC9zdmc+"
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders SizeSmall story', () => {
    const Story = composedStories.SizeSmall;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--sm"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Small size image"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMDB4MTAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders SizeLarge story', () => {
    const Story = composedStories.SizeLarge;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--lg"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="Large size image"
        class="v2image__img v2image__img--contain"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj4xMDB4MTAwPC90ZXh0Pgo8L3N2Zz4="
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });

  it('renders LoadingError story', () => {
    const Story = composedStories.LoadingError;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="imageStoryCheckerboard"
  >
    <style>
      
.imageStoryCheckerboard .v2image {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

    </style>
    <span
      class="v2image v2image--md"
      role="presentation"
      style="--image-aspect-ratio: 3 / 2;"
    >
      <img
        alt="This is an example image"
        class="v2image__img v2image__img--contain"
        src="invalid-image-url"
        style="opacity: 0; transition: none;"
      />
      <span
        aria-hidden="true"
        class="v2image__fallback"
      />
    </span>
  </div>
</div>
`);
  });
});