Initial commit
This commit is contained in:
Samraaj Bath
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Capture Fixture — vh, lazy-bg, marquee, SVG, IO reveal</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="nav">
|
||||
<a href="#" class="logo">Fixture</a>
|
||||
<nav>
|
||||
<a href="#hero">Hero</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#bg">Lazy BG</a>
|
||||
<a href="#marquee">Marquee</a>
|
||||
<a href="#footer">Footer</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Section A: vh-relative hero. 100vh - 64px nav. -->
|
||||
<section id="hero" class="hero">
|
||||
<h1>Full-fold hero</h1>
|
||||
<p>
|
||||
This section's height is <code>min-height: calc(100vh - 64px)</code>. At a 1280×720 capture it resolves to
|
||||
656px; at 1280×1080 it resolves to 1016px. The <code>vh-flags.json</code> output should pick this up and set
|
||||
<code>vh_value: 91</code>.
|
||||
</p>
|
||||
<a href="#" class="cta">Get started</a>
|
||||
</section>
|
||||
|
||||
<!-- Section B: full-width gradient, content max-width inside -->
|
||||
<section id="features" class="features">
|
||||
<div class="inner">
|
||||
<h2>Three cards</h2>
|
||||
<ul class="grid">
|
||||
<li class="card reveal">
|
||||
<svg class="icon" viewBox="0 0 32 32">
|
||||
<path d="M4 16 L14 26 L28 6" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" />
|
||||
</svg>
|
||||
<h3>Reveal me</h3>
|
||||
<p>
|
||||
I fade in via IntersectionObserver. A capture that doesn't trigger the IO callback will leave me at
|
||||
opacity 0.
|
||||
</p>
|
||||
</li>
|
||||
<li class="card reveal">
|
||||
<svg class="icon" viewBox="0 0 32 32">
|
||||
<circle cx="16" cy="16" r="12" stroke="currentColor" stroke-width="3" fill="none" />
|
||||
</svg>
|
||||
<h3>Reveal me too</h3>
|
||||
<p>Same pattern. Stagger delay applied via inline style.</p>
|
||||
</li>
|
||||
<li class="card reveal">
|
||||
<svg class="icon" viewBox="0 0 32 32">
|
||||
<rect x="6" y="6" width="20" height="20" rx="3" stroke="currentColor" stroke-width="3" fill="none" />
|
||||
</svg>
|
||||
<h3>And me</h3>
|
||||
<p>Three cards = repeated_pattern candidate.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section C: lazy-loaded background image. The CSS sets bg via a class that we toggle with IO. -->
|
||||
<section id="bg" class="lazy-bg">
|
||||
<div class="inner">
|
||||
<h2>Background loads on scroll</h2>
|
||||
<p>
|
||||
Until I'm intersected, my background-image is "none". After IO fires I get a CSS-driven background. Capture
|
||||
must either scroll into view or follow the CSS rule from
|
||||
<code>css-rules/<vp>.json</code> to know the bg URL.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section D: Swiper-style marquee with offscreen items the response listener misses -->
|
||||
<section id="marquee" class="marquee">
|
||||
<h2>Marquee</h2>
|
||||
<div class="track">
|
||||
<!-- 8 logos; the first 4 are visible at the capture viewport, the rest drift in via translate -->
|
||||
<div class="logo-tile" data-idx="1">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A1</text></svg>
|
||||
</div>
|
||||
<div class="logo-tile" data-idx="2">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A2</text></svg>
|
||||
</div>
|
||||
<div class="logo-tile" data-idx="3">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A3</text></svg>
|
||||
</div>
|
||||
<div class="logo-tile" data-idx="4">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A4</text></svg>
|
||||
</div>
|
||||
<div class="logo-tile" data-idx="5">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B1</text></svg>
|
||||
</div>
|
||||
<div class="logo-tile" data-idx="6">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B2</text></svg>
|
||||
</div>
|
||||
<div class="logo-tile" data-idx="7">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B3</text></svg>
|
||||
</div>
|
||||
<div class="logo-tile" data-idx="8">
|
||||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B4</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section E: detailed SVG. Inline; the agent should preserve every path. -->
|
||||
<section id="detailed-svg" class="detailed-svg">
|
||||
<h2>Detailed SVG</h2>
|
||||
<svg viewBox="0 0 200 100" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#0ea5e9" />
|
||||
<stop offset="100%" stop-color="#22c55e" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="200" height="100" fill="url(#g1)" rx="8" />
|
||||
<path d="M10 80 Q 50 20, 100 50 T 190 30" stroke="#fff" stroke-width="3" fill="none" />
|
||||
<circle cx="100" cy="50" r="6" fill="#fff" />
|
||||
<text x="50%" y="92%" text-anchor="middle" font-size="12" fill="#fff">cluster</text>
|
||||
</svg>
|
||||
</section>
|
||||
|
||||
<footer id="footer" class="footer">
|
||||
<p>© Fixture site — for capture-side regression testing only.</p>
|
||||
</footer>
|
||||
|
||||
<script src="./reveal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user