mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-29 15:47:57 +02:00
Code Activity

Use the light-dark CSS function in the viewer (issue 17780)

Browse source 
This removes the need for (most) separate `@media (prefers-color-scheme: dark)` blocks when defining colors values, and also provides a simple way of forcing use of either the light or dark theme.

Please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark and https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

*NOTE:* To support this in older browsers, we utilize a [PostCSS plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function).
This commit is contained in:
Jonas Jenwald 2025-04-16 11:14:02 +02:00
parent 63e6566597
commit ae1cbc6a9e
15 changed files with 366 additions and 312 deletions
Download patch file Download diff file Expand all files Collapse all files

112
test/integration/signature_editor_spec.mjs
View file

@ -471,4 +471,116 @@ describe("Signature Editor", () => {
);
});
});
describe("viewerCssTheme (light)", () => {
let pages;
beforeEach(async () => {
pages = await loadAndWait(
"empty.pdf",
".annotationEditorLayer",
null,
null,
{ viewerCssTheme: "1" }
);
});
afterEach(async () => {
await closePages(pages);
});
it("must check that the signature has the correct color with the light theme", async () => {
await Promise.all(
pages.map(async ([_, page]) => {
const colorTheme = await page.evaluate(() => {
const html = document.querySelector("html");
const style = getComputedStyle(html);
return style.getPropertyValue("color-scheme");
});
expect(colorTheme).toEqual("light");
await switchToSignature(page);
await page.click("#editorSignatureAddSignature");
await page.waitForSelector("#addSignatureDialog", {
visible: true,
});
await page.type("#addSignatureTypeInput", "Should be black.");
await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
await page.click("#addSignatureAddButton");
const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector, { visible: true });
await page.waitForSelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`,
{ visible: true }
);
const color = await page.evaluate(() => {
const use = document.querySelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`
);
return use.parentNode.getAttribute("fill");
});
expect(color).toEqual("#000000");
})
);
});
});
describe("viewerCssTheme (dark)", () => {
let pages;
beforeEach(async () => {
pages = await loadAndWait(
"empty.pdf",
".annotationEditorLayer",
null,
null,
{ viewerCssTheme: "2" }
);
});
afterEach(async () => {
await closePages(pages);
});
it("must check that the signature has the correct color with the dark theme", async () => {
await Promise.all(
pages.map(async ([_, page]) => {
const colorTheme = await page.evaluate(() => {
const html = document.querySelector("html");
const style = getComputedStyle(html);
return style.getPropertyValue("color-scheme");
});
expect(colorTheme).toEqual("dark");
await switchToSignature(page);
await page.click("#editorSignatureAddSignature");
await page.waitForSelector("#addSignatureDialog", {
visible: true,
});
await page.type("#addSignatureTypeInput", "Should be black.");
await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
await page.click("#addSignatureAddButton");
const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector, { visible: true });
await page.waitForSelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`,
{ visible: true }
);
const color = await page.evaluate(() => {
const use = document.querySelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`
);
return use.parentNode.getAttribute("fill");
});
expect(color).toEqual("#000000");
})
);
});
});
});