{
  "date": "2026-10-31",
  "kind": "Calculated geometry with an original nonsexual test chart; not a video service performance test.",
  "source": {
    "path": "/assets/study/frame-test.webp",
    "width": 1280,
    "height": 720,
    "bytes": 21896,
    "sha256": "1ccbd53e3988017ca9578a3f7c4cdb20520425c86da8c237b41f3e189355e74f"
  },
  "method": {
    "contain": "min(boxWidth/sourceWidth, boxHeight/sourceHeight)",
    "cover": "max(boxWidth/sourceWidth, boxHeight/sourceHeight)",
    "visibleFraction": "visibleSourceWidth * visibleSourceHeight / sourceWidth / sourceHeight",
    "alignment": "center",
    "limits": [
      "Static image layout only; no video decoding, streaming speed, or external player tested.",
      "Mobile layout retains aspect ratios but can use a smaller CSS display size.",
      "The percentage describes visible source area, not resolution or quality."
    ]
  },
  "cases": [
    {
      "id": "square-contain",
      "boxCssPixels": [
        320,
        320
      ],
      "objectFit": "contain",
      "objectPosition": "50% 50%",
      "scale": 0.25,
      "renderedCssPixels": [
        320.0,
        180.0
      ],
      "visibleSourcePixels": [
        1280.0,
        720.0
      ],
      "sourceCropEachSidePixels": [
        0.0,
        0.0
      ],
      "visibleSourceAreaPercent": 100.0
    },
    {
      "id": "square-cover",
      "boxCssPixels": [
        320,
        320
      ],
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "scale": 0.4444444444444444,
      "renderedCssPixels": [
        568.8888888888889,
        320.0
      ],
      "visibleSourcePixels": [
        720.0,
        720.0
      ],
      "sourceCropEachSidePixels": [
        280.0,
        0.0
      ],
      "visibleSourceAreaPercent": 56.25
    },
    {
      "id": "portrait-cover",
      "boxCssPixels": [
        180,
        320
      ],
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "scale": 0.4444444444444444,
      "renderedCssPixels": [
        568.8888888888889,
        320.0
      ],
      "visibleSourcePixels": [
        405.0,
        720.0
      ],
      "sourceCropEachSidePixels": [
        437.5,
        0.0
      ],
      "visibleSourceAreaPercent": 31.640625
    }
  ],
  "sources": [
    "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit",
    "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position"
  ],
  "renderingCheck": {
    "date": "2026-10-31",
    "method": "Read rendered element geometry and computed object-fit/object-position in a browser, then visually inspect the three samples.",
    "viewports": [
      {
        "width": 1366,
        "height": 900
      },
      {
        "width": 390,
        "height": 844
      }
    ],
    "observedAtBothViewports": [
      {
        "case": "A",
        "boxCssPx": [
          320,
          320
        ],
        "objectFit": "contain",
        "objectPosition": "50% 50%",
        "naturalImagePx": [
          1280,
          720
        ]
      },
      {
        "case": "B",
        "boxCssPx": [
          320,
          320
        ],
        "objectFit": "cover",
        "objectPosition": "50% 50%",
        "naturalImagePx": [
          1280,
          720
        ]
      },
      {
        "case": "C",
        "boxCssPx": [
          180,
          320
        ],
        "objectFit": "cover",
        "objectPosition": "50% 50%",
        "naturalImagePx": [
          1280,
          720
        ]
      }
    ],
    "visualObservation": "All three markers were visible in A; only the center marker remained in B and C.",
    "scope": "Two viewport sizes in one browser environment. Not a cross-browser or live video service test."
  }
}