46 lines
2.2 KiB
HTML
46 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="en"><meta charset="utf-8"><title>Cthulhu Browser Probe</title>
|
|
<body>
|
|
<script>
|
|
document.addEventListener('keydown', event => {
|
|
if (event.key === 'F8') {
|
|
document.title = 'Cthulhu Browser Probe updated';
|
|
event.preventDefault();
|
|
}
|
|
if (event.key === 'F9') {
|
|
const region = document.getElementById('chat-announcements');
|
|
region.replaceChildren();
|
|
const message = document.createElement('div');
|
|
message.textContent = 'Username: Test message';
|
|
region.appendChild(message);
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
</script>
|
|
<h1 tabindex="0">Browser foundation</h1>
|
|
<h2 tabindex="0">Reading section</h2>
|
|
<p>Plain document text with Café and 猫.</p>
|
|
<ul aria-label="Example list"><li>Example item</li><li style="white-space: pre">Registered: <strong>September <em>2026</em></strong></li></ul>
|
|
<div role="separator" aria-label="Section separator">Section separator</div>
|
|
<a href="#target" onclick="document.getElementById('following').replaceChildren('Text refreshed after the ordinary heading.')">Example link</a>
|
|
<label>Display name <input required></label>
|
|
<label>Secret <input type="password" value="private-probe-value"></label>
|
|
<label><input type="checkbox">Remember choice</label>
|
|
<button aria-expanded="false" onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')">Details</button>
|
|
<p id="target">Link destination</p>
|
|
<h2>Ordinary unfocusable heading</h2>
|
|
<p id="following">Text after the ordinary heading.</p>
|
|
<iframe title="Embedded reading" srcdoc="<!doctype html><html lang='en'><body><h3>Embedded heading</h3><p>Embedded document text.</p></body></html>"></iframe>
|
|
<button aria-haspopup="menu">Popup actions</button>
|
|
<button aria-haspopup="menu" aria-pressed="false">Popup toggle</button>
|
|
<button>Ordinary action</button>
|
|
<div id="chat-announcements" role="status" aria-live="polite" aria-atomic="true"></div>
|
|
<table aria-label="Navigation probe">
|
|
<caption>Navigation probe</caption>
|
|
<tr><th scope="col">Item</th><th scope="col">Count</th></tr>
|
|
<tr><th scope="row">Apples</th><td>Five</td></tr>
|
|
<tr><td colspan="2">Merged total</td></tr>
|
|
<tr><td><span>Last</span> <span>item</span></td><td></td></tr>
|
|
</table>
|
|
</body></html>
|