경계값 분석

<div class="demo"><div class="head"><b>BOUNDARY TEST</b><span>valid: 18–65</span></div><div class="scene"><div class="value" id="value">17</div><div class="track"><div class="low">17</div><div class="valid">18 … 65</div><div class="high">66</div></div><div class="result" id="result">FAIL</div></div><div class="foot"><span id="case">just below minimum</span><span>tap to test</span></div></div>

.demo{width:min(94vw,690px);height:min(86vh,310px);padding:clamp(10px,2.4vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(9px,2.5vmin,15px)/1.3 ui-monospace,monospace}.head,.foot{display:flex;justify-content:space-between;gap:8px}.head b{color:var(--accent)}.head span,.foot{color:var(--muted)}.foot{font-size:.82em}.scene{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(9px,3vmin,24px)}.value{font-size:clamp(26px,10vmin,56px);color:var(--accent);line-height:1}.track{width:90%;display:flex;text-align:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}.track div{padding:clamp(5px,1.5vmin,10px) 2px;background:var(--bg)}.track .low,.track .high{width:20%;color:var(--muted)}.track .valid{width:60%;background:color-mix(in srgb,var(--accent) 20%,var(--surface));color:var(--accent)}.result{padding:.3em .8em;border-radius:5px;border:1px solid var(--accent-3);color:var(--accent-3)}.result.pass{color:var(--accent);border-color:var(--accent)}

const values=[17,18,19,64,65,66],labels=['just below minimum','at minimum','just above minimum','just below maximum','at maximum','just above maximum'];let step=0;function test(){const value=values[step],pass=value>=18&&value<=65;document.getElementById('value').textContent=value;document.getElementById('result').textContent=pass?'PASS':'FAIL';document.getElementById('result').classList.toggle('pass',pass);document.getElementById('case').textContent=labels[step];step=(step+1)%values.length}test();const timer=setInterval(test,650);document.querySelector('.demo').addEventListener('pointerdown',()=>{clearInterval(timer);test()})