mirror of
https://github.com/Tencent/BrowserSkill.git
synced 2026-09-10 13:01:23 +08:00
81 lines
3.5 KiB
HTML
81 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<style>
|
|
html, body { margin: 0; font: 14px system-ui, sans-serif; }
|
|
body { padding: 12px; background: #fdfefe; }
|
|
canvas { display: block; width: 220px; height: 90px; background: #d5f5e3; border: 2px solid #1e8449; }
|
|
iframe { width: 280px; height: 150px; margin-top: 10px; border: 2px solid #85929e; }
|
|
#pointer-status { margin: 8px 0 0; min-height: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="frame-canvas" width="220" height="90"></canvas>
|
|
<script>
|
|
const params = new URLSearchParams(location.search);
|
|
const canvas = document.querySelector("#frame-canvas");
|
|
if (params.get("canvas") === "0") canvas.remove();
|
|
else {
|
|
canvas.setAttribute("aria-label", params.get("label") || "fixture-frame-default");
|
|
if (params.get("editor") === "1") {
|
|
const context = canvas.getContext("2d");
|
|
context.font = "14px system-ui, sans-serif";
|
|
context.textBaseline = "middle";
|
|
context.strokeStyle = "#1e8449";
|
|
context.fillStyle = "#145a32";
|
|
for (let row = 0; row < 3; row += 1) {
|
|
const top = row * 30;
|
|
context.strokeRect(0.5, top + 0.5, 219, 29);
|
|
context.fillText(`Row ${row + 1}`, 12, top + 15);
|
|
}
|
|
}
|
|
if (params.get("interactive") === "1") {
|
|
const status = document.createElement("p");
|
|
status.id = "pointer-status";
|
|
status.setAttribute("aria-live", "polite");
|
|
status.textContent = "pointer status: idle";
|
|
canvas.insertAdjacentElement("afterend", status);
|
|
let hoverReady = false;
|
|
canvas.addEventListener("pointermove", () => {
|
|
hoverReady = false;
|
|
requestAnimationFrame(() => {
|
|
hoverReady = true;
|
|
});
|
|
});
|
|
canvas.addEventListener("pointerdown", (event) => {
|
|
status.textContent = `pointer status: down button=${event.button} buttons=${event.buttons} hoverReady=${hoverReady}`;
|
|
if (event.buttons === 1 && hoverReady) canvas.style.background = "#f9e79f";
|
|
});
|
|
canvas.addEventListener("click", () => {
|
|
status.textContent += "; click received";
|
|
});
|
|
if (params.get("editor") === "1") {
|
|
canvas.addEventListener("click", (event) => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const canvasY = ((event.clientY - rect.top) / rect.height) * canvas.height;
|
|
const row = Math.min(2, Math.max(0, Math.floor(canvasY / 30)));
|
|
status.textContent += `; selected row=${row + 1}`;
|
|
document.querySelector("#canvas-cell-editor")?.remove();
|
|
if (row !== 2) return;
|
|
const editor = document.createElement("input");
|
|
editor.id = "canvas-cell-editor";
|
|
editor.setAttribute("aria-label", "selected canvas cell editor");
|
|
editor.placeholder = "Type into selected row 3";
|
|
canvas.insertAdjacentElement("afterend", editor);
|
|
editor.focus();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
if (params.get("nested") === "1") {
|
|
const iframe = document.createElement("iframe");
|
|
iframe.title = "nested fixture frame";
|
|
iframe.src = "frame.html?label=fixture-nested-frame&interactive=1";
|
|
document.body.append(iframe);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|