mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-07 17:05:38 +02:00
Merge pull request #18154 from timvandermeij/integration-test-rect
Introduce a `getRect` utility function for the integration tests
This commit is contained in:
commit
08bf96865d
6 changed files with 136 additions and 467 deletions
|
@ -13,7 +13,7 @@
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { closePages, loadAndWait } from "./test_utils.mjs";
|
import { closePages, getRect, loadAndWait } from "./test_utils.mjs";
|
||||||
|
|
||||||
const waitForSelectionChange = (page, selection) =>
|
const waitForSelectionChange = (page, selection) =>
|
||||||
page.waitForFunction(
|
page.waitForFunction(
|
||||||
|
@ -38,13 +38,10 @@ describe("Caret browsing", () => {
|
||||||
it("must move the caret down and check the selection", async () => {
|
it("must move the caret down and check the selection", async () => {
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
const spanRect = await page.evaluate(() => {
|
const spanRect = await getRect(
|
||||||
const span = document.querySelector(
|
page,
|
||||||
`.page[data-page-number="1"] > .textLayer > span`
|
`.page[data-page-number="1"] > .textLayer > span`
|
||||||
);
|
);
|
||||||
const { x, y, width, height } = span.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
spanRect.x + 1,
|
spanRect.x + 1,
|
||||||
spanRect.y + spanRect.height / 2,
|
spanRect.y + spanRect.height / 2,
|
||||||
|
|
|
@ -22,6 +22,7 @@ import {
|
||||||
getEditors,
|
getEditors,
|
||||||
getEditorSelector,
|
getEditorSelector,
|
||||||
getFirstSerialized,
|
getFirstSerialized,
|
||||||
|
getRect,
|
||||||
getSelectedEditors,
|
getSelectedEditors,
|
||||||
getSerialized,
|
getSerialized,
|
||||||
hover,
|
hover,
|
||||||
|
@ -81,11 +82,11 @@ const switchToFreeText = async page => {
|
||||||
await page.waitForSelector(".annotationEditorLayer.freetextEditing");
|
await page.waitForSelector(".annotationEditorLayer.freetextEditing");
|
||||||
};
|
};
|
||||||
|
|
||||||
const getXY = (page, selector) =>
|
const getXY = async (page, selector) => {
|
||||||
page.evaluate(sel => {
|
const rect = await getRect(page, selector);
|
||||||
const bbox = document.querySelector(sel).getBoundingClientRect();
|
return `${rect.x}::${rect.y}`;
|
||||||
return `${bbox.x}::${bbox.y}`;
|
};
|
||||||
}, selector);
|
|
||||||
const waitForPositionChange = (page, selector, xy) =>
|
const waitForPositionChange = (page, selector, xy) =>
|
||||||
page.waitForFunction(
|
page.waitForFunction(
|
||||||
(sel, currentXY) => {
|
(sel, currentXY) => {
|
||||||
|
@ -128,12 +129,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -142,15 +138,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${getEditorSelector(0)} .internal`, data);
|
await page.type(`${getEditorSelector(0)} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(0), el => {
|
const editorRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -192,10 +180,7 @@ describe("FreeText Editor", () => {
|
||||||
it("must copy/paste", async () => {
|
it("must copy/paste", async () => {
|
||||||
// Run sequentially to avoid clipboard issues.
|
// Run sequentially to avoid clipboard issues.
|
||||||
for (const [browserName, page] of pages) {
|
for (const [browserName, page] of pages) {
|
||||||
const editorRect = await page.$eval(getEditorSelector(0), el => {
|
const editorRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Select the editor created previously.
|
// Select the editor created previously.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -255,10 +240,7 @@ describe("FreeText Editor", () => {
|
||||||
it("must check that a paste has been undone", async () => {
|
it("must check that a paste has been undone", async () => {
|
||||||
// Run sequentially to avoid clipboard issues.
|
// Run sequentially to avoid clipboard issues.
|
||||||
for (const [, page] of pages) {
|
for (const [, page] of pages) {
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -267,10 +249,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${getEditorSelector(3)} .internal`, data);
|
await page.type(`${getEditorSelector(3)} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(3), el => {
|
const editorRect = await getRect(page, getEditorSelector(3));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -331,12 +310,9 @@ describe("FreeText Editor", () => {
|
||||||
|
|
||||||
await scrollIntoView(page, `span[pdfjs="true"]`);
|
await scrollIntoView(page, `span[pdfjs="true"]`);
|
||||||
|
|
||||||
const [stacksRect, oldAriaOwns] = await page.$eval(
|
const stacksRect = await getRect(page, `span[pdfjs="true"]`);
|
||||||
`span[pdfjs="true"]`,
|
const oldAriaOwns = await page.$eval(`span[pdfjs="true"]`, el =>
|
||||||
el => {
|
el.getAttribute("aria-owns")
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return [{ x, y, width, height }, el.getAttribute("aria-owns")];
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(oldAriaOwns).withContext(`In ${browserName}`).toEqual(null);
|
expect(oldAriaOwns).withContext(`In ${browserName}`).toEqual(null);
|
||||||
|
@ -373,10 +349,7 @@ describe("FreeText Editor", () => {
|
||||||
it("must check that right click doesn't select", async () => {
|
it("must check that right click doesn't select", async () => {
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
await clearAll(page);
|
await clearAll(page);
|
||||||
|
|
||||||
|
@ -387,10 +360,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${getEditorSelector(8)} .internal`, data);
|
await page.type(`${getEditorSelector(8)} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(8), el => {
|
const editorRect = await getRect(page, getEditorSelector(8));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.keyboard.press("Escape");
|
await page.keyboard.press("Escape");
|
||||||
|
@ -438,10 +408,7 @@ describe("FreeText Editor", () => {
|
||||||
it("must check that text change can be undone/redone", async () => {
|
it("must check that text change can be undone/redone", async () => {
|
||||||
// Run sequentially to avoid clipboard issues.
|
// Run sequentially to avoid clipboard issues.
|
||||||
for (const [browserName, page] of pages) {
|
for (const [browserName, page] of pages) {
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
await clearAll(page);
|
await clearAll(page);
|
||||||
|
|
||||||
|
@ -454,10 +421,7 @@ describe("FreeText Editor", () => {
|
||||||
for (let i = 0; i < 5; i++) {
|
for (let i = 0; i < 5; i++) {
|
||||||
await page.type(`${editorSelector} .internal`, "A");
|
await page.type(`${editorSelector} .internal`, "A");
|
||||||
|
|
||||||
const editorRect = await page.$eval(editorSelector, el => {
|
const editorRect = await getRect(page, editorSelector);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -536,10 +500,7 @@ describe("FreeText Editor", () => {
|
||||||
expect(text).withContext(`In ${browserName}`).toEqual("A");
|
expect(text).withContext(`In ${browserName}`).toEqual("A");
|
||||||
|
|
||||||
// Add a new A.
|
// Add a new A.
|
||||||
let editorRect = await page.$eval(editorSelector, el => {
|
let editorRect = await getRect(page, editorSelector);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
editorRect.x + editorRect.width / 2,
|
editorRect.x + editorRect.width / 2,
|
||||||
editorRect.y + editorRect.height / 2,
|
editorRect.y + editorRect.height / 2,
|
||||||
|
@ -548,10 +509,7 @@ describe("FreeText Editor", () => {
|
||||||
await page.waitForSelector(`${editorSelector} .overlay:not(.enabled)`);
|
await page.waitForSelector(`${editorSelector} .overlay:not(.enabled)`);
|
||||||
await page.type(`${editorSelector} .internal`, "A");
|
await page.type(`${editorSelector} .internal`, "A");
|
||||||
|
|
||||||
editorRect = await page.$eval(editorSelector, el => {
|
editorRect = await getRect(page, editorSelector);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -582,12 +540,7 @@ describe("FreeText Editor", () => {
|
||||||
for (const [browserName, page] of pages) {
|
for (const [browserName, page] of pages) {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
const editorCenters = [];
|
const editorCenters = [];
|
||||||
let lastX = rect.x + rect.width / 10;
|
let lastX = rect.x + rect.width / 10;
|
||||||
|
@ -599,15 +552,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${getEditorSelector(i)} .internal`, data);
|
await page.type(`${getEditorSelector(i)} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(i), el => {
|
const editorRect = await getRect(page, getEditorSelector(i));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
lastX = editorRect.x + editorRect.width + 10;
|
lastX = editorRect.x + editorRect.width + 10;
|
||||||
editorCenters.push({
|
editorCenters.push({
|
||||||
x: editorRect.x + editorRect.width / 2,
|
x: editorRect.x + editorRect.width / 2,
|
||||||
|
@ -782,12 +727,7 @@ describe("FreeText Editor", () => {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const rect = await page.$eval(annotationLayerSelector, el => {
|
const rect = await getRect(page, annotationLayerSelector);
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = `Hello PDF.js World !! on page ${pageNumber}`;
|
const data = `Hello PDF.js World !! on page ${pageNumber}`;
|
||||||
expected.push(data);
|
expected.push(data);
|
||||||
|
@ -925,12 +865,7 @@ describe("FreeText Editor", () => {
|
||||||
|
|
||||||
for (let step = 0; step < 3; step++) {
|
for (let step = 0; step < 3; step++) {
|
||||||
await firstPageOnTop(page);
|
await firstPageOnTop(page);
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = `Hello ${step}`;
|
const data = `Hello ${step}`;
|
||||||
const x = Math.max(rect.x + 0.1 * rect.width, 10);
|
const x = Math.max(rect.x + 0.1 * rect.width, 10);
|
||||||
|
@ -1027,10 +962,7 @@ describe("FreeText Editor", () => {
|
||||||
const serialized = await getSerialized(page);
|
const serialized = await getSerialized(page);
|
||||||
expect(serialized).withContext(`In ${browserName}`).toEqual([]);
|
expect(serialized).withContext(`In ${browserName}`).toEqual([]);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(0), el => {
|
const editorRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Select the annotation we want to move.
|
// Select the annotation we want to move.
|
||||||
await page.mouse.click(editorRect.x + 2, editorRect.y + 2);
|
await page.mouse.click(editorRect.x + 2, editorRect.y + 2);
|
||||||
|
@ -1068,10 +1000,7 @@ describe("FreeText Editor", () => {
|
||||||
let editorIds = await getEditors(page, "freeText");
|
let editorIds = await getEditors(page, "freeText");
|
||||||
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
|
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(0), el => {
|
const editorRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
editorRect.x + editorRect.width / 2,
|
editorRect.x + editorRect.width / 2,
|
||||||
editorRect.y + editorRect.height / 2,
|
editorRect.y + editorRect.height / 2,
|
||||||
|
@ -1191,10 +1120,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const editorSelector = getEditorSelector(1);
|
const editorSelector = getEditorSelector(1);
|
||||||
const editorRect = await page.$eval(editorSelector, el => {
|
const editorRect = await getRect(page, editorSelector);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
editorRect.x + editorRect.width / 2,
|
editorRect.x + editorRect.width / 2,
|
||||||
editorRect.y + editorRect.height / 2,
|
editorRect.y + editorRect.height / 2,
|
||||||
|
@ -1286,10 +1212,7 @@ describe("FreeText Editor", () => {
|
||||||
let editorIds = await getEditors(page, "freeText");
|
let editorIds = await getEditors(page, "freeText");
|
||||||
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
|
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(3), el => {
|
const editorRect = await getRect(page, getEditorSelector(3));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
editorRect.x + editorRect.width / 2,
|
editorRect.x + editorRect.width / 2,
|
||||||
editorRect.y + editorRect.height / 2
|
editorRect.y + editorRect.height / 2
|
||||||
|
@ -1356,10 +1279,7 @@ describe("FreeText Editor", () => {
|
||||||
const editorIds = await getEditors(page, "freeText");
|
const editorIds = await getEditors(page, "freeText");
|
||||||
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
|
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(1), el => {
|
const editorRect = await getRect(page, getEditorSelector(1));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
editorRect.x + editorRect.width / 2,
|
editorRect.x + editorRect.width / 2,
|
||||||
editorRect.y + editorRect.height / 2
|
editorRect.y + editorRect.height / 2
|
||||||
|
@ -1517,10 +1437,7 @@ describe("FreeText Editor", () => {
|
||||||
);
|
);
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -1529,15 +1446,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${getEditorSelector(0)} .internal`, data);
|
await page.type(`${getEditorSelector(0)} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(0), el => {
|
const editorRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -1573,9 +1482,9 @@ describe("FreeText Editor", () => {
|
||||||
|
|
||||||
await selectAll(page);
|
await selectAll(page);
|
||||||
|
|
||||||
const prevWidth = await page.$eval(
|
const { width: prevWidth } = await getRect(
|
||||||
".selectedEditor .internal",
|
page,
|
||||||
el => el.getBoundingClientRect().width
|
".selectedEditor .internal"
|
||||||
);
|
);
|
||||||
|
|
||||||
page.evaluate(() => {
|
page.evaluate(() => {
|
||||||
|
@ -1649,12 +1558,7 @@ describe("FreeText Editor", () => {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const rect = await page.$eval(annotationLayerSelector, el => {
|
const rect = await getRect(page, annotationLayerSelector);
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = `Hello PDF.js World !! on page ${pageNumber}`;
|
const data = `Hello PDF.js World !! on page ${pageNumber}`;
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -1767,12 +1671,7 @@ describe("FreeText Editor", () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
for (const n of [0, 1, 2, 3, 4]) {
|
for (const n of [0, 1, 2, 3, 4]) {
|
||||||
const rect = await page.$eval(getEditorSelector(n), el => {
|
const rect = await getRect(page, getEditorSelector(n));
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
const editorPng = await page.screenshot({
|
const editorPng = await page.screenshot({
|
||||||
clip: rect,
|
clip: rect,
|
||||||
type: "png",
|
type: "png",
|
||||||
|
@ -1937,12 +1836,7 @@ describe("FreeText Editor", () => {
|
||||||
[2, "TR"],
|
[2, "TR"],
|
||||||
[3, "TL"],
|
[3, "TL"],
|
||||||
]) {
|
]) {
|
||||||
const rect = await page.$eval(getEditorSelector(n), el => {
|
const rect = await getRect(page, getEditorSelector(n));
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
const editorPng = await page.screenshot({
|
const editorPng = await page.screenshot({
|
||||||
clip: rect,
|
clip: rect,
|
||||||
type: "png",
|
type: "png",
|
||||||
|
@ -2014,10 +1908,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -2026,15 +1917,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${getEditorSelector(0)} .internal`, data);
|
await page.type(`${getEditorSelector(0)} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(getEditorSelector(0), el => {
|
const editorRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -2081,10 +1964,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
const selectorEditor = getEditorSelector(0);
|
const selectorEditor = getEditorSelector(0);
|
||||||
|
@ -2094,15 +1974,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${selectorEditor} .internal`, data);
|
await page.type(`${selectorEditor} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(selectorEditor, el => {
|
const editorRect = await getRect(page, selectorEditor);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -2210,10 +2082,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await clearAll(page);
|
await clearAll(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
let selectorEditor = getEditorSelector(1);
|
let selectorEditor = getEditorSelector(1);
|
||||||
|
@ -2223,15 +2092,7 @@ describe("FreeText Editor", () => {
|
||||||
});
|
});
|
||||||
await page.type(`${selectorEditor} .internal`, data);
|
await page.type(`${selectorEditor} .internal`, data);
|
||||||
|
|
||||||
const editorRect = await page.$eval(selectorEditor, el => {
|
const editorRect = await getRect(page, selectorEditor);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -2337,10 +2198,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -2399,10 +2257,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
let rect = await page.$eval(".annotationEditorLayer", el => {
|
let rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
await page.waitForSelector(getEditorSelector(0), {
|
await page.waitForSelector(getEditorSelector(0), {
|
||||||
|
@ -2416,10 +2271,7 @@ describe("FreeText Editor", () => {
|
||||||
`${getEditorSelector(0)} .overlay.enabled`
|
`${getEditorSelector(0)} .overlay.enabled`
|
||||||
);
|
);
|
||||||
|
|
||||||
rect = await page.$eval(getEditorSelector(0), el => {
|
rect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
rect.x + 5 * rect.width,
|
rect.x + 5 * rect.width,
|
||||||
|
@ -2436,10 +2288,7 @@ describe("FreeText Editor", () => {
|
||||||
`${getEditorSelector(1)} .overlay.enabled`
|
`${getEditorSelector(1)} .overlay.enabled`
|
||||||
);
|
);
|
||||||
|
|
||||||
rect = await page.$eval(getEditorSelector(0), el => {
|
rect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
rect.x + 5 * rect.width,
|
rect.x + 5 * rect.width,
|
||||||
|
@ -2463,20 +2312,10 @@ describe("FreeText Editor", () => {
|
||||||
.withContext(`In ${browserName}`)
|
.withContext(`In ${browserName}`)
|
||||||
.toEqual(1);
|
.toEqual(1);
|
||||||
|
|
||||||
const getY = selector =>
|
const { y: y0, height } = await getRect(page, getEditorSelector(0));
|
||||||
page.evaluate(
|
|
||||||
sel => document.querySelector(sel).getBoundingClientRect().y,
|
|
||||||
selector
|
|
||||||
);
|
|
||||||
const height = await page.evaluate(
|
|
||||||
sel => document.querySelector(sel).getBoundingClientRect().height,
|
|
||||||
getEditorSelector(0)
|
|
||||||
);
|
|
||||||
|
|
||||||
const y0 = await getY(getEditorSelector(0));
|
|
||||||
const selectorEditor = getEditorSelector(1);
|
const selectorEditor = getEditorSelector(1);
|
||||||
let xy = await getXY(page, selectorEditor);
|
let xy = await getXY(page, selectorEditor);
|
||||||
while ((await getY(selectorEditor)) > y0 - height) {
|
while ((await getRect(page, selectorEditor)).y > y0 - height) {
|
||||||
await kbBigMoveUp(page);
|
await kbBigMoveUp(page);
|
||||||
await waitForPositionChange(page, selectorEditor, xy);
|
await waitForPositionChange(page, selectorEditor, xy);
|
||||||
xy = await getXY(page, selectorEditor);
|
xy = await getXY(page, selectorEditor);
|
||||||
|
@ -2513,10 +2352,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const allPositions = [];
|
const allPositions = [];
|
||||||
|
|
||||||
|
@ -2536,22 +2372,14 @@ describe("FreeText Editor", () => {
|
||||||
`${getEditorSelector(i)} .overlay.enabled`
|
`${getEditorSelector(i)} .overlay.enabled`
|
||||||
);
|
);
|
||||||
|
|
||||||
allPositions.push(
|
allPositions.push(await getRect(page, getEditorSelector(i)));
|
||||||
await page.$eval(getEditorSelector(i), el => {
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
await selectAll(page);
|
await selectAll(page);
|
||||||
await dragAndDropAnnotation(page, rect.x + 161, rect.y + 126, 39, 74);
|
await dragAndDropAnnotation(page, rect.x + 161, rect.y + 126, 39, 74);
|
||||||
|
|
||||||
for (let i = 0; i < 10; i++) {
|
for (let i = 0; i < 10; i++) {
|
||||||
const pos = await page.$eval(getEditorSelector(i), el => {
|
const pos = await getRect(page, getEditorSelector(i));
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
const oldPos = allPositions[i];
|
const oldPos = allPositions[i];
|
||||||
expect(Math.abs(Math.round(pos.x - oldPos.x) - 39))
|
expect(Math.abs(Math.round(pos.x - oldPos.x) - 39))
|
||||||
.withContext(`In ${browserName}`)
|
.withContext(`In ${browserName}`)
|
||||||
|
@ -2599,10 +2427,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -2662,10 +2487,7 @@ describe("FreeText Editor", () => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const page1Selector = `.page[data-page-number = "1"] > .annotationEditorLayer.freetextEditing`;
|
const page1Selector = `.page[data-page-number = "1"] > .annotationEditorLayer.freetextEditing`;
|
||||||
let rect = await page.$eval(page1Selector, el => {
|
let rect = await getRect(page, page1Selector);
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
const selectorEditor = getEditorSelector(0);
|
const selectorEditor = getEditorSelector(0);
|
||||||
await page.mouse.click(rect.x + 10, rect.y + 10);
|
await page.mouse.click(rect.x + 10, rect.y + 10);
|
||||||
await page.waitForSelector(selectorEditor, {
|
await page.waitForSelector(selectorEditor, {
|
||||||
|
@ -2682,10 +2504,7 @@ describe("FreeText Editor", () => {
|
||||||
await page.keyboard.press("Escape");
|
await page.keyboard.press("Escape");
|
||||||
await waitForUnselectedEditor(page, selectorEditor);
|
await waitForUnselectedEditor(page, selectorEditor);
|
||||||
|
|
||||||
const editorRect = await page.$eval(selectorEditor, el => {
|
const editorRect = await getRect(page, selectorEditor);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Select the editor created previously.
|
// Select the editor created previously.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -2702,10 +2521,7 @@ describe("FreeText Editor", () => {
|
||||||
timeout: 0,
|
timeout: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
rect = await page.$eval(page14Selector, el => {
|
rect = await getRect(page, page14Selector);
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
await page.mouse.click(rect.x + 10, rect.y + 10);
|
await page.mouse.click(rect.x + 10, rect.y + 10);
|
||||||
await page.waitForSelector(getEditorSelector(1), {
|
await page.waitForSelector(getEditorSelector(1), {
|
||||||
visible: true,
|
visible: true,
|
||||||
|
@ -2732,15 +2548,7 @@ describe("FreeText Editor", () => {
|
||||||
visible: true,
|
visible: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
rect = await page.$eval(getEditorSelector(0), el => {
|
rect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
rect.x + rect.width / 2,
|
rect.x + rect.width / 2,
|
||||||
rect.y + rect.height / 2
|
rect.y + rect.height / 2
|
||||||
|
@ -2774,10 +2582,7 @@ describe("FreeText Editor", () => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const page1Selector = `.page[data-page-number = "1"] > .annotationEditorLayer.freetextEditing`;
|
const page1Selector = `.page[data-page-number = "1"] > .annotationEditorLayer.freetextEditing`;
|
||||||
const rect = await page.$eval(page1Selector, el => {
|
const rect = await getRect(page, page1Selector);
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
const selectorEditor = getEditorSelector(0);
|
const selectorEditor = getEditorSelector(0);
|
||||||
await page.mouse.click(rect.x + 10, rect.y + 10);
|
await page.mouse.click(rect.x + 10, rect.y + 10);
|
||||||
await page.waitForSelector(selectorEditor, {
|
await page.waitForSelector(selectorEditor, {
|
||||||
|
@ -2794,10 +2599,7 @@ describe("FreeText Editor", () => {
|
||||||
await page.keyboard.press("Escape");
|
await page.keyboard.press("Escape");
|
||||||
await waitForUnselectedEditor(page, selectorEditor);
|
await waitForUnselectedEditor(page, selectorEditor);
|
||||||
|
|
||||||
const editorRect = await page.$eval(selectorEditor, el => {
|
const editorRect = await getRect(page, selectorEditor);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Select the editor created previously.
|
// Select the editor created previously.
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
|
@ -2907,12 +2709,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -3105,12 +2902,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -3171,12 +2963,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -3228,12 +3015,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
|
|
||||||
|
@ -3251,10 +3033,7 @@ describe("FreeText Editor", () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Select the editor created previously.
|
// Select the editor created previously.
|
||||||
const editorRect = await page.$eval(getEditorSelector(0), el => {
|
const editorRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
editorRect.x + editorRect.width / 2,
|
editorRect.x + editorRect.width / 2,
|
||||||
editorRect.y + editorRect.height / 2
|
editorRect.y + editorRect.height / 2
|
||||||
|
@ -3369,12 +3148,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello\nPDF.js\nWorld\n!!";
|
const data = "Hello\nPDF.js\nWorld\n!!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -3415,12 +3189,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -3528,10 +3297,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -3588,10 +3354,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
await page.mouse.click(rect.x + 100, rect.y + 100);
|
await page.mouse.click(rect.x + 100, rect.y + 100);
|
||||||
|
@ -3643,10 +3406,7 @@ describe("FreeText Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
let editorSelector = getEditorSelector(0);
|
let editorSelector = getEditorSelector(0);
|
||||||
const data = "Hello PDF.js World !!";
|
const data = "Hello PDF.js World !!";
|
||||||
|
@ -3655,10 +3415,7 @@ describe("FreeText Editor", () => {
|
||||||
visible: true,
|
visible: true,
|
||||||
});
|
});
|
||||||
await page.type(`${editorSelector} .internal`, data);
|
await page.type(`${editorSelector} .internal`, data);
|
||||||
const editorRect = await page.$eval(editorSelector, el => {
|
const editorRect = await getRect(page, editorSelector);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit.
|
// Commit.
|
||||||
await page.keyboard.press("Escape");
|
await page.keyboard.press("Escape");
|
||||||
|
@ -3811,10 +3568,7 @@ describe("FreeText Editor", () => {
|
||||||
await switchToFreeText(page);
|
await switchToFreeText(page);
|
||||||
|
|
||||||
const editorSelector = getEditorSelector(0);
|
const editorSelector = getEditorSelector(0);
|
||||||
const editorRect = await page.$eval(editorSelector, el => {
|
const editorRect = await getRect(page, editorSelector);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
editorRect.x + editorRect.width / 2,
|
editorRect.x + editorRect.width / 2,
|
||||||
editorRect.y + editorRect.height / 2,
|
editorRect.y + editorRect.height / 2,
|
||||||
|
|
|
@ -19,6 +19,7 @@ import {
|
||||||
createPromise,
|
createPromise,
|
||||||
getEditorSelector,
|
getEditorSelector,
|
||||||
getFirstSerialized,
|
getFirstSerialized,
|
||||||
|
getRect,
|
||||||
getSerialized,
|
getSerialized,
|
||||||
getSpanRectFromText,
|
getSpanRectFromText,
|
||||||
kbBigMoveLeft,
|
kbBigMoveLeft,
|
||||||
|
@ -44,11 +45,10 @@ const waitForPointerUp = page =>
|
||||||
window.addEventListener("pointerup", resolve, { once: true });
|
window.addEventListener("pointerup", resolve, { once: true });
|
||||||
});
|
});
|
||||||
|
|
||||||
const getXY = (page, selector) =>
|
const getXY = async (page, selector) => {
|
||||||
page.evaluate(sel => {
|
const rect = await getRect(page, selector);
|
||||||
const bbox = document.querySelector(sel).getBoundingClientRect();
|
return `${rect.x}::${rect.y}`;
|
||||||
return `${bbox.x}::${bbox.y}`;
|
};
|
||||||
}, selector);
|
|
||||||
|
|
||||||
describe("Highlight Editor", () => {
|
describe("Highlight Editor", () => {
|
||||||
describe("Editor must be removed without exception", () => {
|
describe("Editor must be removed without exception", () => {
|
||||||
|
@ -609,12 +609,7 @@ describe("Highlight Editor", () => {
|
||||||
await page.click("#editorHighlight");
|
await page.click("#editorHighlight");
|
||||||
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
for (let i = 0; i < 3; i++) {
|
for (let i = 0; i < 3; i++) {
|
||||||
const x = rect.x + 120 + i * 120;
|
const x = rect.x + 120 + i * 120;
|
||||||
|
@ -638,8 +633,8 @@ describe("Highlight Editor", () => {
|
||||||
|
|
||||||
await selectAll(page);
|
await selectAll(page);
|
||||||
|
|
||||||
const prevWidth = await page.evaluate(
|
const { width: prevWidth } = await getRect(
|
||||||
sel => document.querySelector(sel).getBoundingClientRect().width,
|
page,
|
||||||
getEditorSelector(0)
|
getEditorSelector(0)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -692,13 +687,10 @@ describe("Highlight Editor", () => {
|
||||||
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
||||||
const sel = getEditorSelector(0);
|
const sel = getEditorSelector(0);
|
||||||
|
|
||||||
const spanRect = await page.evaluate(() => {
|
const spanRect = await getRect(
|
||||||
const span = document.querySelector(
|
page,
|
||||||
`.page[data-page-number="1"] > .textLayer > span`
|
`.page[data-page-number="1"] > .textLayer > span`
|
||||||
);
|
);
|
||||||
const { x, y, width, height } = span.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.keyboard.down("Shift");
|
await page.keyboard.down("Shift");
|
||||||
await page.mouse.click(
|
await page.mouse.click(
|
||||||
spanRect.x + 1,
|
spanRect.x + 1,
|
||||||
|
@ -757,12 +749,7 @@ describe("Highlight Editor", () => {
|
||||||
await page.click("#editorHighlight");
|
await page.click("#editorHighlight");
|
||||||
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const clickHandle = await waitForPointerUp(page);
|
const clickHandle = await waitForPointerUp(page);
|
||||||
await page.mouse.move(rect.x + 120, rect.y + 120);
|
await page.mouse.move(rect.x + 120, rect.y + 120);
|
||||||
|
@ -781,8 +768,8 @@ describe("Highlight Editor", () => {
|
||||||
);
|
);
|
||||||
await selectAll(page);
|
await selectAll(page);
|
||||||
|
|
||||||
const prevWidth = await page.evaluate(
|
const { width: prevWidth } = await getRect(
|
||||||
sel => document.querySelector(sel).getBoundingClientRect().width,
|
page,
|
||||||
getEditorSelector(0)
|
getEditorSelector(0)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -806,15 +793,8 @@ describe("Highlight Editor", () => {
|
||||||
getEditorSelector(0)
|
getEditorSelector(0)
|
||||||
);
|
);
|
||||||
|
|
||||||
const rectDiv = await page.$eval(getEditorSelector(0), el => {
|
const rectDiv = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
const rectSVG = await getRect(page, "svg.highlight.free");
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
const rectSVG = await page.$eval("svg.highlight.free", el => {
|
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(Math.abs(rectDiv.x - rectSVG.x) <= 2)
|
expect(Math.abs(rectDiv.x - rectSVG.x) <= 2)
|
||||||
.withContext(`In ${browserName}`)
|
.withContext(`In ${browserName}`)
|
||||||
|
@ -902,14 +882,8 @@ describe("Highlight Editor", () => {
|
||||||
await page.click("#editorHighlight");
|
await page.click("#editorHighlight");
|
||||||
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
||||||
|
|
||||||
const rect1 = await page.$eval("#pdfjs_internal_id_5R", el => {
|
const rect1 = await getRect(page, "#pdfjs_internal_id_5R");
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
const rect2 = await getRect(page, "#pdfjs_internal_id_16R");
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
const rect2 = await page.$eval("#pdfjs_internal_id_16R", el => {
|
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
|
|
||||||
const x1 = rect1.x + rect1.width / 2;
|
const x1 = rect1.x + rect1.width / 2;
|
||||||
const y1 = rect1.y + rect1.height / 2;
|
const y1 = rect1.y + rect1.height / 2;
|
||||||
|
@ -1281,10 +1255,7 @@ describe("Highlight Editor", () => {
|
||||||
|
|
||||||
await page.waitForSelector(getEditorSelector(0));
|
await page.waitForSelector(getEditorSelector(0));
|
||||||
|
|
||||||
rect = await page.$eval(".annotationEditorLayer", el => {
|
rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const clickHandle = await waitForPointerUp(page);
|
const clickHandle = await waitForPointerUp(page);
|
||||||
await page.mouse.move(rect.x + 5, rect.y + 5);
|
await page.mouse.move(rect.x + 5, rect.y + 5);
|
||||||
|
@ -1403,10 +1374,7 @@ describe("Highlight Editor", () => {
|
||||||
await page.click("#editorHighlight");
|
await page.click("#editorHighlight");
|
||||||
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const clickHandle = await waitForPointerUp(page);
|
const clickHandle = await waitForPointerUp(page);
|
||||||
await page.mouse.move(rect.x + 1, rect.y + 50);
|
await page.mouse.move(rect.x + 1, rect.y + 50);
|
||||||
|
@ -1416,10 +1384,8 @@ describe("Highlight Editor", () => {
|
||||||
await awaitPromise(clickHandle);
|
await awaitPromise(clickHandle);
|
||||||
|
|
||||||
await page.waitForSelector(getEditorSelector(0));
|
await page.waitForSelector(getEditorSelector(0));
|
||||||
const editorX = await page.$eval(
|
|
||||||
getEditorSelector(0),
|
const { x: editorX } = await getRect(page, getEditorSelector(0));
|
||||||
el => el.getBoundingClientRect().x
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(editorX < rect.x)
|
expect(editorX < rect.x)
|
||||||
.withContext(`In ${browserName}`)
|
.withContext(`In ${browserName}`)
|
||||||
|
@ -1446,10 +1412,7 @@ describe("Highlight Editor", () => {
|
||||||
await page.click("#editorHighlight");
|
await page.click("#editorHighlight");
|
||||||
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
await page.waitForSelector(".annotationEditorLayer.highlightEditing");
|
||||||
|
|
||||||
let rect = await page.$eval(".annotationEditorLayer", el => {
|
let rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
const clickHandle = await waitForPointerUp(page);
|
const clickHandle = await waitForPointerUp(page);
|
||||||
await page.mouse.move(rect.x + 20, rect.y + 20);
|
await page.mouse.move(rect.x + 20, rect.y + 20);
|
||||||
await page.mouse.down();
|
await page.mouse.down();
|
||||||
|
|
|
@ -18,6 +18,7 @@ import {
|
||||||
closePages,
|
closePages,
|
||||||
createPromise,
|
createPromise,
|
||||||
getEditorSelector,
|
getEditorSelector,
|
||||||
|
getRect,
|
||||||
getSelectedEditors,
|
getSelectedEditors,
|
||||||
kbRedo,
|
kbRedo,
|
||||||
kbSelectAll,
|
kbSelectAll,
|
||||||
|
@ -68,12 +69,7 @@ describe("Ink Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
for (let i = 0; i < 3; i++) {
|
for (let i = 0; i < 3; i++) {
|
||||||
const x = rect.x + 100 + i * 100;
|
const x = rect.x + 100 + i * 100;
|
||||||
|
@ -105,12 +101,7 @@ describe("Ink Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await clearAll(page);
|
await clearAll(page);
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const xStart = rect.x + 300;
|
const xStart = rect.x + 300;
|
||||||
const yStart = rect.y + 300;
|
const yStart = rect.y + 300;
|
||||||
|
@ -123,10 +114,7 @@ describe("Ink Editor", () => {
|
||||||
|
|
||||||
await commit(page);
|
await commit(page);
|
||||||
|
|
||||||
const rectBefore = await page.$eval(".inkEditor canvas", el => {
|
const rectBefore = await getRect(page, ".inkEditor canvas");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
for (let i = 0; i < 30; i++) {
|
for (let i = 0; i < 30; i++) {
|
||||||
await kbUndo(page);
|
await kbUndo(page);
|
||||||
|
@ -135,10 +123,7 @@ describe("Ink Editor", () => {
|
||||||
await waitForStorageEntries(page, 1);
|
await waitForStorageEntries(page, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
const rectAfter = await page.$eval(".inkEditor canvas", el => {
|
const rectAfter = await getRect(page, ".inkEditor canvas");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(Math.round(rectBefore.x))
|
expect(Math.round(rectBefore.x))
|
||||||
.withContext(`In ${browserName}`)
|
.withContext(`In ${browserName}`)
|
||||||
|
@ -168,12 +153,7 @@ describe("Ink Editor", () => {
|
||||||
pages.map(async ([browserName, page]) => {
|
pages.map(async ([browserName, page]) => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const x = rect.x + 20;
|
const x = rect.x + 20;
|
||||||
const y = rect.y + 20;
|
const y = rect.y + 20;
|
||||||
|
@ -213,12 +193,7 @@ describe("Ink Editor", () => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const x = rect.x + 20;
|
const x = rect.x + 20;
|
||||||
const y = rect.y + 20;
|
const y = rect.y + 20;
|
||||||
|
@ -275,12 +250,7 @@ describe("Ink Editor", () => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const x = rect.x + 20;
|
const x = rect.x + 20;
|
||||||
const y = rect.y + 20;
|
const y = rect.y + 20;
|
||||||
|
@ -315,10 +285,7 @@ describe("Ink Editor", () => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const xStart = rect.x + 300;
|
const xStart = rect.x + 300;
|
||||||
const yStart = rect.y + 300;
|
const yStart = rect.y + 300;
|
||||||
|
@ -362,10 +329,7 @@ describe("Ink Editor", () => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const xStart = rect.x + 300;
|
const xStart = rect.x + 300;
|
||||||
const yStart = rect.y + 300;
|
const yStart = rect.y + 300;
|
||||||
|
@ -422,10 +386,7 @@ describe("Ink Editor", () => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
const xStart = rect.x + 300;
|
const xStart = rect.x + 300;
|
||||||
const yStart = rect.y + 300;
|
const yStart = rect.y + 300;
|
||||||
|
@ -477,10 +438,7 @@ describe("Ink Editor", () => {
|
||||||
await page.click("#editorInk");
|
await page.click("#editorInk");
|
||||||
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
await page.waitForSelector(".annotationEditorLayer.inkEditing");
|
||||||
|
|
||||||
const rect = await page.$eval(".annotationEditorLayer", el => {
|
const rect = await getRect(page, ".annotationEditorLayer");
|
||||||
const { x, y } = el.getBoundingClientRect();
|
|
||||||
return { x, y };
|
|
||||||
});
|
|
||||||
|
|
||||||
let xStart = rect.x + 10;
|
let xStart = rect.x + 10;
|
||||||
const yStart = rect.y + 10;
|
const yStart = rect.y + 10;
|
||||||
|
|
|
@ -19,6 +19,7 @@ import {
|
||||||
getEditorDimensions,
|
getEditorDimensions,
|
||||||
getEditorSelector,
|
getEditorSelector,
|
||||||
getFirstSerialized,
|
getFirstSerialized,
|
||||||
|
getRect,
|
||||||
kbBigMoveDown,
|
kbBigMoveDown,
|
||||||
kbBigMoveRight,
|
kbBigMoveRight,
|
||||||
kbCopy,
|
kbCopy,
|
||||||
|
@ -215,16 +216,14 @@ describe("Stamp Editor", () => {
|
||||||
`${getEditorSelector(i)} .resizers:not(.hidden)`
|
`${getEditorSelector(i)} .resizers:not(.hidden)`
|
||||||
);
|
);
|
||||||
|
|
||||||
const [name, cursor] = await page.evaluate(() => {
|
const stampRect = await getRect(page, ".stampEditor");
|
||||||
const { x, y } = document
|
const [name, cursor] = await page.evaluate(rect => {
|
||||||
.querySelector(".stampEditor")
|
const el = document.elementFromPoint(rect.x, rect.y);
|
||||||
.getBoundingClientRect();
|
|
||||||
const el = document.elementFromPoint(x, y);
|
|
||||||
const cornerName = Array.from(el.classList).find(
|
const cornerName = Array.from(el.classList).find(
|
||||||
c => c !== "resizer"
|
c => c !== "resizer"
|
||||||
);
|
);
|
||||||
return [cornerName, window.getComputedStyle(el).cursor];
|
return [cornerName, window.getComputedStyle(el).cursor];
|
||||||
});
|
}, stampRect);
|
||||||
|
|
||||||
expect(name).withContext(`In ${browserName}`).toEqual(names[j]);
|
expect(name).withContext(`In ${browserName}`).toEqual(names[j]);
|
||||||
expect(cursor)
|
expect(cursor)
|
||||||
|
@ -722,12 +721,7 @@ describe("Stamp Editor", () => {
|
||||||
await waitForSerialized(page, 1);
|
await waitForSerialized(page, 1);
|
||||||
|
|
||||||
const serializedRect = await getFirstSerialized(page, x => x.rect);
|
const serializedRect = await getFirstSerialized(page, x => x.rect);
|
||||||
const rect = await page.$eval(".resizer.bottomRight", el => {
|
const rect = await getRect(page, ".resizer.bottomRight");
|
||||||
// With Chrome something is wrong when serializing a DomRect,
|
|
||||||
// hence we extract the values and just return them.
|
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
const centerX = rect.x + rect.width / 2;
|
const centerX = rect.x + rect.width / 2;
|
||||||
const centerY = rect.y + rect.height / 2;
|
const centerY = rect.y + rect.height / 2;
|
||||||
|
|
||||||
|
@ -743,20 +737,16 @@ describe("Stamp Editor", () => {
|
||||||
(x, y) => x !== y
|
(x, y) => x !== y
|
||||||
);
|
);
|
||||||
|
|
||||||
const canvasRect = await page.$eval(
|
const canvasRect = await getRect(
|
||||||
`${getEditorSelector(0)} canvas`,
|
page,
|
||||||
el => {
|
`${getEditorSelector(0)} canvas`
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return [x, y, width, height];
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
const stampRect = await page.$eval(getEditorSelector(0), el => {
|
const stampRect = await getRect(page, getEditorSelector(0));
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return [x, y, width, height];
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
canvasRect.every((x, i) => Math.abs(x - stampRect[i]) <= 10)
|
["x", "y", "width", "height"].every(
|
||||||
|
key => Math.abs(canvasRect[key] - stampRect[key]) <= 10
|
||||||
|
)
|
||||||
).toBeTrue();
|
).toBeTrue();
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
|
@ -124,6 +124,15 @@ function getSelector(id) {
|
||||||
return `[data-element-id="${id}"]`;
|
return `[data-element-id="${id}"]`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function getRect(page, selector) {
|
||||||
|
// In Chrome something is wrong when serializing a `DomRect`,
|
||||||
|
// so we extract the values and return them ourselves.
|
||||||
|
return page.$eval(selector, el => {
|
||||||
|
const { x, y, width, height } = el.getBoundingClientRect();
|
||||||
|
return { x, y, width, height };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function getQuerySelector(id) {
|
function getQuerySelector(id) {
|
||||||
return `document.querySelector('${getSelector(id)}')`;
|
return `document.querySelector('${getSelector(id)}')`;
|
||||||
}
|
}
|
||||||
|
@ -427,10 +436,7 @@ async function firstPageOnTop(page) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function hover(page, selector) {
|
async function hover(page, selector) {
|
||||||
const rect = await page.$eval(selector, el => {
|
const rect = await getRect(page, selector);
|
||||||
const { x, y, width, height } = el.getBoundingClientRect();
|
|
||||||
return { x, y, width, height };
|
|
||||||
});
|
|
||||||
await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
|
await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -589,6 +595,7 @@ export {
|
||||||
getEditorSelector,
|
getEditorSelector,
|
||||||
getFirstSerialized,
|
getFirstSerialized,
|
||||||
getQuerySelector,
|
getQuerySelector,
|
||||||
|
getRect,
|
||||||
getSelectedEditors,
|
getSelectedEditors,
|
||||||
getSelector,
|
getSelector,
|
||||||
getSerialized,
|
getSerialized,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue