{
  "generatedAt": "2026-08-05T07:41:13.354Z",
  "browser": "Google Chrome via Playwright channel=chrome",
  "origin": "http://127.0.0.1:4333",
  "pathname": "/three-product-viewer-next-2026-08-05/out/media-field/",
  "verdict": "PASS",
  "matrix": [
    {
      "viewport": {
        "name": "desktop",
        "width": 1280,
        "height": 900
      },
      "loading": {
        "state": "loading",
        "status": 1
      },
      "initial": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "signal",
        "domActiveId": "signal",
        "activeTriggerId": "signal",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 3,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "hover": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "fold",
        "domActiveId": "fold",
        "activeTriggerId": "fold",
        "inputOwner": "pointer",
        "mediaCount": 6,
        "frameCount": 7,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "focus": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "index",
        "domActiveId": "index",
        "activeTriggerId": "index",
        "inputOwner": "focus",
        "mediaCount": 6,
        "frameCount": 7,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "scroll": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "interval",
        "domActiveId": "interval",
        "activeTriggerId": "interval",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 8,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "idleDemandRender": {
        "before": 64,
        "after": 64,
        "delta": 0
      },
      "offscreen": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "edition",
        "domActiveId": "edition",
        "activeTriggerId": "edition",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 66,
        "renderMode": "demand",
        "loopState": "static",
        "pauseReason": "out-of-view",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "resumed": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "signal",
        "domActiveId": "signal",
        "activeTriggerId": "signal",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 67,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "pageErrors": [],
      "screenshot": "/output/playwright/three-product-viewer-next-2026-08-05/media-field-verification/desktop-ready.png"
    },
    {
      "viewport": {
        "name": "tablet",
        "width": 768,
        "height": 900
      },
      "loading": {
        "state": "loading",
        "status": 1
      },
      "initial": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "signal",
        "domActiveId": "signal",
        "activeTriggerId": "signal",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 3,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1.5,
        "owner": {
          "width": 768,
          "height": 900
        },
        "canvas": {
          "width": 768,
          "height": 900,
          "bufferWidth": 1152,
          "bufferHeight": 1350
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "hover": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "fold",
        "domActiveId": "fold",
        "activeTriggerId": "fold",
        "inputOwner": "pointer",
        "mediaCount": 6,
        "frameCount": 7,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1.5,
        "owner": {
          "width": 768,
          "height": 900
        },
        "canvas": {
          "width": 768,
          "height": 900,
          "bufferWidth": 1152,
          "bufferHeight": 1350
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "focus": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "index",
        "domActiveId": "index",
        "activeTriggerId": "index",
        "inputOwner": "focus",
        "mediaCount": 6,
        "frameCount": 7,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1.5,
        "owner": {
          "width": 768,
          "height": 900
        },
        "canvas": {
          "width": 768,
          "height": 900,
          "bufferWidth": 1152,
          "bufferHeight": 1350
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "scroll": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "interval",
        "domActiveId": "interval",
        "activeTriggerId": "interval",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 8,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1.5,
        "owner": {
          "width": 768,
          "height": 900
        },
        "canvas": {
          "width": 768,
          "height": 900,
          "bufferWidth": 1152,
          "bufferHeight": 1350
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "idleDemandRender": {
        "before": 64,
        "after": 64,
        "delta": 0
      },
      "offscreen": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "edition",
        "domActiveId": "edition",
        "activeTriggerId": "edition",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 66,
        "renderMode": "demand",
        "loopState": "static",
        "pauseReason": "out-of-view",
        "dpr": 1.5,
        "owner": {
          "width": 768,
          "height": 900
        },
        "canvas": {
          "width": 768,
          "height": 900,
          "bufferWidth": 1152,
          "bufferHeight": 1350
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "resumed": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "signal",
        "domActiveId": "signal",
        "activeTriggerId": "signal",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 67,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1.5,
        "owner": {
          "width": 768,
          "height": 900
        },
        "canvas": {
          "width": 768,
          "height": 900,
          "bufferWidth": 1152,
          "bufferHeight": 1350
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "pageErrors": [],
      "screenshot": "/output/playwright/three-product-viewer-next-2026-08-05/media-field-verification/tablet-ready.png"
    },
    {
      "viewport": {
        "name": "mobile",
        "width": 390,
        "height": 844
      },
      "loading": {
        "state": "loading",
        "status": 1
      },
      "initial": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "signal",
        "domActiveId": "signal",
        "activeTriggerId": "signal",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 3,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1,
        "owner": {
          "width": 390,
          "height": 523
        },
        "canvas": {
          "width": 390,
          "height": 523,
          "bufferWidth": 390,
          "bufferHeight": 523
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "hover": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "fold",
        "domActiveId": "fold",
        "activeTriggerId": "fold",
        "inputOwner": "pointer",
        "mediaCount": 6,
        "frameCount": 8,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1,
        "owner": {
          "width": 390,
          "height": 523
        },
        "canvas": {
          "width": 390,
          "height": 523,
          "bufferWidth": 390,
          "bufferHeight": 523
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "focus": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "index",
        "domActiveId": "index",
        "activeTriggerId": "index",
        "inputOwner": "focus",
        "mediaCount": 6,
        "frameCount": 8,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1,
        "owner": {
          "width": 390,
          "height": 523
        },
        "canvas": {
          "width": 390,
          "height": 523,
          "bufferWidth": 390,
          "bufferHeight": 523
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "scroll": {
        "state": "interacting",
        "readiness": "ready",
        "activeMediaId": "interval",
        "domActiveId": "interval",
        "activeTriggerId": "interval",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 10,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1,
        "owner": {
          "width": 390,
          "height": 523
        },
        "canvas": {
          "width": 390,
          "height": 523,
          "bufferWidth": 390,
          "bufferHeight": 523
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "idleDemandRender": {
        "before": 65,
        "after": 65,
        "delta": 0
      },
      "offscreen": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "edition",
        "domActiveId": "edition",
        "activeTriggerId": "edition",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 67,
        "renderMode": "demand",
        "loopState": "static",
        "pauseReason": "out-of-view",
        "dpr": 1,
        "owner": {
          "width": 390,
          "height": 523
        },
        "canvas": {
          "width": 390,
          "height": 523,
          "bufferWidth": 390,
          "bufferHeight": 523
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "resumed": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "signal",
        "domActiveId": "signal",
        "activeTriggerId": "signal",
        "inputOwner": "scroll",
        "mediaCount": 6,
        "frameCount": 68,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 1,
        "owner": {
          "width": 390,
          "height": 523
        },
        "canvas": {
          "width": 390,
          "height": 523,
          "bufferWidth": 390,
          "bufferHeight": 523
        },
        "ownerViolation": false,
        "documentOverflow": 0
      },
      "pageErrors": [],
      "screenshot": "/output/playwright/three-product-viewer-next-2026-08-05/media-field-verification/mobile-ready.png"
    }
  ],
  "states": {
    "context": {
      "lost": {
        "state": "fallback",
        "readiness": "fallback",
        "activeMediaId": "edition",
        "domActiveId": "edition",
        "activeTriggerId": "edition",
        "inputOwner": "focus",
        "mediaCount": 6,
        "frameCount": 40,
        "renderMode": "demand",
        "loopState": "static",
        "pauseReason": "context-lost",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0,
        "fallbackImages": 6
      },
      "restored": {
        "state": "ready",
        "readiness": "ready",
        "activeMediaId": "matter",
        "domActiveId": "matter",
        "activeTriggerId": "matter",
        "inputOwner": "pointer",
        "mediaCount": 6,
        "frameCount": 55,
        "renderMode": "demand",
        "loopState": "running",
        "pauseReason": "none",
        "dpr": 2,
        "owner": {
          "width": 1280,
          "height": 900
        },
        "canvas": {
          "width": 1280,
          "height": 900,
          "bufferWidth": 2560,
          "bufferHeight": 1800
        },
        "ownerViolation": false,
        "documentOverflow": 0
      }
    },
    "failure": {
      "broken": {
        "snapshot": {
          "state": "error",
          "readiness": "fallback",
          "activeMediaId": "signal",
          "domActiveId": "signal",
          "inputOwner": "initial",
          "mediaCount": 6,
          "frameCount": null,
          "dpr": null,
          "owner": {
            "width": 1280,
            "height": 900
          },
          "canvas": {
            "width": 1280,
            "height": 900,
            "bufferWidth": 300,
            "bufferHeight": 150
          },
          "ownerViolation": false,
          "documentOverflow": 0
        },
        "fallback": {
          "images": 6,
          "titles": 6
        },
        "errors": [],
        "screenshot": "/output/playwright/three-product-viewer-next-2026-08-05/media-field-verification/broken-fallback.png"
      },
      "stalled": {
        "snapshot": {
          "state": "fallback",
          "readiness": "fallback",
          "activeMediaId": "signal",
          "domActiveId": "signal",
          "inputOwner": "initial",
          "mediaCount": 6,
          "frameCount": null,
          "dpr": null,
          "owner": {
            "width": 1280,
            "height": 900
          },
          "canvas": {
            "width": 1280,
            "height": 900,
            "bufferWidth": 300,
            "bufferHeight": 150
          },
          "ownerViolation": false,
          "documentOverflow": 0
        },
        "fallback": {
          "images": 6,
          "titles": 6
        },
        "errors": [],
        "screenshot": "/output/playwright/three-product-viewer-next-2026-08-05/media-field-verification/stalled-fallback.png"
      },
      "no-webgl": {
        "snapshot": {
          "state": "fallback",
          "readiness": "fallback",
          "activeMediaId": "signal",
          "domActiveId": "signal",
          "inputOwner": "initial",
          "mediaCount": 6,
          "frameCount": null,
          "dpr": null,
          "owner": {
            "width": 1280,
            "height": 900
          },
          "canvas": {
            "width": 1280,
            "height": 900,
            "bufferWidth": 300,
            "bufferHeight": 150
          },
          "ownerViolation": false,
          "documentOverflow": 0
        },
        "fallback": {
          "images": 6,
          "titles": 6
        },
        "errors": [],
        "screenshot": "/output/playwright/three-product-viewer-next-2026-08-05/media-field-verification/no-webgl-fallback.png"
      }
    }
  },
  "assertions": {
    "runtimeErrors": 0,
    "documentOverflow": 0,
    "canvasOwnerViolations": 0,
    "identityDivergence": 0
  },
  "responsiveRoundTrip": {
    "sequence": [
      1280,
      390,
      1280
    ],
    "beforeRoundTrip": {
      "state": "interacting",
      "readiness": "ready",
      "activeMediaId": "matter",
      "domActiveId": "matter",
      "activeTriggerId": "matter",
      "inputOwner": "activation",
      "mediaCount": 6,
      "frameCount": 36,
      "renderMode": "demand",
      "loopState": "running",
      "pauseReason": "none",
      "dpr": 2,
      "owner": {
        "width": 1280,
        "height": 900
      },
      "canvas": {
        "width": 1280,
        "height": 900,
        "bufferWidth": 2560,
        "bufferHeight": 1800
      },
      "ownerViolation": false,
      "documentOverflow": 0
    },
    "mobileRoundTrip": {
      "state": "interacting",
      "readiness": "ready",
      "activeMediaId": "interval",
      "domActiveId": "interval",
      "activeTriggerId": "interval",
      "inputOwner": "scroll",
      "mediaCount": 6,
      "frameCount": 38,
      "renderMode": "demand",
      "loopState": "running",
      "pauseReason": "none",
      "dpr": 1,
      "owner": {
        "width": 390,
        "height": 523
      },
      "canvas": {
        "width": 390,
        "height": 523,
        "bufferWidth": 390,
        "bufferHeight": 523
      },
      "ownerViolation": false,
      "documentOverflow": 0
    },
    "desktopRoundTrip": {
      "state": "interacting",
      "readiness": "ready",
      "activeMediaId": "edition",
      "domActiveId": "edition",
      "activeTriggerId": "edition",
      "inputOwner": "focus",
      "mediaCount": 6,
      "frameCount": 40,
      "renderMode": "demand",
      "loopState": "running",
      "pauseReason": "none",
      "dpr": 2,
      "owner": {
        "width": 1280,
        "height": 900
      },
      "canvas": {
        "width": 1280,
        "height": 900,
        "bufferWidth": 2560,
        "bufferHeight": 1800
      },
      "ownerViolation": false,
      "documentOverflow": 0
    }
  },
  "reducedMotion": {
    "snapshot": {
      "state": "ready",
      "readiness": "ready",
      "activeMediaId": "signal",
      "domActiveId": "signal",
      "activeTriggerId": "signal",
      "inputOwner": "scroll",
      "mediaCount": 6,
      "frameCount": 4,
      "renderMode": "demand",
      "loopState": "static",
      "pauseReason": "reduced-motion",
      "dpr": 2,
      "owner": {
        "width": 1280,
        "height": 900
      },
      "canvas": {
        "width": 1280,
        "height": 900,
        "bufferWidth": 2560,
        "bufferHeight": 1800
      },
      "ownerViolation": false,
      "documentOverflow": 0
    },
    "frameDelta": 0
  }
}