test(fast-browser): add paired local browser performance benchmark

2026-09-21 13:25:44 -04:00
parent 574e083e75
commit e10a9573b9
4 changed files with 897 additions and 0 deletions
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Fast-browser performance fixture</title>
+  <style>
+    body { font: 16px system-ui, sans-serif; margin: 2rem; }
+    .candidate-grid { display: grid; gap: .35rem; max-width: 42rem; }
+    .status { min-height: 1.5rem; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Local form validation</h1>
+    <p id="status" class="status">Fixture ready</p>
+    <p id="profile-status" class="status">Profile draft loaded</p>
+    <p id="popup-status" class="status">Popup idle</p>
+    <p id="preview" class="status"></p>
+    <form id="form" novalidate></form>
+  </main>
+  <script>
+    (() => {
+      const params = new URLSearchParams(location.search);
+      const mode = params.get('mode') || 'density';
+      const count = Math.max(0, Math.min(60, Number(params.get('count') || 0)));
+      const form = document.querySelector('#form');
+      const status = document.querySelector('#status');
+      const profileStatus = document.querySelector('#profile-status');
+      const popupStatus = document.querySelector('#popup-status');
+      const preview = document.querySelector('#preview');
+      const label = (text, input) => {
+        const wrapper = document.createElement('div');
+        const caption = document.createElement('label');
+        caption.textContent = text;
+        caption.htmlFor = input.id;
+        wrapper.append(caption, input);
+        return wrapper;
+      };
+      if (mode === 'popup') {
+        status.textContent = 'Popup ready';
+        return;
+      }
+      if (mode === 'density') {
+        const grid = document.createElement('div');
+        grid.className = 'candidate-grid';
+        for (let index = 0; index < count; index += 1) {
+          const input = document.createElement('input');
+          input.id = `candidate-${index}`;
+          input.type = 'text';
+          input.placeholder = `Search filter ${index + 1}`;
+          grid.append(label(`Filter ${index + 1}`, input));
+        }
+        form.append(grid);
+        status.textContent = `Density fixture with ${count} controls`;
+        return;
+      }
+      const display = document.createElement('input');
+      display.id = 'display-name';
+      display.type = 'text';
+      display.value = 'existing value';
+      form.append(label('Display name', display));
+
+      const save = document.createElement('button');
+      save.type = 'button';
+      save.textContent = 'Save profile';
+      save.addEventListener('click', () => {
+        profileStatus.textContent = display.value === 'Ada Lovelace' ? 'Profile saved' : 'Profile validation failed';
+      });
+      form.append(save);
+
+      const previewButton = document.createElement('button');
+      previewButton.type = 'button';
+      previewButton.textContent = 'Preview profile';
+      previewButton.addEventListener('click', () => {
+        preview.textContent = `Preview ready: ${display.value}`;
+      });
+      form.append(previewButton);
+
+      const immediate = document.createElement('button');
+      immediate.type = 'button';
+      immediate.textContent = 'Immediate action';
+      immediate.addEventListener('click', () => { status.textContent = 'Immediate complete'; });
+      form.append(immediate);
+
+      const delayed = document.createElement('button');
+      delayed.type = 'button';
+      delayed.textContent = 'Delayed action';
+      delayed.addEventListener('click', () => setTimeout(() => { status.textContent = 'Delayed complete'; }, 40));
+      form.append(delayed);
+
+      const popupButton = document.createElement('button');
+      popupButton.type = 'button';
+      popupButton.textContent = 'Open popup';
+      popupButton.addEventListener('click', () => {
+        popupStatus.textContent = 'Popup requested';
+        window.open(`${location.origin}${location.pathname}?mode=popup`, '_blank', 'popup,width=420,height=240');
+      });
+      form.append(popupButton);
+      for (let index = 0; index < 10; index += 1) {
+        const input = document.createElement('input');
+        input.id = `extra-${index}`;
+        input.type = 'text';
+        input.placeholder = `Extra field ${index + 1}`;
+        form.append(label(`Extra field ${index + 1}`, input));
+      }
+    })();
+  </script>
+</body>
+</html>