Merge remote-tracking branch 'origin/main' into fix/biblio-specref-guard

# Conflicts:
#	builds/respec-aom.js
#	builds/respec-aom.js.map
#	builds/respec-dini.js
#	builds/respec-dini.js.map
#	builds/respec-w3c.js
#	builds/respec-w3c.js.map
#	tests/spec/core/biblio-spec.js

Author: Copilot

builds/respec-aom.js

@@ -1,6 +1,6 @@
 {
   "name": "respec",
-  "version": "37.3.5",
+  "version": "37.3.6",
   "license": "W3C",
   "description": "A technical specification pre-processor.",
   "engines": {
@@ -81,7 +81,7 @@
     "server": "serve",
     "start": "node ./tools/dev-server.cjs",
     "test:build": "jasmine --random=false ./tests/test-build.cjs",
-    "test:headless": "jasmine --random=false ./tests/headless.cjs",
+    "test:headless": "jasmine --random=false ./tests/headless.cjs ./tests/darkmode-race.cjs",
     "test": "pnpm test:unit && pnpm test:integration",
     "test:unit": "karma start ./tests/unit/karma.conf.cjs --single-run",
     "test:integration": "karma start ./tests/spec/karma.conf.cjs --single-run"

builds/respec-aom.js.map

@@ -12,13 +12,20 @@ export const biblio = {};
 
 export const name = "core/biblio";
 
-const bibrefsURL = new URL("https://api.specref.org/bibrefs?refs=");
+/** Keep Specref first: a citation then resolves the same here as in every other spec tool. */
+const bibrefsURLs = [
+  new URL("https://api.specref.org/bibrefs?refs="),
+  new URL("https://respec.org/bibrefs?refs="),
+];
+
+/** Without this, a service that connects and never replies blocks the fallback. */
+const FETCH_TIMEOUT_MS = 5000;
 
 // Opportunistically dns-prefetch to bibref server, as we don't know yet
 // if we will actually need to download references yet.
 const link = createResourceHint({
   hint: "dns-prefetch",
-  href: bibrefsURL.origin,
+  href: bibrefsURLs[0].origin,
 });
 document.head.appendChild(link);
 /** @type {(value: Conf['biblio']) => void} */
@@ -29,33 +36,56 @@ const done = new Promise(resolve => {
   doneResolver = resolve;
 });
 
+/**
+ * Asks each bibliography service in turn and returns the first usable answer.
+ * A service only counts as answering once its body parses, so an error page
+ * that comes back as 200 and HTML still falls through to the next one.
+ *
+ * @param {string} refs comma separated reference ids
+ * @returns {Promise<{ data: Conf['biblio'], expires: string | null } | null>}
+ */
+async function fetchBibrefs(refs) {
+  for (const url of bibrefsURLs) {
+    let response;
+    try {
+      response = await fetch(url.href + refs, {
+        signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+      });
+    } catch (err) {
+      console.warn(`Could not reach ${url.origin} for references.`, err);
+      continue;
+    }
+    if (response.status !== 200) {
+      console.warn(`${url.origin} answered ${response.status} for references.`);
+      continue;
+    }
+    try {
+      const data = await response.json();
+      return { data, expires: response.headers.get("Expires") };
+    } catch (err) {
+      console.warn(`${url.origin} sent references that are not JSON.`, err);
+    }
+  }
+  return null;
+}
+
 /** @param {string[]} refs */
-export async function updateFromNetwork(
-  refs,
-  options = { forceUpdate: false }
-) {
+export async function updateFromNetwork(refs) {
   const refsToFetch = [...new Set(refs)].filter(ref => ref.trim());
   // Update database if needed, if we are online
   if (!refsToFetch.length || navigator.onLine === false) {
     return null;
   }
-  let response;
-  try {
-    response = await fetch(bibrefsURL.href + refsToFetch.join(","));
-  } catch (err) {
-    console.error(err);
-    return null;
-  }
-  if ((!options.forceUpdate && !response.ok) || response.status !== 200) {
+  const found = await fetchBibrefs(refsToFetch.join(","));
+  if (!found) {
     return null;
   }
-  /** @type {Conf['biblio']} */
-  const data = await response.json();
+  const { data, expires: expiresHeader } = found;
   // SpecRef updates every hour, so we should follow suit
   // https://github.com/tobie/specref#hourly-auto-updating
   const oneHourFromNow = Date.now() + 1000 * 60 * 60 * 1;
   try {
-    const expiresValue = Date.parse(response.headers.get("Expires") || "");
+    const expiresValue = Date.parse(expiresHeader || "");
     const expires = Number.isNaN(expiresValue)
       ? oneHourFromNow
       : Math.min(expiresValue, oneHourFromNow);
@@ -173,7 +203,7 @@ export class Plugin {
     const externalRefs = split.noData.map(item => item.id);
     if (externalRefs.length) {
       // Going to the network for refs we don't have
-      const data = await updateFromNetwork(externalRefs, { forceUpdate: true });
+      const data = await updateFromNetwork(externalRefs);
       Object.assign(biblio, data);
     }
     Object.assign(biblio, this.conf.localBiblio);

builds/respec-dini.js

@@ -137,16 +137,13 @@ export function run(conf) {
     href="${darkModeStyleURL.href}"
   />`;
   if (isDark) darkLink.media = "(prefers-color-scheme: dark)";
+  // Setting `.disabled` on a still-loading link does not stick in Chrome, and the next write
+  // drops the sheet (#5436), so set the state before the element enters the document.
+  if (!isDark) darkLink.setAttribute("disabled", "");
   document.head.appendChild(darkLink);
   if (isDark) {
     // As required by W3C Pub Rules.
     sub("beforesave", styleMover(darkModeStyleURL));
-  } else {
-    // `disabled` rather than `media="not all"` because fixup.js sets
-    // `darkCss.media = ""`, which would wipe a media query. Must be set after
-    // insertion: per HTML the setter is a no-op while the link's associated CSS
-    // style sheet is still null.
-    darkLink.disabled = true;
   }
 }
 

builds/respec-dini.js.map

@@ -0,0 +1,149 @@
+// Regression test for speced/respec#5436. Only Chrome reproduces the race, so this passes on
+// other engines whether or not the fix is present.
+const http = require("http");
+const path = require("path");
+const fs = require("fs");
+const puppeteer = require("puppeteer");
+
+// A color nothing else in the page uses, so its presence is unmistakably this stylesheet.
+const DARK_MARKER = "rgb(11, 22, 33)";
+const LIGHT = "rgb(255, 255, 255)";
+// Cold CI runners need far longer than puppeteer's 30s default to start Chrome, which
+// tools/respecDocWriter.js and tests/headless.cjs both budget 120s for.
+const LAUNCH_TIMEOUT = 120000;
+
+describe("W3C - Style - dark stylesheet arriving late (#5436)", () => {
+  let server;
+  let browser;
+  let port;
+  const repoRoot = path.resolve(__dirname, "..");
+
+  beforeAll(async () => {
+    // Launch plus processing plus slack, the same shape tests/headless.cjs uses.
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = LAUNCH_TIMEOUT + 60000;
+    server = http.createServer((req, res) => {
+      if (req.url === "/") {
+        res.writeHead(200, { "Content-Type": "text/html" });
+        res.end(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <meta charset="utf-8">
+              <title>Race Condition Test</title>
+              <script>
+                var respecConfig = {
+                  specStatus: "ED",
+                  shortName: "x",
+                  group: "webapps",
+                  editors: [{name: "T"}],
+                  xref: false
+                };
+              </script>
+              <script src="/builds/respec-w3c.js"></script>
+            </head>
+            <body>
+              <section id="abstract"><p>Abstract</p></section>
+              <section id="sotd"><p>SOTD</p></section>
+            </body>
+          </html>
+        `);
+      } else {
+        const requestPath = new URL(req.url, "http://localhost").pathname;
+        const filePath = path.resolve(repoRoot, `.${requestPath}`);
+        const relativePath = path.relative(repoRoot, filePath);
+        if (relativePath.startsWith("..") || path.isAbsolute(relativePath)) {
+          res.writeHead(404);
+          res.end("Not Found");
+          return;
+        }
+        fs.readFile(filePath, (err, data) => {
+          if (err) {
+            res.writeHead(404);
+            res.end("Not Found");
+            return;
+          }
+          const ext = path.extname(filePath);
+          const contentTypes = {
+            ".js": "text/javascript",
+            ".css": "text/css",
+          };
+          res.writeHead(200, {
+            "Content-Type": contentTypes[ext] || "text/plain",
+          });
+          res.end(data);
+        });
+      }
+    });
+
+    await new Promise(resolve => {
+      server.listen(0, () => {
+        port = server.address().port;
+        resolve();
+      });
+    });
+
+    browser = await puppeteer.launch({
+      headless: true,
+      timeout: LAUNCH_TIMEOUT,
+    });
+  });
+
+  afterAll(async () => {
+    if (browser) await browser.close();
+    if (server) await new Promise(resolve => server.close(resolve));
+  });
+
+  // Loads the document with the dark stylesheet held back, so it lands between ReSpec's write
+  // and fixup.js's, and returns what the body settled on.
+  async function settled(scheme) {
+    const page = await browser.newPage();
+    await page.emulateMediaFeatures([
+      { name: "prefers-color-scheme", value: scheme },
+    ]);
+
+    await page.setRequestInterception(true);
+    page.on("request", request => {
+      if (/dark\.css/.test(request.url())) {
+        // These bytes are local and known, so a dark stylesheet that never arrived cannot be
+        // mistaken for a correct light result. fixup.js and the maturity stylesheet still come
+        // from www.w3.org, as they do across this suite, so this does need the network.
+        setTimeout(() => {
+          request.respond({
+            status: 200,
+            contentType: "text/css",
+            body: `body { background-color: ${DARK_MARKER} !important; }`,
+          });
+        }, 500);
+      } else {
+        request.continue();
+      }
+    });
+
+    await page.goto(`http://localhost:${port}/`);
+    // fixup.js builds this control, so its presence means both scripts have run.
+    await page.waitForSelector("input[name=color-scheme]");
+    await new Promise(resolve => setTimeout(resolve, 3000));
+    const bg = await page.evaluate(
+      () => getComputedStyle(document.body).backgroundColor
+    );
+    return { page, bg };
+  }
+
+  it("stays light on a light system when the dark stylesheet arrives late", async () => {
+    // Only this direction is pinned. The reported dark-system case passes on main in 5 of 5
+    // runs here, so a spec for it would never fail without the fix; reproducing that direction
+    // needs the live stylesheet and still only fails about 19 times in 20.
+    const { page, bg } = await settled("light");
+    expect(bg).toBe(LIGHT);
+
+    // A light result could also mean the stylesheet never loaded, so prove it can apply.
+    await page.evaluate(() => {
+      document.querySelector("input[name=color-scheme][value=dark]")?.click();
+    });
+    await page.waitForFunction(
+      expected => getComputedStyle(document.body).backgroundColor === expected,
+      { timeout: 5000 },
+      DARK_MARKER
+    );
+  });
+});