Country flag SVGs render

What TestSprite reads

The testing agent reads this JSON, opens the deployed URL in headless Chromium, executes each action step, evaluates each assertion. Verdict: passed / failed / blocked / inconclusive.

{
  "projectId": "1ad26753-ee03-4689-8f0f-6fa5d67c5c72",
  "type": "frontend",
  "name": "Surfaces — every team uses a real country flag SVG, not a CSS gradient",
  "description": "Each team flag visible in the bracket must be an actual SVG or image with the team's national flag — not a colored block or CSS linear-gradient stand-in. Each flag has accessible alt text or aria-label naming the team.",
  "priority": "p1",
  "metadata": {
    "category": "surfaces",
    "stage": "all"
  },
  "planSteps": [
    {
      "type": "action",
      "description": "Navigate to the homepage"
    },
    {
      "type": "assertion",
      "description": "Verify each team-flag element in the bracket is rendered as either an <img src=... alt=...> tag or an inline <svg> — NOT a <div> with a background-image gradient or solid color"
    },
    {
      "type": "assertion",
      "description": "Verify every team flag has accessible text (alt attribute on img, or aria-label on svg, or a sibling label) that names the corresponding team"
    },
    {
      "type": "assertion",
      "description": "Verify at least 8 distinct flag images are present (one per team in the bracket; can be more if QF/SF/Final teams also have flags)"
    }
  ]
}