Yu Cong
44db9807a1
Some checks failed
Types tests / Test (lts/*) (push) Has been cancelled
Lint / Lint (lts/*) (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
CI / Test (20) (push) Has been cancelled
CI / Test (22) (push) Has been cancelled
CI / Test (24) (push) Has been cancelled
1828 lines
62 KiB
JavaScript
1828 lines
62 KiB
JavaScript
/* Copyright 2022 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import {
|
|
applyFunctionToEditor,
|
|
awaitPromise,
|
|
clearEditors,
|
|
clearInput,
|
|
closePages,
|
|
copy,
|
|
copyToClipboard,
|
|
dragAndDrop,
|
|
getAnnotationSelector,
|
|
getEditorDimensions,
|
|
getEditors,
|
|
getEditorSelector,
|
|
getFirstSerialized,
|
|
getRect,
|
|
getSerialized,
|
|
isCanvasMonochrome,
|
|
kbBigMoveDown,
|
|
kbBigMoveRight,
|
|
kbUndo,
|
|
loadAndWait,
|
|
paste,
|
|
pasteFromClipboard,
|
|
scrollIntoView,
|
|
selectEditor,
|
|
serializeBitmapDimensions,
|
|
switchToEditor,
|
|
unselectEditor,
|
|
waitForAnnotationEditorLayer,
|
|
waitForAnnotationModeChanged,
|
|
waitForEntryInStorage,
|
|
waitForPageRendered,
|
|
waitForSelectedEditor,
|
|
waitForSerialized,
|
|
waitForTimeout,
|
|
} from "./test_utils.mjs";
|
|
import fs from "fs";
|
|
import path from "path";
|
|
import { PNG } from "pngjs";
|
|
|
|
const __dirname = import.meta.dirname;
|
|
|
|
const clearAll = clearEditors.bind(null, "stamp");
|
|
|
|
const waitForImage = async (page, selector) => {
|
|
await page.waitForSelector(`${selector} canvas`);
|
|
await page.waitForFunction(
|
|
sel => {
|
|
const canvas = document.querySelector(sel);
|
|
const data = canvas
|
|
.getContext("2d")
|
|
.getImageData(0, 0, canvas.width, canvas.height);
|
|
return data.data.some(x => x !== 0);
|
|
},
|
|
{},
|
|
`${selector} canvas`
|
|
);
|
|
await page.waitForSelector(`${selector} .altText`);
|
|
};
|
|
|
|
const copyImage = async (page, imagePath, selector) => {
|
|
const data = fs
|
|
.readFileSync(path.join(__dirname, imagePath))
|
|
.toString("base64");
|
|
|
|
await copyToClipboard(page, { "image/png": `data:image/png;base64,${data}` });
|
|
await pasteFromClipboard(page);
|
|
|
|
await waitForImage(page, selector);
|
|
};
|
|
|
|
async function waitForTranslation(page) {
|
|
return page.evaluate(async () => {
|
|
await new Promise(resolve => {
|
|
window.requestAnimationFrame(resolve);
|
|
});
|
|
});
|
|
}
|
|
|
|
const switchToStamp = switchToEditor.bind(null, "Stamp");
|
|
|
|
describe("Stamp Editor", () => {
|
|
describe("Basic operations", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", null, {
|
|
eventBusSetup: eventBus => {
|
|
eventBus.on("annotationeditoruimanager", ({ uiManager }) => {
|
|
window.uiManager = uiManager;
|
|
});
|
|
},
|
|
});
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must load a PNG which is bigger than a page", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
await switchToStamp(page);
|
|
await page.click("#editorStampAddImage");
|
|
|
|
const input = await page.$("#stampEditorFileInput");
|
|
await input.uploadFile(
|
|
`${path.join(__dirname, "../images/firefox_logo.png")}`
|
|
);
|
|
const editorSelector = getEditorSelector(0);
|
|
await waitForImage(page, editorSelector);
|
|
|
|
await page.waitForFunction(
|
|
`document.getElementById("viewer-alert").textContent === "Image added"`
|
|
);
|
|
|
|
const { width } = await getEditorDimensions(page, editorSelector);
|
|
|
|
// The image is bigger than the page, so it has been scaled down to
|
|
// 75% of the page width.
|
|
expect(width).toEqual("75%");
|
|
|
|
const [bitmap] = await serializeBitmapDimensions(page);
|
|
expect(bitmap.width).toEqual(512);
|
|
expect(bitmap.height).toEqual(543);
|
|
})
|
|
);
|
|
});
|
|
|
|
it("must load a SVG", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
await switchToStamp(page);
|
|
await page.click("#editorStampAddImage");
|
|
const input = await page.$("#stampEditorFileInput");
|
|
await input.uploadFile(
|
|
`${path.join(__dirname, "../images/firefox_logo.svg")}`
|
|
);
|
|
const editorSelector = getEditorSelector(0);
|
|
await waitForImage(page, editorSelector);
|
|
|
|
const { width } = await getEditorDimensions(page, editorSelector);
|
|
|
|
expect(Math.round(parseFloat(width))).toEqual(40);
|
|
|
|
const [bitmap] = await serializeBitmapDimensions(page);
|
|
// The original size is 80x242 but to increase the resolution when it
|
|
// is rasterized we scale it up by 96 / 72
|
|
const ratio = await page.evaluate(
|
|
() => window.pdfjsLib.PixelsPerInch.PDF_TO_CSS_UNITS
|
|
);
|
|
expect(Math.abs(bitmap.width - 242 * ratio) < 1).toBeTrue();
|
|
expect(Math.abs(bitmap.height - 80 * ratio) < 1).toBeTrue();
|
|
})
|
|
);
|
|
});
|
|
|
|
it("must load a SVG, delete it and undo", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
await switchToStamp(page);
|
|
await page.click("#editorStampAddImage");
|
|
const input = await page.$("#stampEditorFileInput");
|
|
await input.uploadFile(
|
|
`${path.join(__dirname, "../images/firefox_logo.svg")}`
|
|
);
|
|
const editorSelector = getEditorSelector(0);
|
|
await waitForImage(page, editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
await waitForSerialized(page, 0);
|
|
|
|
await kbUndo(page);
|
|
await waitForImage(page, editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Resize", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 50, {
|
|
eventBusSetup: eventBus => {
|
|
eventBus.on("annotationeditoruimanager", ({ uiManager }) => {
|
|
window.uiManager = uiManager;
|
|
});
|
|
},
|
|
});
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that an added image stay within the page", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
await switchToStamp(page);
|
|
const names = ["bottomLeft", "bottomRight", "topRight", "topLeft"];
|
|
|
|
for (let i = 0; i < 4; i++) {
|
|
if (i !== 0) {
|
|
await clearAll(page);
|
|
}
|
|
|
|
await page.click("#editorStampAddImage");
|
|
const input = await page.$("#stampEditorFileInput");
|
|
await input.uploadFile(
|
|
`${path.join(__dirname, "../images/firefox_logo.png")}`
|
|
);
|
|
const editorSelector = getEditorSelector(i);
|
|
await waitForImage(page, editorSelector);
|
|
await page.waitForSelector(`${editorSelector} .altText`);
|
|
|
|
for (let j = 0; j < 4; j++) {
|
|
await page.keyboard.press("Escape");
|
|
await page.waitForSelector(`${editorSelector} .resizers.hidden`);
|
|
|
|
const handle = await waitForAnnotationEditorLayer(page);
|
|
await page.evaluate(() => {
|
|
window.PDFViewerApplication.rotatePages(90);
|
|
});
|
|
await awaitPromise(handle);
|
|
|
|
await page.focus(".stampEditor");
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
|
|
await page.waitForSelector(
|
|
`${editorSelector} .resizers:not(.hidden)`
|
|
);
|
|
|
|
const stampRect = await getRect(page, ".stampEditor");
|
|
const [name, cursor] = await page.evaluate(rect => {
|
|
const el = document.elementFromPoint(rect.x, rect.y);
|
|
const cornerName = Array.from(el.classList).find(
|
|
c => c !== "resizer"
|
|
);
|
|
return [cornerName, window.getComputedStyle(el).cursor];
|
|
}, stampRect);
|
|
|
|
expect(name).withContext(`In ${browserName}`).toEqual(names[j]);
|
|
expect(cursor)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual("nwse-resize");
|
|
}
|
|
|
|
const handle = await waitForAnnotationEditorLayer(page);
|
|
await page.evaluate(() => {
|
|
window.PDFViewerApplication.rotatePages(90);
|
|
});
|
|
await awaitPromise(handle);
|
|
}
|
|
})
|
|
);
|
|
});
|
|
|
|
it("must check that the opposite corner doesn't move", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
await switchToStamp(page);
|
|
|
|
await page.click("#editorStampAddImage");
|
|
const input = await page.$("#stampEditorFileInput");
|
|
await input.uploadFile(
|
|
`${path.join(__dirname, "../images/firefox_logo.png")}`
|
|
);
|
|
const editorSelector = getEditorSelector(0);
|
|
await waitForImage(page, editorSelector);
|
|
await page.waitForSelector(`${editorSelector} .resizer.topLeft`);
|
|
const baseRect = await getRect(page, editorSelector);
|
|
const bRX = baseRect.x + baseRect.width;
|
|
const bRY = baseRect.y + baseRect.height;
|
|
|
|
await dragAndDrop(page, `${editorSelector} .resizer.topLeft`, [
|
|
[-10, -10],
|
|
[20, 20],
|
|
[-10, -10],
|
|
[20, 20],
|
|
]);
|
|
|
|
const newRect = await getRect(page, editorSelector);
|
|
const newBRX = newRect.x + newRect.width;
|
|
const newBRY = newRect.y + newRect.height;
|
|
|
|
expect(Math.abs(bRX - newBRX) <= 1)
|
|
.withContext(`In ${browserName}`)
|
|
.toBeTrue();
|
|
expect(Math.abs(bRY - newBRY) <= 1)
|
|
.withContext(`In ${browserName}`)
|
|
.toBeTrue();
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Alt text dialog", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 50);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that the alt-text flow is correctly implemented", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [browserName, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
|
|
// Wait for the alt-text button to be visible.
|
|
const buttonSelector = `${editorSelector} button.altText`;
|
|
await page.waitForSelector(buttonSelector);
|
|
|
|
// Click on the alt-text button.
|
|
await page.click(buttonSelector);
|
|
|
|
// Wait for the alt-text dialog to be visible.
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
|
|
// Click on the alt-text editor.
|
|
const textareaSelector = "#altTextDialog textarea";
|
|
await page.click(textareaSelector);
|
|
await page.type(textareaSelector, "Hello World");
|
|
|
|
// Click on save button.
|
|
const saveButtonSelector = "#altTextDialog #altTextSave";
|
|
await page.click(saveButtonSelector);
|
|
|
|
// Check that the canvas has an aria-describedby attribute.
|
|
await page.waitForSelector(`${editorSelector}[aria-describedby]`);
|
|
|
|
// Wait for the alt-text button to have the correct icon.
|
|
await page.waitForSelector(`${buttonSelector}.done`);
|
|
|
|
// Hover the button.
|
|
await page.hover(buttonSelector);
|
|
|
|
// Wait for the tooltip to be visible.
|
|
const tooltipSelector = `${buttonSelector} .tooltip`;
|
|
await page.waitForSelector(tooltipSelector, { visible: true });
|
|
|
|
let tooltipText = await page.evaluate(
|
|
sel => document.querySelector(`${sel}`).innerText,
|
|
tooltipSelector
|
|
);
|
|
expect(tooltipText).toEqual("Hello World");
|
|
|
|
// Now we change the alt-text and check that the tooltip is updated.
|
|
const longString = "a".repeat(512);
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
await page.evaluate(sel => {
|
|
document.querySelector(`${sel}`).value = "";
|
|
}, textareaSelector);
|
|
await page.click(textareaSelector);
|
|
await page.type(textareaSelector, longString);
|
|
await page.click(saveButtonSelector);
|
|
await page.waitForSelector(`${buttonSelector}.done`);
|
|
await page.hover(buttonSelector);
|
|
await page.waitForSelector(tooltipSelector, { visible: true });
|
|
tooltipText = await page.evaluate(
|
|
sel => document.querySelector(`${sel}`).innerText,
|
|
tooltipSelector
|
|
);
|
|
expect(tooltipText).toEqual(longString);
|
|
const dims = await page.evaluate(sel => {
|
|
const { width, height } = document
|
|
.querySelector(`${sel}`)
|
|
.getBoundingClientRect();
|
|
return { width, height };
|
|
}, tooltipSelector);
|
|
expect(dims.width / dims.height).toBeLessThan(2);
|
|
|
|
// Now we just check that cancel didn't change anything.
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
await page.evaluate(sel => {
|
|
document.querySelector(`${sel}`).value = "";
|
|
}, textareaSelector);
|
|
await page.click(textareaSelector);
|
|
await page.type(textareaSelector, "Hello PDF.js");
|
|
const cancelButtonSelector = "#altTextDialog #altTextCancel";
|
|
await page.click(cancelButtonSelector);
|
|
await page.waitForSelector(`${buttonSelector}.done`);
|
|
await page.hover(buttonSelector);
|
|
await page.waitForSelector(tooltipSelector, { visible: true });
|
|
tooltipText = await page.evaluate(
|
|
sel => document.querySelector(`${sel}`).innerText,
|
|
tooltipSelector
|
|
);
|
|
// The tooltip should still be longString.
|
|
expect(tooltipText).toEqual(longString);
|
|
|
|
// Now we switch to decorative.
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
const decorativeSelector = "#altTextDialog #decorativeButton";
|
|
await page.click(decorativeSelector);
|
|
await page.click(saveButtonSelector);
|
|
await page.waitForSelector(`${buttonSelector}.done`);
|
|
await page.hover(buttonSelector);
|
|
await page.waitForSelector(tooltipSelector, { visible: true });
|
|
tooltipText = await page.evaluate(
|
|
sel => document.querySelector(`${sel}`).innerText,
|
|
tooltipSelector
|
|
);
|
|
expect(tooltipText).toEqual("Marked as decorative");
|
|
|
|
// Now we switch back to non-decorative.
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
const descriptionSelector = "#altTextDialog #descriptionButton";
|
|
await page.click(descriptionSelector);
|
|
await page.click(saveButtonSelector);
|
|
await page.waitForSelector(`${buttonSelector}.done`);
|
|
await page.hover(buttonSelector);
|
|
await page.waitForSelector(tooltipSelector, { visible: true });
|
|
tooltipText = await page.evaluate(
|
|
sel => document.querySelector(`${sel}`).innerText,
|
|
tooltipSelector
|
|
);
|
|
expect(tooltipText).toEqual(longString);
|
|
|
|
// Now we remove the alt-text and check that the tooltip is removed.
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
await page.evaluate(sel => {
|
|
document.querySelector(`${sel}`).value = "";
|
|
}, textareaSelector);
|
|
await page.click(saveButtonSelector);
|
|
await page.waitForSelector(`${buttonSelector}:not(.done)`);
|
|
await page.hover(buttonSelector);
|
|
await page.evaluate(
|
|
sel => document.querySelector(sel) === null,
|
|
tooltipSelector
|
|
);
|
|
|
|
// We check that the alt-text button works correctly with the
|
|
// keyboard.
|
|
const handle = await page.evaluateHandle(sel => {
|
|
document.getElementById("viewerContainer").focus();
|
|
return [
|
|
new Promise(resolve => {
|
|
setTimeout(() => {
|
|
const el = document.querySelector(sel);
|
|
el.addEventListener("focus", resolve, { once: true });
|
|
el.focus({ focusVisible: true });
|
|
}, 0);
|
|
}),
|
|
];
|
|
}, buttonSelector);
|
|
await awaitPromise(handle);
|
|
await (browserName === "chrome"
|
|
? page.waitForSelector(`${buttonSelector}:focus`)
|
|
: page.waitForSelector(`${buttonSelector}:focus-visible`));
|
|
await page.keyboard.press("Enter");
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
await page.keyboard.press("Escape");
|
|
await (browserName === "chrome"
|
|
? page.waitForSelector(`${buttonSelector}:focus`)
|
|
: page.waitForSelector(`${buttonSelector}:focus-visible`));
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Resize an image with the keyboard", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 50);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that the dimensions change", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [browserName, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
|
|
await selectEditor(page, editorSelector);
|
|
|
|
await page.waitForSelector(
|
|
`${editorSelector} .resizer.topLeft[tabindex="-1"]`
|
|
);
|
|
|
|
const getDims = async () => {
|
|
const [blX, blY, trX, trY] = await getFirstSerialized(
|
|
page,
|
|
x => x.rect
|
|
);
|
|
return [trX - blX, trY - blY];
|
|
};
|
|
|
|
const [width, height] = await getDims();
|
|
|
|
// Press Enter to enter in resize-with-keyboard mode.
|
|
await page.keyboard.press("Enter");
|
|
|
|
// The resizer must become keyboard focusable.
|
|
await page.waitForSelector(
|
|
`${editorSelector} .resizer.topLeft[tabindex="0"]`
|
|
);
|
|
|
|
let prevWidth = width;
|
|
let prevHeight = height;
|
|
|
|
const waitForDimsChange = async (w, h) => {
|
|
await page.waitForFunction(
|
|
(prevW, prevH) => {
|
|
const [x1, y1, x2, y2] =
|
|
window.PDFViewerApplication.pdfDocument.annotationStorage.serializable.map
|
|
.values()
|
|
.next().value.rect;
|
|
const newWidth = x2 - x1;
|
|
const newHeight = y2 - y1;
|
|
return newWidth !== prevW || newHeight !== prevH;
|
|
},
|
|
{},
|
|
w,
|
|
h
|
|
);
|
|
};
|
|
|
|
for (let i = 0; i < 40; i++) {
|
|
await page.keyboard.press("ArrowLeft");
|
|
await waitForDimsChange(prevWidth, prevHeight);
|
|
[prevWidth, prevHeight] = await getDims();
|
|
}
|
|
|
|
let [newWidth, newHeight] = await getDims();
|
|
expect(newWidth > width + 30)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual(true);
|
|
expect(newHeight > height + 30)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual(true);
|
|
|
|
for (let i = 0; i < 4; i++) {
|
|
await kbBigMoveRight(page);
|
|
await waitForDimsChange(prevWidth, prevHeight);
|
|
[prevWidth, prevHeight] = await getDims();
|
|
}
|
|
|
|
[newWidth, newHeight] = await getDims();
|
|
expect(Math.abs(newWidth - width) < 2)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual(true);
|
|
expect(Math.abs(newHeight - height) < 2)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual(true);
|
|
|
|
// Move the focus to the next resizer.
|
|
await page.keyboard.press("Tab");
|
|
await page.waitForFunction(
|
|
() => !!document.activeElement?.classList.contains("topMiddle")
|
|
);
|
|
|
|
for (let i = 0; i < 40; i++) {
|
|
await page.keyboard.press("ArrowUp");
|
|
await waitForDimsChange(prevWidth, prevHeight);
|
|
[prevWidth, prevHeight] = await getDims();
|
|
}
|
|
|
|
[, newHeight] = await getDims();
|
|
expect(newHeight > height + 50)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual(true);
|
|
|
|
for (let i = 0; i < 4; i++) {
|
|
await kbBigMoveDown(page);
|
|
await waitForDimsChange(prevWidth, prevHeight);
|
|
[prevWidth, prevHeight] = await getDims();
|
|
}
|
|
|
|
[, newHeight] = await getDims();
|
|
expect(Math.abs(newHeight - height) < 2)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual(true);
|
|
|
|
// Escape should remove the focus from the resizer.
|
|
await page.keyboard.press("Escape");
|
|
await page.waitForSelector(
|
|
`${editorSelector} .resizer.topLeft[tabindex="-1"]`
|
|
);
|
|
await page.waitForFunction(
|
|
() => !document.activeElement?.classList.contains("resizer")
|
|
);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Copy/paste from a tab to an other", () => {
|
|
let pages1, pages2;
|
|
|
|
beforeEach(async () => {
|
|
pages1 = await loadAndWait("empty.pdf", ".annotationEditorLayer");
|
|
pages2 = await loadAndWait("empty.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages1);
|
|
await closePages(pages2);
|
|
});
|
|
|
|
it("must check that the alt-text button is here when pasting in the second tab", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (let i = 0; i < pages1.length; i++) {
|
|
const [, page1] = pages1[i];
|
|
await page1.bringToFront();
|
|
await switchToStamp(page1);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page1, "../images/firefox_logo.png", editorSelector);
|
|
await copy(page1);
|
|
|
|
const [, page2] = pages2[i];
|
|
await page2.bringToFront();
|
|
await switchToStamp(page2);
|
|
|
|
await paste(page2);
|
|
|
|
await waitForImage(page2, editorSelector);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Undo a stamp", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that a stamp can be undone", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
await waitForSerialized(page, 0);
|
|
|
|
await kbUndo(page);
|
|
await waitForImage(page, editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Delete a stamp and undo it on another page", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that a stamp can be undone", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
await waitForSerialized(page, 0);
|
|
|
|
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
|
|
for (const pageNumber of twoToFourteen) {
|
|
const pageSelector = `.page[data-page-number = "${pageNumber}"]`;
|
|
await scrollIntoView(page, pageSelector);
|
|
}
|
|
|
|
await kbUndo(page);
|
|
await waitForSerialized(page, 1);
|
|
|
|
const thirteenToOne = Array.from(new Array(13).keys(), n => 13 - n);
|
|
for (const pageNumber of thirteenToOne) {
|
|
const pageSelector = `.page[data-page-number = "${pageNumber}"]`;
|
|
await scrollIntoView(page, pageSelector);
|
|
}
|
|
|
|
await page.waitForSelector(`${editorSelector} canvas`);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Delete a stamp, scroll and undo it", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that a stamp can be undone", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
await waitForSerialized(page, 0);
|
|
|
|
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
|
|
Array.from(new Array(13).keys(), n => 13 - n)
|
|
);
|
|
for (const pageNumber of twoToOne) {
|
|
const pageSelector = `.page[data-page-number = "${pageNumber}"]`;
|
|
await scrollIntoView(page, pageSelector);
|
|
}
|
|
|
|
await kbUndo(page);
|
|
await waitForImage(page, editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Resize a stamp", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that a resized stamp has its canvas at the right position", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
const serializedRect = await getFirstSerialized(page, x => x.rect);
|
|
const rect = await getRect(page, ".resizer.bottomRight");
|
|
const centerX = rect.x + rect.width / 2;
|
|
const centerY = rect.y + rect.height / 2;
|
|
|
|
await page.mouse.move(centerX, centerY);
|
|
await page.mouse.down();
|
|
await page.mouse.move(centerX - 500, centerY - 500);
|
|
await page.mouse.up();
|
|
|
|
await waitForEntryInStorage(
|
|
page,
|
|
"rect",
|
|
serializedRect,
|
|
(x, y) => x !== y
|
|
);
|
|
|
|
const canvasRect = await getRect(page, `${editorSelector} canvas`);
|
|
const stampRect = await getRect(page, editorSelector);
|
|
|
|
expect(
|
|
["x", "y", "width", "height"].every(
|
|
key => Math.abs(canvasRect[key] - stampRect[key]) <= 10
|
|
)
|
|
).toBeTrue();
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Add a stamp in odd spread mode", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait(
|
|
"empty.pdf",
|
|
".annotationEditorLayer",
|
|
null,
|
|
null,
|
|
{
|
|
spreadModeOnLoad: 1,
|
|
}
|
|
);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that the stamp has its canvas at the right position", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
const canvasRect = await getRect(page, `${editorSelector} canvas`);
|
|
const stampRect = await getRect(page, editorSelector);
|
|
|
|
expect(
|
|
["x", "y", "width", "height"].every(
|
|
key => Math.abs(canvasRect[key] - stampRect[key]) <= 10
|
|
)
|
|
).toBeTrue();
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Copy and paste a stamp with an alt text", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that the pasted image has an alt text", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [browserName, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
await applyFunctionToEditor(page, "pdfjs_internal_editor_0", editor => {
|
|
editor.altTextData = {
|
|
altText: "Hello World",
|
|
decorative: false,
|
|
};
|
|
});
|
|
await page.waitForSelector(`${editorSelector} .altText.done`);
|
|
|
|
await copy(page);
|
|
await paste(page);
|
|
await page.waitForSelector(`${getEditorSelector(1)} .altText.done`);
|
|
await waitForSerialized(page, 2);
|
|
|
|
const serialized = await getSerialized(
|
|
page,
|
|
x => x.accessibilityData?.alt
|
|
);
|
|
|
|
expect(serialized)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual(["Hello World", "Hello World"]);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("New alt-text flow", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait(
|
|
"empty.pdf",
|
|
".annotationEditorLayer",
|
|
null,
|
|
{
|
|
eventBusSetup: eventBus => {
|
|
eventBus.on("annotationeditoruimanager", ({ uiManager }) => {
|
|
window.uiManager = uiManager;
|
|
});
|
|
eventBus.on("reporttelemetry", ({ details }) => {
|
|
(window.telemetry ||= []).push(structuredClone(details));
|
|
});
|
|
},
|
|
},
|
|
{
|
|
enableAltText: true,
|
|
enableUpdatedAddImage: true,
|
|
enableGuessAltText: true,
|
|
}
|
|
);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check the new alt text flow (part 1)", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [browserName, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
// Add an image.
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
// Wait for the dialog to be visible.
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
// Wait for the spinner to be visible.
|
|
await page.waitForSelector("#newAltTextDescriptionContainer.loading");
|
|
// Check we've the disclaimer.
|
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: true });
|
|
|
|
// Check that the dialog has the correct title: "Edit..."
|
|
await page.waitForFunction(
|
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
|
);
|
|
|
|
// Check that AI guessed the correct alt text.
|
|
await page.waitForFunction(
|
|
`document.getElementById("newAltTextDescriptionTextarea").value ===
|
|
"Fake alt text."`
|
|
);
|
|
|
|
// Check that the dialog has the correct title: "Edit..."
|
|
await page.waitForFunction(
|
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
|
);
|
|
|
|
// Check we've the disclaimer.
|
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: true });
|
|
|
|
// Clear the input and check that the title changes to "Add..."
|
|
await clearInput(
|
|
page,
|
|
"#newAltTextDescriptionTextarea",
|
|
/* waitForInputEvent = */ true
|
|
);
|
|
await page.waitForFunction(
|
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Add')"
|
|
);
|
|
|
|
// Check we haven't the disclaimer.
|
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: false });
|
|
|
|
// Add a new alt text and check that the title changes to "Edit..."
|
|
await page.type("#newAltTextDescriptionTextarea", "Hello World");
|
|
await page.waitForFunction(
|
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
|
);
|
|
|
|
// Check we haven't the disclaimer after the modification.
|
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: false });
|
|
|
|
// Click on the Not Now button.
|
|
await page.click("#newAltTextNotNow");
|
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
|
|
// Wait for the alt-text button to be visible.
|
|
const buttonSelector = `${editorSelector} button.altText.new`;
|
|
await page.waitForSelector(buttonSelector, { visible: true });
|
|
|
|
await waitForTranslation(page);
|
|
// Check the text in the button.
|
|
let text = await page.evaluate(
|
|
sel => document.querySelector(sel).textContent,
|
|
buttonSelector
|
|
);
|
|
let ariaLabel = await page.evaluate(
|
|
sel => document.querySelector(sel).getAttribute("aria-label"),
|
|
buttonSelector
|
|
);
|
|
expect(text === ariaLabel && text)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual("Review alt text");
|
|
|
|
// Unselect and select the editor and check that the badge is visible.
|
|
await unselectEditor(page, editorSelector);
|
|
await page.waitForSelector(".editToolbar", { visible: false });
|
|
await page.waitForSelector(".noAltTextBadge", { visible: true });
|
|
|
|
await page.evaluate(() => {
|
|
window.uiManager.selectAll();
|
|
});
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
await page.waitForSelector(".editToolbar", { visible: true });
|
|
await page.waitForSelector(".noAltTextBadge", { visible: false });
|
|
|
|
// Click on the Review button.
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
|
|
// Check that the dialog has the correct title: "Edit..."
|
|
await page.waitForFunction(
|
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
|
);
|
|
|
|
// Click on create automatically toggle button.
|
|
await page.click("#newAltTextCreateAutomaticallyButton");
|
|
await clearInput(
|
|
page,
|
|
"#newAltTextDescriptionTextarea",
|
|
/* waitForInputEvent = */ true
|
|
);
|
|
|
|
// Save the empty text.
|
|
await page.click("#newAltTextSave");
|
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
await page.waitForSelector(buttonSelector, { visible: true });
|
|
|
|
await waitForTranslation(page);
|
|
// Check the text in the button.
|
|
text = await page.evaluate(
|
|
sel => document.querySelector(sel).textContent,
|
|
buttonSelector
|
|
);
|
|
ariaLabel = await page.evaluate(
|
|
sel => document.querySelector(sel).getAttribute("aria-label"),
|
|
buttonSelector
|
|
);
|
|
expect(text === ariaLabel && text)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual("Missing alt text");
|
|
|
|
// Unselect and select the editor and check that the badge is visible.
|
|
await unselectEditor(page, editorSelector);
|
|
await page.waitForSelector(".editToolbar", { visible: false });
|
|
await page.waitForSelector(".noAltTextBadge", { visible: true });
|
|
await page.evaluate(() => {
|
|
window.uiManager.selectAll();
|
|
});
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
await page.waitForSelector(".editToolbar", { visible: true });
|
|
await page.waitForSelector(".noAltTextBadge", { visible: false });
|
|
|
|
// Click on the Review button.
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
|
|
await page.waitForFunction(
|
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Add')"
|
|
);
|
|
// Add a new alt text and check that the title changes to "Edit..."
|
|
await page.type("#newAltTextDescriptionTextarea", "Hello World");
|
|
await page.waitForFunction(
|
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
|
);
|
|
|
|
// Click on the Save button.
|
|
await page.click("#newAltTextSave");
|
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
|
|
|
await waitForTranslation(page);
|
|
// Check the text in the button.
|
|
text = await page.evaluate(
|
|
sel => document.querySelector(sel).firstChild.textContent,
|
|
buttonSelector
|
|
);
|
|
ariaLabel = await page.evaluate(
|
|
sel => document.querySelector(sel).getAttribute("aria-label"),
|
|
buttonSelector
|
|
);
|
|
expect(text === ariaLabel && text)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual("Alt text added");
|
|
|
|
await page.hover(buttonSelector);
|
|
|
|
// Wait for the tooltip to be visible.
|
|
const tooltipSelector = `${buttonSelector} .tooltip`;
|
|
await page.waitForSelector(tooltipSelector, { visible: true });
|
|
|
|
const tooltipText = await page.evaluate(
|
|
sel => document.querySelector(`${sel}`).textContent,
|
|
tooltipSelector
|
|
);
|
|
expect(tooltipText).toEqual("Hello World");
|
|
|
|
// Click on the Review button.
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
await page.click("#newAltTextCreateAutomaticallyButton");
|
|
await page.click("#newAltTextCancel");
|
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
|
}
|
|
});
|
|
|
|
it("must check the new alt text flow (part 2)", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
// Add an image.
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
// Wait for the dialog to be visible.
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
|
|
// Wait for the spinner to be visible.
|
|
await page.waitForSelector("#newAltTextDescriptionContainer.loading");
|
|
|
|
// Check we've the disclaimer.
|
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: true });
|
|
|
|
// Click in the textarea in order to stop the guessing.
|
|
await page.click("#newAltTextDescriptionTextarea");
|
|
await page.waitForFunction(() =>
|
|
document
|
|
.getElementById("newAltTextTitle")
|
|
.textContent.startsWith("Add ")
|
|
);
|
|
|
|
// Check we haven't the disclaimer.
|
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: false });
|
|
|
|
// Click on the Not Now button.
|
|
await page.click("#newAltTextNotNow");
|
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
|
}
|
|
});
|
|
|
|
it("must check the new alt text flow (part 3)", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await page.evaluate(() => {
|
|
window.PDFViewerApplication.mlManager.enableAltTextModelDownload = false;
|
|
});
|
|
|
|
await switchToStamp(page);
|
|
|
|
// Add an image.
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
// Wait for the dialog to be visible.
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
|
|
// Check we haven't the disclaimer.
|
|
await page.waitForSelector("#newAltTextDisclaimer[hidden]");
|
|
}
|
|
});
|
|
|
|
it("must check that the data in telemetry are correct", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [browserName, page] of pages) {
|
|
await page.evaluate(() => {
|
|
window.PDFViewerApplication.mlManager.enableAltTextModelDownload = true;
|
|
});
|
|
await switchToStamp(page);
|
|
|
|
// Add an image.
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
// Wait for the dialog to be visible.
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
|
|
// Check that AI guessed the correct alt text.
|
|
await page.waitForFunction(
|
|
`document.getElementById("newAltTextDescriptionTextarea").value ===
|
|
"Fake alt text."`
|
|
);
|
|
// Clear the input and check that the title changes to "Add..."
|
|
await clearInput(
|
|
page,
|
|
"#newAltTextDescriptionTextarea",
|
|
/* waitForInputEvent = */ true
|
|
);
|
|
// Save the empty text.
|
|
await page.click("#newAltTextSave");
|
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
|
|
|
// Get the telemetry data and clean.
|
|
let telemetry = await page.evaluate(() => {
|
|
const tel = window.telemetry;
|
|
window.telemetry = [];
|
|
return tel;
|
|
});
|
|
let saveTelemetry = telemetry.find(
|
|
details => details.data.action === "pdfjs.image.alt_text.user_edit"
|
|
);
|
|
expect(saveTelemetry.data.data)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual({
|
|
total_words: 3,
|
|
words_removed: 3,
|
|
words_added: 0,
|
|
});
|
|
|
|
// Click on the Review button.
|
|
const buttonSelector = `${editorSelector} button.altText.new`;
|
|
await page.waitForSelector(buttonSelector, { visible: true });
|
|
await page.click(buttonSelector);
|
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
|
|
|
// Add a new alt text and check that the title changes to "Edit..."
|
|
await page.type("#newAltTextDescriptionTextarea", "Fake text alt foo.");
|
|
|
|
// Save the empty text.
|
|
await page.click("#newAltTextSave");
|
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
|
|
|
telemetry = await page.evaluate(() => window.telemetry);
|
|
saveTelemetry = telemetry.find(
|
|
details => details.data.action === "pdfjs.image.alt_text.user_edit"
|
|
);
|
|
expect(saveTelemetry.data.data)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual({
|
|
total_words: 3,
|
|
words_removed: 0,
|
|
words_added: 1,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("New alt-text flow (bug 1920515)", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait(
|
|
"empty.pdf",
|
|
".annotationEditorLayer",
|
|
null,
|
|
{
|
|
eventBusSetup: eventBus => {
|
|
eventBus.on("annotationeditoruimanager", ({ uiManager }) => {
|
|
window.uiManager = uiManager;
|
|
});
|
|
},
|
|
},
|
|
{
|
|
enableAltText: false,
|
|
enableFakeMLManager: false,
|
|
enableUpdatedAddImage: true,
|
|
enableGuessAltText: true,
|
|
}
|
|
);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that the toggle button isn't displayed when there is no AI", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
// Add an image.
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
// Wait for the dialog to be visible.
|
|
await page.waitForSelector("#newAltTextDialog.noAi", { visible: true });
|
|
|
|
// enableFakeMLManager is false, so it means that we don't have ML but
|
|
// we're using the new flow, hence we don't want to have the toggle
|
|
// button.
|
|
await page.waitForSelector("#newAltTextCreateAutomatically", {
|
|
hidden: true,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("No auto-resize", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 67);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that a stamp editor isn't resizing itself", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
const editorSelector = getEditorSelector(0);
|
|
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
}
|
|
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
const getDims = () =>
|
|
page.evaluate(sel => {
|
|
const bbox = document.querySelector(sel).getBoundingClientRect();
|
|
return `${bbox.width}::${bbox.height}`;
|
|
}, editorSelector);
|
|
const initialDims = await getDims();
|
|
for (let i = 0; i < 50; i++) {
|
|
// We want to make sure that the editor doesn't resize itself, so we
|
|
// check every 10ms that the dimensions are the same.
|
|
|
|
// eslint-disable-next-line no-restricted-syntax
|
|
await waitForTimeout(10);
|
|
|
|
const dims = await getDims();
|
|
expect(dims).withContext(`In ${browserName}`).toEqual(initialDims);
|
|
}
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("A stamp mustn't be on top of the secondary toolbar", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 600);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that a stamp editor isn't on top of the secondary toolbar", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/red.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
}
|
|
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
await page.click("#secondaryToolbarToggleButton");
|
|
await page.waitForSelector("#secondaryToolbar", { visible: true });
|
|
const secondary = await page.$("#secondaryToolbar");
|
|
const png = await secondary.screenshot({ type: "png" });
|
|
const secondaryImage = PNG.sync.read(Buffer.from(png));
|
|
const buffer = new Uint32Array(secondaryImage.data.buffer);
|
|
expect(buffer.every(x => x === 0xff0000ff))
|
|
.withContext(`In ${browserName}`)
|
|
.toBeFalse();
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Stamp (move existing)", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("stamps.pdf", getAnnotationSelector("25R"));
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must move an annotation", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
const modeChangedHandle = await waitForAnnotationModeChanged(page);
|
|
await page.click(getAnnotationSelector("25R"), { count: 2 });
|
|
await awaitPromise(modeChangedHandle);
|
|
const editorSelector = getEditorSelector(0);
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
|
|
const editorIds = await getEditors(page, "stamp");
|
|
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(5);
|
|
|
|
// All the current annotations should be serialized as null objects
|
|
// because they haven't been edited yet.
|
|
const serialized = await getSerialized(page);
|
|
expect(serialized).withContext(`In ${browserName}`).toEqual([]);
|
|
|
|
// Select the annotation we want to move.
|
|
await selectEditor(page, editorSelector);
|
|
|
|
await dragAndDrop(page, editorSelector, [[100, 100]]);
|
|
await waitForSerialized(page, 1);
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Stamp (change alt-text)", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("stamps.pdf", getAnnotationSelector("58R"));
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must update an existing alt-text", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
const modeChangedHandle = await waitForAnnotationModeChanged(page);
|
|
await page.click(getAnnotationSelector("58R"), { count: 2 });
|
|
await awaitPromise(modeChangedHandle);
|
|
const editorSelector = getEditorSelector(4);
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
|
|
const editorIds = await getEditors(page, "stamp");
|
|
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(5);
|
|
|
|
await page.click(`${editorSelector} button.altText`);
|
|
await page.waitForSelector("#altTextDialog", { visible: true });
|
|
|
|
const textareaSelector = "#altTextDialog textarea";
|
|
await page.waitForFunction(
|
|
sel => document.querySelector(sel).value !== "",
|
|
{},
|
|
textareaSelector
|
|
);
|
|
|
|
const altText = await page.evaluate(
|
|
sel => document.querySelector(sel).value,
|
|
textareaSelector
|
|
);
|
|
expect(altText).toEqual("An elephant");
|
|
|
|
await page.evaluate(sel => {
|
|
document.querySelector(sel).value = "";
|
|
}, textareaSelector);
|
|
|
|
await page.click(textareaSelector);
|
|
await page.type(textareaSelector, "Hello World");
|
|
|
|
// All the current annotations should be serialized as null objects
|
|
// because they haven't been edited yet.
|
|
const serialized = await getSerialized(page);
|
|
expect(serialized).withContext(`In ${browserName}`).toEqual([]);
|
|
|
|
const saveButtonSelector = "#altTextDialog #altTextSave";
|
|
await page.click(saveButtonSelector);
|
|
|
|
await waitForSerialized(page, 1);
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Stamp (delete existing and undo)", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("stamps.pdf", getAnnotationSelector("37R"));
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that the annotation is correctly restored", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([browserName, page]) => {
|
|
const modeChangedHandle = await waitForAnnotationModeChanged(page);
|
|
await page.click(getAnnotationSelector("37R"), { count: 2 });
|
|
await awaitPromise(modeChangedHandle);
|
|
const editorSelector = getEditorSelector(2);
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
|
|
const editorIds = await getEditors(page, "stamp");
|
|
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(5);
|
|
|
|
// All the current annotations should be serialized as null objects
|
|
// because they haven't been edited yet.
|
|
let serialized = await getSerialized(page);
|
|
expect(serialized).withContext(`In ${browserName}`).toEqual([]);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
|
|
await waitForSerialized(page, 1);
|
|
serialized = await getSerialized(page);
|
|
expect(serialized)
|
|
.withContext(`In ${browserName}`)
|
|
.toEqual([
|
|
{ id: "37R", deleted: true, pageIndex: 0, popupRef: "44R" },
|
|
]);
|
|
|
|
await kbUndo(page);
|
|
await waitForSerialized(page, 0);
|
|
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Drag a stamp annotation and click on a touchscreen", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that the annotation isn't unselected when an other finger taps on the screen", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
const stampRect = await getRect(page, editorSelector);
|
|
|
|
await page.touchscreen.tap(stampRect.x + 10, stampRect.y + 10);
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
|
|
await page.touchscreen.touchStart(stampRect.x + 10, stampRect.y + 10);
|
|
await page.touchscreen.touchMove(stampRect.x + 20, stampRect.y + 20);
|
|
await page.touchscreen.tap(stampRect.x - 10, stampRect.y - 10);
|
|
await page.touchscreen.touchEnd();
|
|
|
|
await waitForSelectedEditor(page, editorSelector);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Undo deletion popup has the expected behaviour", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check that deleting an image can be undone using the undo button", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
await waitForSerialized(page, 0);
|
|
await page.waitForSelector("#editorUndoBar", { visible: true });
|
|
|
|
await page.waitForSelector("#editorUndoBarUndoButton", {
|
|
visible: true,
|
|
});
|
|
await page.click("#editorUndoBarUndoButton");
|
|
await waitForSerialized(page, 1);
|
|
await page.waitForSelector(editorSelector);
|
|
await page.waitForSelector(`${editorSelector} canvas`);
|
|
}
|
|
});
|
|
|
|
it("must check that the undo deletion popup displays the correct message", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
await waitForSerialized(page, 0);
|
|
|
|
await page.waitForFunction(() => {
|
|
const messageElement = document.querySelector(
|
|
"#editorUndoBarMessage"
|
|
);
|
|
return messageElement && messageElement.textContent.trim() !== "";
|
|
});
|
|
const message = await page.waitForSelector("#editorUndoBarMessage");
|
|
const messageText = await page.evaluate(el => el.textContent, message);
|
|
expect(messageText).toContain("Image removed");
|
|
}
|
|
});
|
|
|
|
it("must check that the popup disappears when a new image is inserted", async () => {
|
|
// Run sequentially to avoid clipboard issues.
|
|
for (const [, page] of pages) {
|
|
await switchToStamp(page);
|
|
|
|
const editorSelector = getEditorSelector(0);
|
|
await copyImage(page, "../images/firefox_logo.png", editorSelector);
|
|
await page.waitForSelector(editorSelector);
|
|
await waitForSerialized(page, 1);
|
|
|
|
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
|
await page.click(`${editorSelector} button.deleteButton`);
|
|
await waitForSerialized(page, 0);
|
|
|
|
await page.waitForSelector("#editorUndoBar", { visible: true });
|
|
await page.click("#editorStampAddImage");
|
|
const newInput = await page.$("#stampEditorFileInput");
|
|
await newInput.uploadFile(
|
|
`${path.join(__dirname, "../images/firefox_logo.png")}`
|
|
);
|
|
await waitForImage(page, getEditorSelector(1));
|
|
await waitForSerialized(page, 1);
|
|
await page.waitForSelector("#editorUndoBar", { hidden: true });
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("Switch to edit mode a pdf with an existing stamp annotation on an invisible and rendered page", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("issue19239.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must move on the second page", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([, page]) => {
|
|
const pageOneSelector = `.page[data-page-number = "1"]`;
|
|
const pageTwoSelector = `.page[data-page-number = "2"]`;
|
|
await scrollIntoView(page, pageTwoSelector);
|
|
await page.waitForSelector(pageOneSelector, { visible: false });
|
|
|
|
await switchToStamp(page);
|
|
await scrollIntoView(page, pageOneSelector);
|
|
await page.waitForSelector(
|
|
`${pageOneSelector} .annotationEditorLayer canvas`,
|
|
{ visible: true }
|
|
);
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Switch to edit mode a pdf with an existing stamp annotation on an invisible and unrendered page", () => {
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("issue19239.pdf", ".annotationEditorLayer");
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must move on the last page", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([, page]) => {
|
|
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
|
|
for (const pageNumber of twoToFourteen) {
|
|
const pageSelector = `.page[data-page-number = "${pageNumber}"]`;
|
|
await scrollIntoView(page, pageSelector);
|
|
}
|
|
|
|
await switchToStamp(page);
|
|
|
|
const thirteenToOne = Array.from(new Array(13).keys(), n => 13 - n);
|
|
for (const pageNumber of thirteenToOne) {
|
|
const pageSelector = `.page[data-page-number = "${pageNumber}"]`;
|
|
await scrollIntoView(page, pageSelector);
|
|
}
|
|
|
|
await page.waitForSelector(
|
|
`.page[data-page-number = "1"] .annotationEditorLayer canvas`,
|
|
{ visible: true }
|
|
);
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Switch to edit mode by double clicking on an existing stamp annotation", () => {
|
|
const annotationSelector = getAnnotationSelector("999R");
|
|
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("issue19239.pdf", annotationSelector);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must switch to edit mode", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([, page]) => {
|
|
await page.waitForSelector(annotationSelector);
|
|
await scrollIntoView(page, annotationSelector);
|
|
|
|
await page.click(annotationSelector, { count: 2 });
|
|
|
|
await page.waitForFunction(() =>
|
|
document
|
|
.querySelector(".annotationEditorLayer")
|
|
.classList.contains("stampEditing")
|
|
);
|
|
})
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Switch to edit mode, zoom and check that the non-editable stamp is still there", () => {
|
|
const annotationSelector = getAnnotationSelector("14R");
|
|
|
|
let pages;
|
|
|
|
beforeEach(async () => {
|
|
pages = await loadAndWait("red_stamp.pdf", annotationSelector, 20);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
await closePages(pages);
|
|
});
|
|
|
|
it("must check if the canvas is still red", async () => {
|
|
await Promise.all(
|
|
pages.map(async ([, page]) => {
|
|
expect(
|
|
await isCanvasMonochrome(page, 1, null, 0xff0000ff)
|
|
).toBeTrue();
|
|
|
|
await switchToStamp(page);
|
|
|
|
expect(
|
|
await isCanvasMonochrome(page, 1, null, 0xff0000ff)
|
|
).toBeTrue();
|
|
|
|
const rectPage = await getRect(
|
|
page,
|
|
`.page[data-page-number = "1"] .annotationEditorLayer`
|
|
);
|
|
|
|
const handle = await waitForPageRendered(page, 1);
|
|
const originX = rectPage.x + rectPage.width / 2;
|
|
const originY = rectPage.y + rectPage.height / 2;
|
|
await page.evaluate(
|
|
origin => {
|
|
window.PDFViewerApplication.pdfViewer.increaseScale({
|
|
scaleFactor: 2,
|
|
origin,
|
|
});
|
|
},
|
|
[originX, originY]
|
|
);
|
|
await awaitPromise(handle);
|
|
|
|
expect(
|
|
await isCanvasMonochrome(page, 1, null, 0xff0000ff)
|
|
).toBeTrue();
|
|
})
|
|
);
|
|
});
|
|
});
|
|
});
|