feat(chrome): hand snapshots to context mode

2026-08-28 08:35:57 +00:00 · 2026-08-28 14:45:37 +08:00
parent 221e978622
commit f3a2abe1e4
96 changed files with 12800 additions and 26 deletions
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>21 keyboard modifiers</title>
+<link rel="stylesheet" href="../_style.css">
+<script src="../_lib.js"></script>
+<body>
+<main>
+  <p>Goal: focus the input and type a capital <code>A</code> via <b>Shift+a</b>
+     (not Caps Lock, not pasted, not assigned). Page asserts a real Shift chord:
+     <code>keydown</code> for <code>Shift</code> arrives <em>before</em> <code>keydown</code> for
+     <code>A</code>; the <code>A</code> event has <code>shiftKey=true</code>,
+     <code>key==="A"</code>, <code>code==="KeyA"</code>, <code>getModifierState("Shift")===true</code>;
+     and <code>keyup</code> for Shift arrives <em>after</em> <code>keyup</code> for <code>A</code>.</p>
+  <input id="t" placeholder="type Shift+a" style="font-size:18px;padding:8px 12px;width:240px">
+</main>
+<script>
+Challenge.init({ id: "keyboard-modifiers", instructions: "type capital A using Shift+a chord" });
+const t = document.getElementById("t");
+
+const log = [];
+for (const name of ["keydown","keypress","keyup","input"]) {
+  t.addEventListener(name, (e) => {
+    log.push({
+      name,
+      key: e.key, code: e.code,
+      shiftKey: e.shiftKey, isTrusted: e.isTrusted,
+      modShift: e.getModifierState ? e.getModifierState("Shift") : null,
+      t: e.timeStamp,
+    });
+  });
+}
+
+t.addEventListener("input", () => {
+  if (t.value !== "A") return;
+  const bad = [];
+  const downShift = log.find(e => e.name === "keydown" && e.key === "Shift");
+  const downA     = log.find(e => e.name === "keydown" && e.code === "KeyA");
+  const upShift   = log.find(e => e.name === "keyup"   && e.key === "Shift");
+  const upA       = log.find(e => e.name === "keyup"   && e.code === "KeyA");
+
+  if (!downShift) bad.push("no keydown for Shift");
+  if (!downA)     bad.push("no keydown for KeyA");
+  if (!upShift)   bad.push("no keyup for Shift");
+  if (!upA)       bad.push("no keyup for KeyA");
+
+  if (downShift && downA && downShift.t > downA.t) bad.push("Shift keydown after A keydown");
+  if (upShift && upA && upShift.t < upA.t) bad.push("Shift keyup before A keyup");
+
+  if (downA) {
+    if (downA.key !== "A")            bad.push(`A keydown.key="${downA.key}" (need 'A')`);
+    if (downA.code !== "KeyA")        bad.push(`A keydown.code="${downA.code}"`);
+    if (!downA.shiftKey)              bad.push("A keydown.shiftKey=false");
+    if (downA.modShift !== true)      bad.push("getModifierState('Shift')!==true on A keydown");
+    if (!downA.isTrusted)             bad.push("A keydown isTrusted=false");
+  }
+  if (downShift) {
+    if (!downShift.isTrusted)         bad.push("Shift keydown isTrusted=false");
+  }
+
+  Challenge.log("chord", { log });
+  if (bad.length) Challenge.fail(...bad);
+  else Challenge.pass("Shift+a chord, modifiers + ordering correct");
+});
+</script>
+</body>