A bounded browser test plan with scope, four scenarios, data readiness, and entry/exit conditions

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>LP-0.4 · bounded test-plan review</title><style>
*{box-sizing:border-box}body{margin:0;background:#eef2f3;color:#2b3d49;font:16px/1.6 system-ui,sans-serif}main{max-width:1060px;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,dd{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{background:white;border:1px solid #becad0;border-radius:8px;padding:22px;margin:22px 0}.scope{padding:20px;background:#2d5363;color:white;border-radius:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{padding:16px;background:#f0f5f7;border-top:5px solid #6f8c9b}.warning{padding:18px;background:#fff0d8;border-left:5px solid #ad7034}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea,select{font:inherit}button{padding:10px 15px;min-height:44px;color:inherit;background:white;border:1px solid #5f8091;border-radius:5px;cursor:pointer}button[aria-pressed="true"]{background:#2d5363;color:white}button:hover{box-shadow:inset 0 0 0 1px #2d5363}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b35a25;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}textarea,select{display:block;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #7c939f;border-radius:4px;background:white;color:inherit}textarea{min-height:110px;resize:vertical}textarea[readonly]{background:#f5f6f3}dl{margin:0}dt{font-weight:750;margin:14px 0 5px}dd{margin:0 0 16px}ul{padding-left:22px}li{margin:10px 0}footer{border-top:1px solid #becad0;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid{grid-template-columns:1fr}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL PLAN · NO EXECUTED TESTS</p><h1>Agree what the test cycle will establish.</h1><p>LP-0.4 previews an equipment-loan request. The proposed F2 catalog still needs data review. Inspect the scope, cases and entry conditions before planning execution.</p><div class="scope">Target: LP-0.4 with fixture F2. This is a plan-review page, not the equipment preview or a test runner. It supplies no actual results, pass rates or release approval.</div><p class="warning"><strong>Supplied planning state: waiting for data review.</strong> F2 confirmation is pending. That dependency is not a failed software test.</p>
<section class="panel" aria-labelledby="review-title"><h2 id="review-title">Review the bounded cycle</h2><div class="toolbar" role="group" aria-label="Test-plan review view"><button id="view-scope" type="button" aria-pressed="true">Scope</button><button id="view-cases" type="button" aria-pressed="false">Planned cases</button><button id="view-entry" type="button" aria-pressed="false">Entry review</button></div><p id="view-status" role="status" aria-live="polite">Scope shown. No case was executed.</p>
<div id="scope-view"><h3>Objective</h3><p>Check the request-to-preview behavior for the supplied catalog and quantity rules.</p><div class="grid"><article class="card"><h3>In scope</h3><p>Item selection, quantity validation, preview contents, stale-preview clearing, keyboard use, and narrow-layout readability.</p></article><article class="card"><h3>Out of scope</h3><p>Inventory reservation, payments, email delivery, staff approval, and live borrowing. None is represented by the preview.</p></article></div><h3>Proposed fixture F2</h3><p>B01 · Binoculars<br>T01 · Tripod<br>Quantity: integer from 1 through 5.</p><p>The data reviewer has not yet confirmed this catalog for LP-0.4. Record the actual served build and fixture identity when execution occurs.</p><h3>Approach and environment</h3><p>Manual execution in an isolated test environment at 720px and 360px, including keyboard operation. Record the actual browser and version. These example widths do not cover every device or browser.</p><h3>Fictional roles</h3><p>Test coordinator plans and records the cycle; data reviewer confirms F2; product reviewer reviews outcomes and exceptions.</p></div>
<div id="cases-view" hidden><label for="case">Planned case</label><select id="case"><option value="TP1">TP1 · Preview contents</option><option value="TP2">TP2 · Blank quantity</option><option value="TP3">TP3 · Out-of-range quantity</option><option value="TP4">TP4 · Stale preview after edit</option></select><h3 id="case-title"></h3><dl><dt>Risk</dt><dd id="case-risk"></dd><dt>Setup, input and sequence</dt><dd id="case-sequence"></dd><dt>Expected behavior to inspect</dt><dd id="case-expected"></dd></dl><div class="grid"><div><label for="observed">Observed behavior · unexecuted, blank</label><textarea id="observed" readonly></textarea></div><div><label for="evidence">Actual evidence reference · unexecuted, blank</label><textarea id="evidence" readonly></textarea></div></div><p class="warning">Expected behavior is a plan, not an observation. These read-only actual-result fields stay empty because no execution is represented.</p></div>
<div id="entry-view" hidden><h3>Entry review · waiting for data review</h3><dl><dt>Blocking condition in the supplied snapshot</dt><dd>F2 confirmation is pending.</dd><dt>Dependency owner</dt><dd>Data reviewer</dd><dt>Next question</dt><dd>Does F2 match the catalog intended for LP-0.4?</dd></dl><h3>Conditions to establish before execution</h3><ul><li>Identify the exact served LP-0.4 build.</li><li>Obtain the data reviewer's confirmation of F2.</li><li>Make the isolated environment available.</li><li>Have the four cases and recording fields ready.</li></ul><p>Only the pending F2 review is supplied as a readiness observation. This page does not mark the other conditions fulfilled or approve the fixture.</p><h3>Schedule and exit-review proposal</h3><p>Schedule execution after entry conditions are met, then allow issue review and retesting. Actual dates and participant availability are not supplied.</p><p>Every in-scope case needs an actual result and evidence reference. Each issue needs a reviewed disposition, with retest evidence or an explicitly recorded exception where relevant. The product reviewer considers unresolved issues through the team's real process; this rule is not an automatic release decision.</p><p>Actual records should separate case/version, build, environment, actual input, expected behavior, observed behavior, result, evidence and issue reference. Review case relevance if the build or fixture changes.</p></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank plan scaffold · your actual cycle</h2><p>Supply your team’s decisions and evidence needs. Keep actual execution records in the maintained test system; do not copy expected behavior into an observed field.</p><div class="grid" id="blank-fields"></div><label for="review-notes">Local review notes and unresolved decisions</label><textarea id="review-notes"></textarea><div class="toolbar"><button id="reset" type="button">Clear my plan notes</button></div><p id="status" class="warning" role="status" aria-live="polite">Your six plan sections and review notes start blank. Inspecting the plan does not execute or approve anything.</p><div id="confirmation" hidden><p>Clear all seven own-plan fields? The supplied plan, pending F2 review and blank unexecuted results stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed plan</button><button id="keep" type="button">Keep typed plan</button></div></div></section><footer>Notes are temporary in this open page; reloading clears them. No data is stored or submitted. There is no test execution, deployment, fixture approval or pass dashboard.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const cases={TP1:{title:'TP1 · Preview contents',risk:'Wrong preview contents.',sequence:'Choose B01 · Binoculars; enter quantity 2; build the request preview.',expected:'Preview names Binoculars and quantity 2.'},TP2:{title:'TP2 · Blank quantity',risk:'Empty quantity accepted.',sequence:'Choose B01 · Binoculars; leave quantity blank; attempt to build the preview.',expected:'Identify the missing quantity and withhold the preview.'},TP3:{title:'TP3 · Out-of-range quantity',risk:'Out-of-range quantity accepted.',sequence:'Choose T01 · Tripod; enter quantity 6; attempt to build the preview.',expected:'Explain the allowed range 1–5 and withhold the preview.'},TP4:{title:'TP4 · Stale preview after edit',risk:'An old preview misrepresents edited inputs.',sequence:'First build a valid B01/2 preview. Then change the quantity to 3 without building a new preview.',expected:'Clear the earlier preview until the visitor builds a new one.'}};function choose(){const c=cases[$('case').value];$('case-title').textContent=c.title;$('case-risk').textContent=c.risk;$('case-sequence').textContent=c.sequence;$('case-expected').textContent=c.expected;}function view(key){for(const k of ['scope','cases','entry']){$('view-'+k).setAttribute('aria-pressed',String(k===key));$(k+'-view').hidden=k!==key;}$('view-status').textContent=({scope:'Scope',cases:'Planned cases',entry:'Entry review'})[key]+' shown. No case was executed.';}for(const key of ['scope','cases','entry'])$('view-'+key).addEventListener('click',()=>view(key));$('case').addEventListener('change',choose);for(const [id,title]of [['objective','Product/build and bounded objective'],['scope','In-scope risks and explicit exclusions'],['environment','Environment, browsers, widths and data fixtures'],['owners','Owners, dependencies and entry conditions'],['cases','Planned scenarios and expected behavior'],['exit','Exit review, reporting fields and schedule decisions']]){const div=document.createElement('div');const label=document.createElement('label');label.htmlFor='own-'+id;label.textContent=title;const field=document.createElement('textarea');field.id=label.htmlFor;div.append(label,field);$('blank-fields').append(div);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept your seven plan and review-note fields.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('#blank-fields textarea'))field.value='';$('review-notes').value='';$('confirmation').hidden=true;$('status').textContent='Your plan notes were cleared. The supplied planning state and unexecuted result fields are unchanged.';$('own-objective').focus();});choose();})();</script></body></html>