Add tests for programmatic focus.

sanketj · Sep 23, 2024 · 33ae6b8 · 33ae6b8
1 parent 8f4a7b0
commit 33ae6b8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/programmatic-focus-iframe.html b/programmatic-focus-iframe.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <h1>Iframed Page</h1>
+  <p>This page will steal focus after the countdown</p>
+  <p id="countdown">3</p>
+  <input id="input" type="text">
+  <script>
+    window.onfocus = () => {
+      document.getElementById("input").focus();
+    };
+
+    var countdown = 3;
+    var interval = setInterval(function () {
+      countdown--;
+      document.getElementById("countdown").textContent = countdown;
+      if (countdown === 0) {
+        clearInterval(interval);
+        document.getElementById("input").focus();
+      }
+    }, 1000);
+  </script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    input {
+      font-size: 1.5em;
+      padding: 0.5em;
+      width: 50%;
+    }
+    input:focus {
+      outline: 2px solid blue;
+    }
+  </style>
+</body>
+</html>
diff --git a/programmatic-focus.html b/programmatic-focus.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <h1>Focus Steal Sample</h1>
+  <p>Click on the "Load frame" button below to see focus being stole by the iframed page. You will see the focus rect move into the frame after it loads.</p>
+  <p>Click on the "Focus frame" button below to programmatically move focus to the iframed page. You should see the focus rect move into the frame.</p>
+  <button onclick="loadFrame()">Load frame</button>
+  <button onclick="focusFrame()">Focus frame</button>
+  <iframe id="frame" allow="focus-without-user-activation 'none'" width="100%" height="300"></iframe>
+  <script>
+    function loadFrame() {
+      document.getElementById("frame").src = "./programmatic-focus-iframe.html";
+    }
+    function focusFrame() {
+      document.getElementById("frame").focus();
+    }
+  </script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    button {
+      font-size: 1.5em;
+      padding: 0.5em;
+      margin-bottom: 0.5em;
+    }
+    button:focus {
+      outline: 2px solid blue;
+    }
+  </style>
+</body>
+</html>