Samraaj BathandClaude Fable 5
9aed2540aa
Fixes from the cropin.com / ooni.com audit reviews:
- walker: preserve whitespace-only text in inline elements ("ofthe" bug);
capture ::placeholder styles for inputs
- css: emit visibility (hidden-at-rest wordmark artifact); exempt list
markers from inherited elision (lost bullets); ::placeholder rules
- seo: sanitize og:type to Next's enum (render crash -> dev badge leak);
generated next.config disables devIndicators
- capture/stabilize: promote lazy-loader data attrs before snapshots
(collapsed sections, viewport-inconsistent captures); settle autoplay
carousels to home slide before every snapshot; force-reveal hidden
videos for poster shots + log failures
- generate: ship downloaded video files as local <video src>; keep
picture>source through IR prune with srcset rewrite (mobile-crop-on-
desktop heroes); pin Tailwind named screens to computeBands boundaries
- capture/graft: capture cross-origin iframe subtrees (Klaviyo signup
forms) with element-screenshot fallback; asset download retry +
visual-assets-missing reporting
Checkpoint commit: wave 4 (reveal settling, 206 range-response fix,
hidden-geometry banding, bare-zero utility gating) is mid-implementation.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
38 lines
1.5 KiB
HTML
38 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Lazy-media fixture</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 24px; }
|
|
img { display: block; }
|
|
.bg { width: 300px; height: 150px; background-size: cover; background-repeat: no-repeat; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Lazy media</h1>
|
|
|
|
<!-- WP Rocket style: 0-size placeholder in src, real URL in data-lazy-src. -->
|
|
<img id="lazy1" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="og-image.png" alt="hero">
|
|
|
|
<!-- lazysizes style: no src at all, data-src + data-sizes="auto" (a swap flag, not a value). -->
|
|
<img id="lazy2" data-src="seo-icon.png" data-sizes="auto" alt="icon">
|
|
|
|
<picture>
|
|
<source id="lazysource" type="image/png" data-srcset="og-image.png 1x">
|
|
<img id="lazy3" data-src="og-image.png" alt="picture">
|
|
</picture>
|
|
|
|
<!-- Lazy background image (WP Rocket url(...) form). -->
|
|
<div id="lazybg" class="bg" data-bg="url('brand.svg')"></div>
|
|
|
|
<!-- Must NOT be promoted: the data attr is not a plausible URL. -->
|
|
<img id="notaurl" data-src="{{ placeholder }}" alt="template token">
|
|
|
|
<!-- Must NOT count as a promotion: src already equals the target. -->
|
|
<img id="already" src="seo-icon.png" data-src="seo-icon.png" alt="already swapped">
|
|
</body>
|
|
</html>
|