Three requirements and three tests with an uncovered item, an orphan test, and an outdated version link

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Requirement links · version and source review</title><style>
*{box-sizing:border-box}body{margin:0;background:#eff2f3;color:#2c3d4a;font:16px/1.6 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,td,th,li{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;margin:22px 0;background:white;border:1px solid #bdc9d0;border-radius:8px}.scope{padding:20px;background:#2f5267;color:white;border-radius:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.record{padding:16px;background:#f0f5f7;border-left:4px solid #64889c;margin:14px 0}.record h3{margin:0 0 8px}.note{background:#fff0d8;border-left:5px solid #ac7037;padding:16px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea,input,select{font:inherit}button{min-height:44px;padding:10px 15px;border:1px solid #5d7b90;border-radius:5px;background:white;color:inherit;cursor:pointer}button:hover{box-shadow:inset 0 0 0 1px #2f5267}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b35d26;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea,select{display:block;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #7b929f;border-radius:4px;background:white;color:inherit}textarea{min-height:125px;resize:vertical}input[readonly]{background:#f4f5f1}table{width:100%;table-layout:fixed;border-collapse:collapse}th,td{padding:12px;border:1px solid #bdc9d0;text-align:left;vertical-align:top}th{background:#e3edf1}th:first-child{width:23%}ul{padding-left:22px}li{margin:12px 0}footer{border-top:1px solid #bdc9d0;margin-top:26px;padding-top:18px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid{grid-template-columns:1fr}table,tbody,tr,td{display:block}thead{display:none}tr{margin:16px 0;border:1px solid #bdc9d0}td{border:0;border-top:1px solid #d2dce1}td::before{content:attr(data-label);display:block;font-weight:750;margin-bottom:6px}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL RECORDS · NO SOFTWARE EXECUTION</p><h1>A test link can point to yesterday’s rule.</h1><p>R1 now accepts up to forty characters. TC1 still expects a twenty-five-character name to be rejected under the old version. Inspect the record, version and expectation together.</p><div class="scope">No badge application has been built or tested for this exercise. All execution and evidence references remain blank. Mapping coverage is separate from pass status, release approval or standards compliance.</div>
<section class="panel" aria-labelledby="records-title"><h2 id="records-title">Complete supplied records</h2><div class="grid"><div><h3>Current requirements</h3><article class="record"><h3>R1 v2</h3><p>The attendee-name field accepts 1–40 characters. R1 v1 previously allowed 1–20.</p></article><article class="record"><h3>R2 v1</h3><p>Editing the attendee name clears an existing badge preview until it is rebuilt.</p></article><article class="record"><h3>R3 v1</h3><p>The badge preview displays the supplied event title.</p></article></div><div><h3>Planned tests and recorded source links</h3><article class="record"><h3>TC1 v1 → R1 v1</h3><p>Enter a 25-character name and expect rejection. Linked to R1 v1.</p></article><article class="record"><h3>TC2 v1 → R2 v1</h3><p>Build a preview, edit the name, and check that the old preview clears. Linked to R2 v1.</p></article><article class="record"><h3>TC3 v1 → no recorded source</h3><p>Check that a theme preference is remembered. No source requirement is recorded.</p></article></div></div></section>
<section class="panel" aria-labelledby="matrix-title"><h2 id="matrix-title">Forward mapping · requirement to planned test</h2><table aria-label="Current requirement versus recorded test link"><thead><tr><th scope="col">Current requirement</th><th scope="col">Recorded linked test</th><th scope="col">Mapping review</th></tr></thead><tbody><tr><td data-label="Current requirement">R1 v2</td><td data-label="Recorded linked test">TC1 v1 references R1 v1</td><td data-label="Mapping review">Stale requirement-version link; inspect the changed name-length boundary.</td></tr><tr><td data-label="Current requirement">R2 v1</td><td data-label="Recorded linked test">TC2 v1 references R2 v1</td><td data-label="Mapping review">Current link; inspect whether the test adequately checks the requirement. Not a passed test.</td></tr><tr><td data-label="Current requirement">R3 v1</td><td data-label="Recorded linked test">No linked test</td><td data-label="Mapping review">Uncovered in this supplied mapping.</td></tr></tbody></table><h3>Reverse review · tests without a requirement</h3><div id="orphans" class="record"><strong>TC3 v1 · theme preference remembered</strong><p>No source requirement is recorded. Ask the owner whether a requirement or approved source is missing, or the test no longer belongs. Do not delete it simply to tidy the matrix.</p></div><button id="review" type="button" aria-expanded="false" aria-controls="findings">Review supplied links</button><div id="findings" hidden><h3>Findings from the supplied mapping</h3><ul id="finding-list"></ul><p class="note">These are mapping questions. No link was repaired, no test was run and no execution evidence was created.</p></div><p id="review-status" role="status" aria-live="polite">Review the links to inspect gaps and version questions.</p></section>
<section class="panel" aria-labelledby="impact-title"><h2 id="impact-title">Selected-requirement impact view</h2><label for="requirement">Current requirement</label><select id="requirement"><option value="R1">R1 v2 · name length</option><option value="R2">R2 v1 · stale preview clearing</option><option value="R3">R3 v1 · event title</option></select><h3 id="selected-title"></h3><p id="impact-detail" class="record"></p><p id="next-question" class="note"></p><h3>Actual execution references · none supplied</h3><p>A real result needs test/version, baseline, build, environment, observed behavior and an evidence reference. Each field here stays blank.</p><div class="grid"><div><label for="execution">Actual execution record reference</label><input id="execution" readonly></div><div><label for="evidence">Actual evidence reference</label><input id="evidence" readonly></div></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank scaffold · your maintained-record review</h2><div class="grid"><div><label for="own-requirements">Requirements · stable IDs, versions, text and change history</label><textarea id="own-requirements"></textarea><label for="own-tests">Tests · IDs, revisions, input and expected behavior</label><textarea id="own-tests"></textarea></div><div><label for="own-links">Recorded links · source version and specific rationale</label><textarea id="own-links"></textarea><label for="own-questions">Reviewer notes · uncovered, source-less and impact questions</label><textarea id="own-questions"></textarea></div></div><p>Resolve questions in the actual requirement and test records. This writing area cannot revise those records, approve links or create a missing test.</p><div class="toolbar"><button id="reset" type="button">Clear my review scaffold</button></div><p id="status" role="status" aria-live="polite">All four own-review fields start blank. Selections and mapping review preserve typing.</p><div id="confirmation" hidden><p>Clear all four review fields? Supplied records, links and empty execution references stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed review</button><button id="keep" type="button">Keep typed review</button></div></div></section><footer>Notes are temporary in this open page; reloading clears them. No network, storage, test runner or automatic link repair is used. There is no passed-coverage badge, release decision or compliance certification.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const requirements=[{id:'R1',version:2},{id:'R2',version:1},{id:'R3',version:1}],tests=[{id:'TC1',version:1,source:'R1',sourceVersion:1},{id:'TC2',version:1,source:'R2',sourceVersion:1},{id:'TC3',version:1,source:null}];const impact={R1:{title:'R1 v2 · changed name-length boundary',detail:'Previous maximum: 20 characters (R1 v1). Current maximum: 40 characters (R1 v2). TC1 v1 expects rejection of a 25-character name under its recorded R1 v1 link. Under the new 1–40 rule, 25 is within the accepted range.',next:'Changing the link label to v2 alone is insufficient. Review the input, expected result, test revision and other affected boundaries through the team’s process; no replacement test is supplied here.'},R2:{title:'R2 v1 · current source version, no result',detail:'TC2 v1 references current R2 v1: build a preview, edit the attendee name and check the old preview clears. This is a current mapping, not a passed test.',next:'Inspect whether the case adequately tests the requirement. Obtain an actual version-bound result and evidence when execution occurs.'},R3:{title:'R3 v1 · event-title display uncovered',detail:'No test is linked to R3 v1 in the supplied mapping. This is a coverage gap in these records; no invented test fills it.',next:'Ask the owner what test and rationale should verify the supplied event title, then record the agreed items and reviewed link in the maintained system.'}};function choose(){const r=impact[$('requirement').value];$('selected-title').textContent=r.title;$('impact-detail').textContent=r.detail;$('next-question').textContent=r.next;}$('requirement').addEventListener('change',choose);$('review').addEventListener('click',()=>{$('finding-list').replaceChildren();const findings=[];for(const r of requirements){const linked=tests.filter(t=>t.source===r.id);if(!linked.length)findings.push(r.id+' v'+r.version+' is uncovered: no linked test in the supplied mapping.');for(const t of linked)if(t.sourceVersion!==r.version)findings.push(r.id+' v'+r.version+' / '+t.id+' v'+t.version+' has a stale target: recorded '+r.id+' v'+t.sourceVersion+'. TC1’s 25-character rejection is obsolete under R1 v2 and needs review.');else findings.push(r.id+' v'+r.version+' / '+t.id+' v'+t.version+' is a current mapping, not a passed test.');}for(const t of tests.filter(t=>!t.source))findings.push(t.id+' v'+t.version+' has no recorded source requirement; retain it for human review.');for(const text of findings){const li=document.createElement('li');li.textContent=text;$('finding-list').append(li);}$('findings').hidden=false;$('review').setAttribute('aria-expanded','true');$('review-status').textContent='Four mapping findings shown. No links changed and no tests executed.';});for(const id of ['reset'])$(id).addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all four review fields.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('textarea'))field.value='';$('confirmation').hidden=true;$('status').textContent='Your review fields were cleared. Supplied links and execution references are unchanged.';$('own-requirements').focus();});choose();})();</script></body></html>