Skip to content

Commit

Permalink
Merge pull request #18968 from calixteman/bug1903588
Browse files Browse the repository at this point in the history
[Editor] Split the long words when showing the alt-text tooltip (bug 1903588)
  • Loading branch information
calixteman authored Oct 28, 2024
2 parents 2bee3af + 8fbb9e2 commit 07a1d30
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 5 deletions.
18 changes: 13 additions & 5 deletions test/integration/stamp_editor_spec.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -337,13 +337,14 @@ describe("Stamp Editor", () => {
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, "Dlrow Olleh");
await page.type(textareaSelector, longString);
await page.click(saveButtonSelector);
await page.waitForSelector(`${buttonSelector}.done`);
await page.hover(buttonSelector);
Expand All @@ -352,7 +353,14 @@ describe("Stamp Editor", () => {
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
expect(tooltipText).toEqual("Dlrow Olleh");
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);
Expand All @@ -371,8 +379,8 @@ describe("Stamp Editor", () => {
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
// The tooltip should still be "Dlrow Olleh".
expect(tooltipText).toEqual("Dlrow Olleh");
// The tooltip should still be longString.
expect(tooltipText).toEqual(longString);

// Now we switch to decorative.
await page.click(buttonSelector);
Expand Down Expand Up @@ -402,7 +410,7 @@ describe("Stamp Editor", () => {
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
expect(tooltipText).toEqual("Dlrow Olleh");
expect(tooltipText).toEqual(longString);

// Now we remove the alt-text and check that the tooltip is removed.
await page.click(buttonSelector);
Expand Down
1 change: 1 addition & 0 deletions web/annotation_editor_layer_builder.css
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,7 @@

.tooltip {
display: none;
word-wrap: anywhere;

&.show {
--alt-text-tooltip-bg: #f0f0f4;
Expand Down

0 comments on commit 07a1d30

Please sign in to comment.