Appearance
05. Матрица повторного аудита
Как читать статус
Допустимы только:
PASS— сценарий действительно выполнен, критерии соблюдены, evidence сохранён;FAIL— сценарий выполнен, есть воспроизводимый defect и evidence;BLOCKED— запуск невозможен из-за конкретного environment/fixture blocker;NOT RUN— не запускался или был проверен только частично;N/A — impossible by design— состояние запрещено FSM, с доказательством.
Нельзя превращать NOT RUN в PASS по сходству с соседним viewport или по статическому чтению кода.
Coverage tiers
| Tier | Что покрывает | Когда обязателен |
|---|---|---|
A | Все legal core modes × dark/light × mandatory screenshot viewports | Финальный release audit |
B | Все overlays и transitions на desktop, phone portrait, phone landscape | После изменения interaction/layering |
C | Pairwise basemap/color/input/motion/contrast/browser/data extremes | Финальный release audit и рискованные visual changes |
D | Dense machine geometry sweep без screenshot каждого sample | После responsive/overlay изменения |
Mandatory viewports
| ID | Size | Главный риск | Baseline 2026-07-18 |
|---|---|---|---|
xs | 320×568 | минимальная ширина и короткая высота | top width probe FAIL; полный state NOT RUN |
sm | 360×800 | narrow modern phone | top width probe FAIL; полный state NOT RUN |
phone | 390×844 | canonical phone portrait | top/drawer probes FAIL; полный Tier A NOT RUN |
phone-lg | 412×915 | large phone | top overlap probe FAIL; полный state NOT RUN |
landscape | 844×390 | short mobile landscape | NOT RUN в canonical baseline |
tablet-p | 768×1024 | breakpoint portrait | external screenshots есть; canonical retest NOT RUN |
tablet-l | 1024×768 | breakpoint landscape | NOT RUN |
laptop-short | 1280×720 | bottom pressure | NOT RUN |
desktop | 1440×900 | canonical review | capture screenshots есть; full audit NOT RUN |
desktop-hd | 1920×1080 | large desktop | NOT RUN |
wide | 2560×1440 | excessive spacing | NOT RUN |
short-stress | 1024×256 | WCAG short-height stress | NOT RUN |
Breakpoint-adjacent widths необходимо пересобрать через rg -n '@media'. Начальный seed:
text
559/560/561
639/640/641
679/680/681
767/768/769
1023/1024/1025
1199/1200/1201Tier A — core state matrix
На старте все клетки ниже NOT RUN как полный Tier A scenario. Focused failure probe не доказывает остальные checks клетки.
| Mode | Required checks |
|---|---|
M01 Cold IDLE | toolbar, top-right, MapLibre controls, settings, Changelog, attribution, disabled clarity, отсутствие route stats collision |
M02 DRAW one waypoint/loading | loading, partial route, duplicate-action states, marker/toolbar coexistence |
M03 DRAW valid route | route/waypoints, BottomBar, actions, save/export/plan-as-trip, undo/redo |
M04 PROJECT_VIEW | timeline, aggregate layers, disabled toolbar contract, stage menus, BottomBar |
M05 Project stage draw/edit | Stage HUD, route edit, cancel/save, timeline exclusion |
M06 Manual trip editor | shell/map/top-right, close/unsaved safeguards, nested scroll, background isolation |
Execution ledger template:
| ID | Mode/state | Entry path | Viewport | Theme | Input | Result | Evidence | Notes |
|---|---|---|---|---|---|---|---|---|
A-M01-xs-dark | M01 | cold / | 320×568 | dark | fine+keyboard | NOT RUN | — | Phase 1 required |
A-M01-phone-dark | M01 | cold / | 390×844 | dark | coarse | FAIL | geometry JSON | top toolbar occludes MapLibre; not a full M01 audit |
A-M03-phone-dark-loop | M03 + Loop | valid route → Loop | 390×844 | dark | coarse | PASS | Playwright test | Changelog hidden, Generate Loop reachable and clickable. (Note: physical devices not tested) |
A-M03-phone-dark-search | M03 + Search | valid route → Search | 390×844 | dark | coarse | PASS | Playwright test | Changelog hidden, Reverse route direction reachable and clickable. (Note: physical devices not tested) |
При полном прогоне создаётся отдельная строка для каждой комбинации M01–M06 × 11 mandatory viewports × dark/light; short-stress добавляется для panels/controls. Нельзя записывать одно общее «desktop PASS».
Tier B — interaction и transition ledger
Минимальные environments для каждого сценария: 1440×900, 390×844, 844×390; обе темы, если layout или color может отличаться.
Toolbar
| ID | Scenario | Critical assertions | Status |
|---|---|---|---|
B-TB-01 | Routing profile open/navigate/select/close | keyboard arrows, name, focus return, no clipping | NOT RUN |
B-TB-02 | Route actions open/keyboard/dismiss | expanded state, menu order, Escape topmost only | NOT RUN |
B-TB-03 | Surface → Gradient → Color | pressed state, label-in-name, no top overlap | FAIL — name/geometry |
B-TB-04 | Slope legend open/close | target size, focus, tooltip/legend placement | NOT RUN |
B-TB-05 | Color tray + every swatch | target spacing, selection, Escape/outside click | FAIL — target baseline |
B-TB-06 | Undo/redo/reset confirm | disabled clarity, rapid activation, focus restore | NOT RUN |
B-TB-07 | Save/Export/Import/Compare/Reference | mode legality, layer stack, feedback | NOT RUN |
Exclusive panels
| ID | Scenario | Critical assertions | Status |
|---|---|---|---|
B-PN-01 | Search empty/loading/error/many results | scroll endpoints, Reverse/reset reachable | PARTIAL |
B-PN-02 | Loop min/max/generate/preview/error | primary CTA reachable, cancel/accept | PARTIAL |
B-PN-03 | POI empty/many/create/edit/delete | edge placement, drawer actions, popup exclusivity | NOT RUN |
B-PN-04 | Rapid Search → Loop → POI | exactly one panel, stable BottomBar | NOT RUN |
B-PN-05 | Dismiss by close/Escape/outside | only topmost closes, focus restores | FAIL — Escape layering |
B-PN-06 | Resize/orientation while open | no stale offsets/hidden CTA | NOT RUN |
Modals and feedback
| ID | Scenario | Critical assertions | Status |
|---|---|---|---|
B-MD-01 | SaveModal open/Tab/Shift+Tab | dialog naming, containment, inert background | FAIL |
B-MD-02 | SaveModal Escape | dialog only closes, panel retained, focus restore | FAIL |
B-MD-03 | SaveModal submit/error/success | validation, duplicate submit guard, toast visible | NOT RUN |
B-MD-04 | ExportModal + toast | modal below toast, error visible | NOT RUN |
B-MD-05 | Import collision choices | Reference/Append/Replace/Cancel, focus, data safety | NOT RUN |
B-MD-06 | Confirmation/Rename/Collection modals | shared dialog contract | NOT RUN |
Projects/manual trips/map anchoring
| ID | Scenario group | Critical assertions | Status |
|---|---|---|---|
B-PR-01 | Project enter/exit, zero/one/many stages | timeline/HUD/layers/menu placement | NOT RUN |
B-PR-02 | Stage add/reorder/rename/edit/draw | nested overlay ownership, save/cancel | NOT RUN |
B-TR-01 | Manual trip draft/day/legs | nested scroll, background isolation | NOT RUN |
B-TR-02 | Add/import/draw/library | empty/loading/error/list, focus | NOT RUN |
B-TR-03 | Unsaved close/before-unload | cancel/confirm/data preservation | NOT RUN |
B-MP-01 | Map settings/basemaps/terrain | anchored layout and state persistence | NOT RUN |
B-MP-02 | Context menu at center/edges | containment, target access, exclusivity | capture test PASS, full matrix NOT RUN |
B-MP-03 | POI/cue/route popup at edges | no toolbar/right/bottom collision | NOT RUN |
B-MP-04 | Drag handles near edges/panels | edge pan and keyboard alternative | NOT RUN |
Tier C — pairwise presentation plan
Не требуется полный Cartesian product. Pair selection должен покрыть риски:
| Pair ID | Axes | Suggested state/viewports | Status |
|---|---|---|---|
C-01 | dark/light × standard/satellite | M03 at phone + desktop | NOT RUN |
C-02 | Surface/Gradient/Solid × busy basemap | M03 phone/tablet | NOT RUN |
C-03 | fine/coarse × all target classes | M01/M03 phone + desktop | partial FAIL |
C-04 | normal/reduced motion × HUD/modal/dropdown/save | M03/M05 desktop + phone | NOT RUN |
C-05 | normal/forced colors | toolbar/dialog/popup | NOT RUN |
C-06 | Chromium/Firefox/WebKit | M01/M03 + critical transitions | Chromium partial only |
C-07 | default/200% zoom/text spacing override | panels/dialogs/toolbar | NOT RUN |
C-08 | normal/long strings | toolbar/search/project/manual trip | NOT RUN |
C-09 | normal/extreme route+POI data | M03/M04/M06 | NOT RUN |
Tier D — continuous geometry probes
Sweep
- width
320–1920с шагом16px; - heights
256, 320, 390, 568, 667, 720, 768, 844, 900, 1024, 1080; - breakpoint-adjacent widths;
- dark/light там, где geometry отличается;
- fine/coarse там, где media query меняет hit target.
Собирать на каждом sample
- document overflow;
- viewport containment visible independent surfaces;
- pairwise intersections toolbar/right controls/MapLibre/panels/drawers/BottomBar/Changelog;
- hit target size и center spacing;
elementsFromPointдля occlusion;- zero-size visible controls;
- reachable first/last internal scroll elements;
- focused element, полностью скрытый fixed content.
Screenshot policy
Не сохранять тысячи одинаковых PNG. Сохранять:
- первый failing sample;
- каждый новый failure signature;
- ближайший PASS слева и справа от breakpoint/failure interval;
- canonical review viewports.
Cross-cutting quality gates
Geometry
- независимые интерактивные поверхности не пересекаются;
- intentional overlay документирован и не закрывает actionable content;
- primary CTA и close control всегда достижимы;
- page не получает неожиданный horizontal scroll.
Keyboard/modal
- visible focus;
- нет traps вне modal contract;
- modal focus contained;
- Escape закрывает только topmost;
- focus возвращается к логичному opener;
- background не actionable под modal/editor shell.
Accessibility
- icon controls имеют accessible name;
- visible label входит в accessible name;
- groups/fields/dialogs именованы;
- state отражён через pressed/expanded/selected;
- target соответствует
24pxAA либо документированному spacing exception; coarse product target проверяется отдельно; - contrast проверен по component states, а не одним global PASS.
Visual/theme
- semantic surfaces используют tokens;
- data/map/brand colors имеют явную категорию/allowlist;
- route/waypoint читаемы на representative basemaps;
- dark/light screenshots сравниваются с реальными baseline assertions для стабильных states.
Resilience
- console/page errors записываются;
- network fixtures детерминированы;
- slow/error/offline states имеют recoverable UI;
- rapid activation не создаёт duplicate actions;
- theme/resize во время overlay не ломает state.
Evidence contract для финального отчёта
Каждая FAIL/BLOCKED строка должна содержать:
- commit и environment;
- exact state entry path;
- viewport/theme/input;
- expected/actual;
- screenshot или trace;
- geometry/accessibility raw output, если применимо;
- test name/command;
- issue ID из canonical ledger.
Каждая PASS строка должна ссылаться хотя бы на test report или screenshot artifact. Итоговые totals считаются автоматически из ledger, а не вводятся вручную — это предотвращает повторение ошибки 23/24 при восьми видимых FAIL.