From 33bbcffe67e070bd8a4fbed44e15c93684e63c55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcos=20C=C3=A1ceres?= Date: Mon, 29 Apr 2024 01:10:33 +1000 Subject: [PATCH] fix!(w3c/style): override color-scheme with meta tag (#4700) --- src/w3c/style.js | 20 +++++++-------- tests/spec/core/color-scheme.html | 19 ++++++++++++++ tests/spec/w3c/style-spec.js | 42 ++++++++++++++++++++----------- 3 files changed, 55 insertions(+), 26 deletions(-) create mode 100644 tests/spec/core/color-scheme.html diff --git a/src/w3c/style.js b/src/w3c/style.js index d233021779..b200965a8b 100644 --- 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``; + document.head.appendChild(colorScheme); + } + if (colorScheme.content.includes("dark")) { const darkModeStyleUrl = getStyleUrl("dark.css"); - document.head.appendChild( - html`` - ); - document.head.appendChild( - html`` - ); document.head.appendChild( html` + + + +Simple Spec + +
+

Basic doc

+
+
+

+ Color scheme tester +

+
diff --git a/tests/spec/w3c/style-spec.js b/tests/spec/w3c/style-spec.js index 7379d0d90b..bb54c62103 100644 --- 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"]` );