Stress suite

The brief asks that the widget “demonstrably work when dropped into a page like the one provided.” These are pages unlike the one provided — each isolating a way a real storefront breaks embedded code. Every page states its own pass condition.

  1. Hostile CSS !important on every generic class the widget uses, plus element selectors on div/p/span/svg/ul. Tests the isolation claim in ADR 0001.
  2. Transformed ancestor transform → filter → perspective → contain nested above the mount. Each makes an ancestor a containing block for position: fixed. Tests why the toast lives on the body.
  3. Dark storefront Light-tuned defaults on a dark page, shown beside a themed twin. Tests the limits of “crafted defaults” from ADR 0002.
  4. No anchor, bad selectors, duplicate claims Missing anchor, invalid selector, two toasts, two ratings, unknown placement. Tests the fallback rule in ADR 0003.
  5. 320px column, RTL document Narrowest realistic column with dir="rtl".
  6. Strict CSP style-src 'self', no 'unsafe-inline'. Blocks inline <style> and style="" attributes alike.
  7. Broken payloads 404, invalid JSON, wrong shape, array of rubbish, missing mount.

The comparison build

Pages 01–07 mount widget/product-highlights.js, the build that ships. These two re-run the first two hazards against the React implementation in react/, holding the host page constant so the build is the only variable.

  1. React build, hostile CSS Page 01's stylesheet exactly. Isolation is a platform primitive, so this should be indistinguishable — the point is to have checked rather than assumed.
  2. React build, transformed ancestor and reveal Page 02's ancestor chain. The reproduction page for the unresolved reveal finding: rows in the DOM but stuck at opacity: 0 under headless automation.