Add test coverage for search highlight persistence (#14047, #9802)

PR #13442 removed scroll-based highlight clearing. This commit adds
Playwright tests verifying: scroll events never clear marks, query-change
clearing still works, and no marks appear without ?q= parameter.

Restores test fixture files dropped during rebase (source files were in
the skipped JS fix commit). Updates changelog to credit @jtbayly and
reference both #9802 and #14047.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: cderv

news/changelog-1.9.md

@@ -119,7 +119,7 @@ All changes included in 1.9:
 - ([#13932](https://github.com/quarto-dev/quarto-cli/pull/13932)): Add `llms-txt: true` option to generate LLM-friendly content for websites. Creates `.llms.md` markdown files alongside HTML pages and a root `llms.txt` index file following the [llms.txt](https://llmstxt.org/) specification.
 - ([#13951](https://github.com/quarto-dev/quarto-cli/issues/13951)): Fix `image-lazy-loading` not applying `loading="lazy"` attribute to auto-detected listing images.
 - ([#14003](https://github.com/quarto-dev/quarto-cli/pull/14003)): Add text fragments to search result links so browsers scroll to and highlight the matched text on the target page.
-- ([#14047](https://github.com/quarto-dev/quarto-cli/issues/14047)): Fix search highlights cleared before user can see them when landing on a page with `?q=` search parameter.
+- ([#9802](https://github.com/quarto-dev/quarto-cli/issues/9802), [#14047](https://github.com/quarto-dev/quarto-cli/issues/14047)): Fix search term highlighting disappearing on page scroll or layout events when navigating from search results. (author: @jtbayly, [#13442](https://github.com/quarto-dev/quarto-cli/pull/13442))
 
 ### `book`
 

tests/docs/playwright/html/.gitignore

@@ -1,2 +1,4 @@
 *_files/
-*.html
+*.html
+/.quarto/
+**/*.quarto_ipynb

tests/docs/playwright/html/search-highlight/_quarto.yml

@@ -0,0 +1,11 @@
+project:
+  type: website
+
+website:
+  title: "Search Highlight Test"
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home
+
+format: html

tests/docs/playwright/html/search-highlight/index.qmd

@@ -0,0 +1,7 @@
+---
+title: "Search Highlight Test"
+---
+
+This page contains a special keyword that we use for testing search highlighting.
+
+The word special appears multiple times on this page to ensure search highlighting works correctly.

tests/integration/playwright/tests/html-search-highlight.spec.ts

@@ -1,38 +1,53 @@
 import { test, expect } from "@playwright/test";
 
-test('Search highlights persist after page load', async ({ page }) => {
-  await page.goto('./html/search-highlight/_site/index.html?q=special');
+const BASE = './html/search-highlight/_site/index.html';
+
+test('Search highlights not cleared by scroll events', async ({ page }) => {
+  await page.goto(`${BASE}?q=special`);
   const marks = page.locator('mark');
 
-  // Marks should exist after page load
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
+  const initialCount = await marks.count();
+  expect(initialCount).toBeGreaterThanOrEqual(2);
 
-  // Simulate the layout-triggered quarto-hrChanged event that clears marks
-  // prematurely without the fix (#14047). With the fix, the listener is
-  // registered after a delay, so early events like this are ignored.
+  // Dispatch layout events immediately (previously cleared marks via quarto-hrChanged)
   await page.evaluate(() => {
     window.dispatchEvent(new CustomEvent('quarto-hrChanged'));
+    window.dispatchEvent(new CustomEvent('quarto-sectionChanged'));
   });
+  await expect(marks).toHaveCount(initialCount);
 
-  // Marks should still be visible after the simulated layout event
-  await expect(marks.first()).toBeVisible();
-  await expect(marks.first()).toContainText(/special/i);
+  // Wait and dispatch again — marks should persist at any time
+  await page.waitForTimeout(1500);
+  await page.evaluate(() => {
+    window.dispatchEvent(new CustomEvent('quarto-hrChanged'));
+    window.dispatchEvent(new CustomEvent('quarto-sectionChanged'));
+  });
+  await expect(marks).toHaveCount(initialCount);
 });
 
-test('Search highlights are cleared by scroll after delay', async ({ page }) => {
-  await page.goto('./html/search-highlight/_site/index.html?q=special');
+test('Search highlights cleared when query changes', async ({ page }) => {
+  await page.goto(`${BASE}?q=special`);
   const marks = page.locator('mark');
 
-  // Marks should exist after page load
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
 
-  // Wait for the delayed listener registration (1000ms in quarto-search.js)
-  await page.waitForTimeout(1500);
+  // Open the detached search overlay
+  await page.locator('.aa-DetachedSearchButton').click();
+  const input = page.locator('.aa-Input');
+  await expect(input).toBeVisible({ timeout: 2000 });
 
-  // Now quarto-hrChanged should clear marks (listener is registered)
-  await page.evaluate(() => {
-    window.dispatchEvent(new CustomEvent('quarto-hrChanged'));
-  });
+  // Type a different query — triggers onStateChange which clears marks
+  await input.fill('different');
+  await expect(page.locator('main mark')).toHaveCount(0, { timeout: 2000 });
+});
+
+test('No highlights without search query', async ({ page }) => {
+  await page.goto(BASE);
+
+  // Wait for page to fully load
+  await expect(page.locator('main')).toBeVisible();
 
-  await expect(marks).toHaveCount(0);
+  // No marks should exist without ?q= parameter
+  await expect(page.locator('mark')).toHaveCount(0);
 });