fix!(w3c/style): override color-scheme with meta tag (speced#4700)

w3c · Apr 28, 2024 · 33bbcff · 33bbcff
1 parent fca26bd
commit 33bbcff
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 26 deletions.
diff --git a/src/w3c/style.js b/src/w3c/style.js
@@ -114,18 +114,16 @@ export function run(conf) {
   // Make sure the W3C stylesheet is the last stylesheet, as required by W3C Pub Rules.
   sub("beforesave", styleMover(finalStyleURL));
 
-  if (conf.darkMode) {
+  // Add color scheme meta tag and style
+  /** @type HTMLMetaElement */
+  let colorScheme = document.querySelector("head meta[name=color-scheme]");
+  if (!colorScheme) {
+    // Default to light mode during transitional period.
+    colorScheme = html`<meta name="color-scheme" content="light" />`;
+    document.head.appendChild(colorScheme);
+  }
+  if (colorScheme.content.includes("dark")) {
     const darkModeStyleUrl = getStyleUrl("dark.css");
-    document.head.appendChild(
-      html`<style>
-        :root {
-          color-scheme: light dark;
-        }
-      </style>`
-    );
-    document.head.appendChild(
-      html`<meta name="color-scheme" content="light dark" />`
-    );
     document.head.appendChild(
       html`<link
         rel="stylesheet"

diff --git a/tests/spec/core/color-scheme.html b/tests/spec/core/color-scheme.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'/>
+<meta name="color-scheme" content="dark light">
+<title>Simple Spec</title>
+<script class='remove'>
+var respecConfig = {
+  specStatus: "base",
+  shortName: "basics",
+};
+</script>
+<section id='abstract'>
+  <p>Basic doc</p>
+</section>
+<section id='sotd'>
+  <p>
+    Color scheme tester
+  </p>
+</section>
diff --git a/tests/spec/w3c/style-spec.js b/tests/spec/w3c/style-spec.js
@@ -202,28 +202,40 @@ describe("W3C - Style", () => {
     const url = "https://www.w3.org/StyleSheets/TR/2021/base";
     const elem = doc.querySelector(`link[href^='${url}'][rel="stylesheet"]`);
     expect(elem).toBeTruthy();
-    expect(elem.nextElementSibling).toBeFalsy();
+    expect(elem.nextElementSibling).toBe(null);
+  });
 
-    const colorSchemaMeta = doc.querySelector("meta[name='color-scheme']");
-    expect(colorSchemaMeta).toBeFalsy();
+  it("respects existing color scheme", async () => {
+    const ops = makeStandardOps();
+    const doc = await makeRSDoc(ops, "spec/core/color-scheme.html");
+    const elem = doc.querySelector("meta[name='color-scheme']");
+    expect(elem).toBeTruthy();
+    expect(elem.content).toBe("dark light");
   });
 
-  it("should add dark mode stylesheet", async () => {
-    const ops = makeStandardOps({ darkMode: true });
+  it("sets the document to light color scheme by default", async () => {
+    const ops = makeStandardOps();
     const doc = await makeRSDoc(ops);
-    const url = "https://www.w3.org/StyleSheets/TR/2021/dark.css";
-    const elem = doc.querySelector(`link[href^='${url}'][rel="stylesheet"]`);
+    const elem = doc.querySelector("meta[name='color-scheme']");
     expect(elem).toBeTruthy();
-    expect(elem.href).toBe(url);
-    expect(elem.getAttribute("media")).toBe("(prefers-color-scheme: dark)");
-    const colorSchemaMeta = doc.querySelector("meta[name='color-scheme']");
-    expect(colorSchemaMeta).toBeTruthy();
-    expect(colorSchemaMeta.content).toBe("light dark");
+    expect(elem.content).toBe("light");
   });
 
-  it("should add W3C darkmode stylesheet at the end", async () => {
-    const ops = makeStandardOps({ darkMode: true });
-    const doc = await getExportedDoc(await makeRSDoc(ops));
+  it("adds dark mode stylesheet", async () => {
+    const ops = makeStandardOps();
+    const doc = await makeRSDoc(ops, "spec/core/color-scheme.html");
+    /** @type HTMLLinkElement? */
+    const link = doc.querySelector(
+      `link[href="https://www.w3.org/StyleSheets/TR/2021/dark.css"]`
+    );
+    expect(link).toBeTruthy();
+  });
+
+  it("adds darkmode stylesheet at the end", async () => {
+    const ops = makeStandardOps();
+    const doc = await getExportedDoc(
+      await makeRSDoc(ops, "spec/core/color-scheme.html")
+    );
     const linkBase = doc.querySelector(
       `link[href^='https://www.w3.org/StyleSheets/TR/2021/base'][rel="stylesheet"]`
     );