fix: allow text selection on test filenames in CompareGold

Author: xen2

build/tools/CompareGold/wwwroot/app.js

@@ -56,7 +56,7 @@ async function reload() {
     }
     // Load thresholds for this suite
     const tRes = await fetch(`/api/thresholds?suite=${enc(suite)}`);
-    const thresholdRules = await tRes.json();
+    const thresholdRules = tRes.ok ? await tRes.json() : [];
     // Only include suite if it has any images
     if (gold.length > 0 || Object.values(srcImgs).some(imgs => imgs.length > 0))
       suiteData[suite] = { gold, sourceImages: srcImgs, thresholdRules };
@@ -274,7 +274,8 @@ function renderTable() {
         } else if (!img.hasGold) {
           cellHtml = '<span class="cell new">○ new</span>';
         } else if (stats) {
-          const cls = stats.diffPixels === 0 ? 'pass' : 'fail';
+          const result = checkCellThreshold(img.suite, img.name, stats);
+          const cls = result.passed ? 'pass' : 'fail';
           cellHtml = `<span class="cell ${cls}">${cls === 'pass' ? '✓' : '✗'} d=${stats.maxDiff}</span>`;
         } else {
           cellHtml = `<span class="cell" data-stats-key="${esc(statsKey)}" style="color:#666">...</span>`;
@@ -296,7 +297,11 @@ function renderTable() {
       }
 
       tr.innerHTML = cells;
-      tr.onclick = () => toggleExpand(key);
+      tr.onmousedown = (e) => { tr._clickX = e.clientX; tr._clickY = e.clientY; };
+      tr.onclick = (e) => {
+        if (Math.abs(e.clientX - tr._clickX) > 3 || Math.abs(e.clientY - tr._clickY) > 3) return;
+        toggleExpand(key);
+      };
       tbody.appendChild(tr);
 
       if (isExp) {
@@ -526,10 +531,27 @@ async function runStatsQueue() {
   statsRunning = false;
 }
 
+function checkCellThreshold(suite, name, stats) {
+  const data = suiteData[suite];
+  const rules = data?.thresholdRules || [];
+  const [platApi, device] = currentPlatform.split('/');
+  const dotIdx = platApi?.indexOf('.') ?? -1;
+  const plat = dotIdx >= 0 ? platApi.substring(0, dotIdx) : platApi;
+  const api = dotIdx >= 0 ? platApi.substring(dotIdx + 1) : null;
+  const allow = resolveThreshold(rules, name, plat, api, device);
+  if (stats.pixelDiffs) return checkThreshold(stats.pixelDiffs, allow);
+  // Fallback for stats without pixelDiffs
+  return { passed: stats.diffPixels === 0, details: [] };
+}
+
 function updateCellInline(key, stats) {
   const el = document.querySelector(`[data-stats-key="${CSS.escape(key)}"]`);
   if (!el) return;
-  const cls = stats.diffPixels === 0 ? 'pass' : 'fail';
+  const parts = key.split(':');
+  const suite = parts[1];
+  const name = parts.slice(2).join(':');
+  const result = checkCellThreshold(suite, name, stats);
+  const cls = result.passed ? 'pass' : 'fail';
   el.className = `cell ${cls}`;
   el.removeAttribute('style');
   el.removeAttribute('data-stats-key');

build/tools/CompareGold/wwwroot/diff.js

@@ -115,6 +115,7 @@ function resolveThreshold(rules, imageName, platform, api, device) {
 }
 
 // Check pixelDiffs against allow buckets. Returns { passed, details[] }
+// Only explicitly specified ranges are checked. Unspecified ranges are not limited.
 function checkThreshold(pixelDiffs, allow) {
   if (!allow) {
     // Default: 3+: 0

build/tools/CompareGold/wwwroot/style.css

@@ -35,7 +35,8 @@ th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #333; font-si
 th:hover { color: #4fc3f7; }
 th.right { text-align: right; }
 td { padding: 6px 10px; border-bottom: 1px solid #222244; vertical-align: top; }
-tr.row { cursor: pointer; user-select: none; }
+tr.row { cursor: pointer; }
+tr.row .thumb, tr.row .cell, tr.row .cb { user-select: none; }
 tr.row:hover { background: #222244; }
 tr.row.expanded { background: #1a2a4a; }
 tr.row.kb-focus, tr.suite-row.kb-focus { outline: 1px solid #4fc3f7; outline-offset: -1px; }