Gallery: METRO + Aspect Ratio — тестовые кейсы

Страница для проверки фикса: Gallery с макетами METRO и заданным Aspect Ratio. Ниже каждый кейс отдельным блоком. Картинки из Медиатеки (смесь горизонтальных и вертикальных).

Ожидаемо везде: сетка ровная, без «дыр» и наложений, плитки соответствуют выбранному соотношению сторон.

1. Воспроизведение ошибки

  1. Gallery c METRO 1
  2. Aspect Ratio 3/2
  3. 10 картинок, открыть на фронте

2. Типы METRO 1–5 (Aspect Ratio 3/2, 10 картинок)

METRO 1 — 3/2

METRO 2 — 3/2

METRO 3 — 3/2

METRO 4 — 3/2

METRO 5 — 3/2

3. Aspect Ratio (METRO 1, 10 картинок)

Горизонтальные 3/2, 16/9; квадрат 1:1; вертикальные 2/3, 3/4.

METRO 1 — 3/2 (горизонт.)

METRO 1 — 16/9 (горизонт.)

METRO 1 — 1:1 (квадрат)

METRO 1 — 2/3 (вертик.)

METRO 1 — 3/4 (вертик.)

METRO 3 — 16/9

METRO 4 — 2/3

4. Без Aspect Ratio (должно выглядеть как раньше)

Параметр Aspect Ratio не задан — значение по умолчанию. Сравнить с версией до фикса.

METRO 1 — без Aspect Ratio

METRO 2 — без Aspect Ratio

METRO 3 — без Aspect Ratio

METRO 4 — без Aspect Ratio

METRO 5 — без Aspect Ratio

5. Gap (METRO 1, 3/2, 10 картинок)

Gap 0px

Gap 10px

Gap 40px

Gap 40px — METRO 3, 2/3

6. Количество картинок (METRO 1, 3/2)

5 картинок

6 картинок

7 картинок

10 картинок

7. Пагинация «Load more»

14 картинок, показывается по 6. Нажать «Load More» до конца — после каждой подгрузки сетка должна оставаться ровной.

METRO 1 — 3/2, Load more

METRO 3 — 2/3, Load more

METRO 5 — 16/9, Load more

8. Адаптивность и браузеры

Все кейсы выше проверить на ширинах:

  • Десктоп (>1024px)
  • Планшет (601–1024px)
  • Мобильный (до 600px)

В браузерах:

  • Safari (обязательно)
  • Chrome
  • Firefox

9. Регрессия: подписи + попап

Не должно измениться: подписи (title) под картинками и открытие картинки в попапе по клику, листание в попапе.

Первые три картинки: с caption + alt, с alt, только с title.

Grid, 4 колонки — title + popup

alt text example
caption example text
alt text of the image example
alt text of the image example
This image has title only
67
66
65
64
63

METRO 1, 3/2 — title + popup

alt text example
caption example text
alt text of the image example
alt text of the image example
This image has title only
67
66
65
64
63
62
61

METRO 2, без Aspect Ratio — title + popup

alt text example
caption example text
alt text of the image example
alt text of the image example
This image has title only
67
66
65
64
63
62
61