// Copyright 2023 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import * as Platform from '../../../core/platform/platform.js'; import { assertScreenshot, dispatchClickEvent, dispatchKeyDownEvent, raf, renderElementIntoDOM } from '../../../testing/DOMHelpers.js'; import {setupLocaleHooks} from '../../../testing/LocaleHelpers.js'; import * as RenderCoordinator from '../render_coordinator/render_coordinator.js'; import * as Dialogs from './dialogs.js'; describe('Dialog', () => { describe('positioning', () => { let dialog: Dialogs.Dialog.Dialog; let container: HTMLDivElement; let host: HTMLDivElement; beforeEach(() => { container = document.createElement('div'); container.style.width = '500px'; container.style.height = '500px'; container.style.display = 'flex'; container.style.alignItems = 'center'; container.style.justifyContent = 'center'; dialog = new Dialogs.Dialog.Dialog(); host = document.createElement('div'); host.textContent = 'Hover me'; host.style.width = '100px'; host.style.height = '100px'; dialog.position = Dialogs.Dialog.DialogVerticalPosition.TOP; dialog.origin = host; }); it('places the Dialog hit area correctly', async () => { host.addEventListener('click', () => dialog.setDialogVisible(true)); dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false)); container.appendChild(host); container.appendChild(dialog); renderElementIntoDOM(container); await RenderCoordinator.done(); dispatchClickEvent(host); await RenderCoordinator.done(); const hostBounds = host.getBoundingClientRect(); const hitAreaBounds = dialog.getHitArea(); // Make sure the hit area contains the host fully. assert.isAtMost(hitAreaBounds.top, hostBounds.top); assert.isAtLeast(hitAreaBounds.bottom, hostBounds.top + hostBounds.height); assert.isAtMost(hitAreaBounds.left, hostBounds.left); assert.isAtLeast(hitAreaBounds.right, hostBounds.left + hostBounds.width); }); it('sets the automatic horizontal alignment correctly', async () => { // Create the container for the dialog and its origin (host). // This container will be set as the dialog's "window". // With the host in the left border of the window, the Dialog // should deploy from left to right (left horizontal alignment). container.style.display = 'block'; host.style.position = 'relative'; host.style.left = '0'; const content = document.createElement('div'); content.classList.add('dialog-content'); content.style.padding = '0 1em'; content.innerHTML = 'Hi'; dialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.AUTO; dialog.origin = host; dialog.setBoundingElementForTesting(container); host.addEventListener('click', () => dialog.setDialogVisible(true)); dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false)); dialog.appendChild(content); container.appendChild(host); container.appendChild(dialog); renderElementIntoDOM(container); await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); // Test the dialog is deployed left to right, since this way there is more space. assert.strictEqual(dialog.bestHorizontalAlignment, Dialogs.Dialog.DialogHorizontalAlignment.LEFT); // Close the dialog dispatchKeyDownEvent(dialog, {key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true}); await RenderCoordinator.done(); // With the host in the right border of the window, the Dialog // should deploy from right to left (left horizontal alignment). host.style.position = 'relative'; host.style.left = '450px'; await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); // Test the dialog is deployed right to left. assert.strictEqual(dialog.bestHorizontalAlignment, Dialogs.Dialog.DialogHorizontalAlignment.RIGHT); }); it('sets the automatic vertical position correctly when it fits on top', async () => { // Create the container for the dialog and its origin (host), aligning // items to the bottom of the container. This container will be set as the // dialog's "window". // By default the dialog is placed at the bottom of its origin, but doing // so means it wouldn't fit in its window. Because if shown on top would // fit in its window it should be automatically positioned there. container.style.width = '150px'; container.style.height = '300px'; container.style.display = 'flex'; container.style.alignItems = 'end'; container.style.justifyContent = 'center'; // The dialogs content dimensions exceed the viewport's const content = document.createElement('div'); content.classList.add('dialog-content'); content.style.padding = '0 1em'; content.innerHTML = 'Hello, World
I am
a Dialog!'; dialog.position = Dialogs.Dialog.DialogVerticalPosition.AUTO; dialog.origin = host; dialog.setBoundingElementForTesting(container); host.addEventListener('click', () => dialog.setDialogVisible(true)); dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false)); dialog.appendChild(content); container.appendChild(host); container.appendChild(dialog); renderElementIntoDOM(container); await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); // Test the capped dimensions assert.strictEqual(dialog.bestVerticalPosition, Dialogs.Dialog.DialogVerticalPosition.TOP); }); it('sets the automatic vertical position correctly when it does not fit on top', async () => { // Create the container for the dialog and its origin (host), aligning // items to the bottom of the container. This container will be set as the // dialog's "window". // Because the dialog's full height cannot be fully fit at the // bottom or at the top it is positioned at the bottom and the // overflow made visible by scrolling. container.style.width = '150px'; container.style.height = '80px'; container.style.display = 'flex'; container.style.alignItems = 'end'; container.style.justifyContent = 'center'; // The dialogs content dimensions exceed the viewport's const content = document.createElement('div'); content.classList.add('dialog-content'); content.style.padding = '0 1em'; content.innerHTML = 'Hello, World
I am
a Dialog!'; dialog.position = Dialogs.Dialog.DialogVerticalPosition.AUTO; dialog.origin = host; dialog.setBoundingElementForTesting(container); host.addEventListener('click', () => dialog.setDialogVisible(true)); dialog.addEventListener('clickoutsidedialog', () => dialog.setDialogVisible(false)); dialog.appendChild(content); container.appendChild(host); container.appendChild(dialog); renderElementIntoDOM(container); await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); // Test the capped dimensions assert.strictEqual(dialog.bestVerticalPosition, Dialogs.Dialog.DialogVerticalPosition.BOTTOM); }); it('sets the max width and height correctly when the dialog\'s content dimensions exceed the viewport and the dialog is displayed as a modal', async () => { const devtoolsDialog = new Dialogs.Dialog.Dialog(); devtoolsDialog.setBoundingElementForTesting(container); const WINDOW_WIDTH = 300; // This container will be set as the dialog's "window", or the representation // of DevTools bounding element. container.style.width = `${WINDOW_WIDTH}px`; container.style.height = `${WINDOW_WIDTH}px`; const host = document.createElement('div'); host.textContent = 'Hover me'; host.style.width = '100px'; const content = document.createElement('div'); content.classList.add('dialog-content'); content.style.width = '400px'; content.style.height = '400px'; content.innerHTML = 'Hello, World
I am
a Dialog!'; devtoolsDialog.origin = Dialogs.Dialog.MODAL; host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true)); devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false)); container.appendChild(host); container.appendChild(devtoolsDialog); renderElementIntoDOM(container); await RenderCoordinator.done(); devtoolsDialog.appendChild(content); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog'); assert.exists(dialog, 'Dialog not found'); assert.strictEqual( dialog.clientWidth, WINDOW_WIDTH - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW + 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING); assert.strictEqual( dialog.clientHeight, WINDOW_WIDTH - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW + 2 * Dialogs.Dialog.DIALOG_VERTICAL_PADDING); }); describe('with an anchor and possible overflow', () => { const CONTAINER_WIDTH = 500; const CONTAINER_HEIGHT = 500; const HOST_OFFSET = 100; const HOST_HEIGHT = 100; const devtoolsDialog = new Dialogs.Dialog.Dialog(); let host: HTMLElement; let container: HTMLElement; beforeEach(async () => { // This container will be set as the dialog's "window", or the representation // of DevTools bounding element. container = document.createElement('div'); container.style.width = `${CONTAINER_WIDTH}px`; container.style.height = `${CONTAINER_HEIGHT}px`; container.style.position = 'fixed'; container.style.top = '0'; container.style.left = '0'; host = document.createElement('div'); host.textContent = 'Click me'; host.style.width = `${HOST_HEIGHT}px`; host.style.height = `${HOST_HEIGHT}px`; host.style.position = 'absolute'; host.style.top = `${HOST_OFFSET}px`; host.style.left = `${HOST_OFFSET}px`; // The dialogs content dimensions exceed the container's const content = document.createElement('div'); content.classList.add('dialog-content'); content.style.width = '600px'; content.style.height = '600px'; content.innerHTML = 'Hello, World
I am
a Dialog!'; devtoolsDialog.origin = host; devtoolsDialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.CENTER; host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true)); devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false)); devtoolsDialog.setBoundingElementForTesting(container); dialog.setBoundingElementForTesting(container); container.appendChild(host); container.appendChild(devtoolsDialog); renderElementIntoDOM(container); await RenderCoordinator.done(); devtoolsDialog.appendChild(content); }); it('sets the max width and height correctly when the dialog\'s content dimensions exceed the viewport and the dialog is anchored to the left', async () => { devtoolsDialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.LEFT; // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog'); assert.exists(dialog, 'Dialog not found'); // Test the capped dimensions const {left: dialogLeft, width: dialogWidth} = dialog.getBoundingClientRect(); const dialogLeftBorderLimitPosition = dialogWidth + dialogLeft + Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW - 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING; assert.strictEqual(dialogLeftBorderLimitPosition, CONTAINER_WIDTH); assert.strictEqual( dialog.clientHeight, CONTAINER_HEIGHT - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW - HOST_HEIGHT - HOST_OFFSET + 2 * Dialogs.Dialog.DIALOG_VERTICAL_PADDING); }); it('sets the max width and height correctly when the dialog\'s content dimensions exceed the viewport and the dialog is anchored to the right', async () => { devtoolsDialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.RIGHT; await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog'); assert.exists(dialog, 'Dialog not found'); // Test the capped dimensions const dialogRight = host.getBoundingClientRect().right; const containerLeft = container.getBoundingClientRect().left; assert.strictEqual( dialog.clientWidth, (dialogRight - containerLeft) - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW + 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING); }); it('sets the dialog\'s horizontal position correctly to prevent overlap with DevTools when alinged to the left.', async () => { devtoolsDialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.LEFT; host.style.left = '-10px'; await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog'); assert.exists(dialog, 'Dialog not found'); // Test the capped dimensions const dialogLeft = dialog.getBoundingClientRect().left; const containerLeft = container.getBoundingClientRect().left; assert.isAtLeast(dialogLeft, containerLeft); }); it('sets the dialog\'s horizontal position correctly to prevent overlap with DevTools when alinged to the right.', async () => { devtoolsDialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.RIGHT; const containerWidth = container.clientWidth; host.style.left = `${containerWidth + 10}px`; await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog'); assert.exists(dialog, 'Dialog not found'); // Test the capped dimensions const dialogRight = dialog.getBoundingClientRect().right; const dialogRightEdgePosition = dialogRight - 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW / 2; assert.isAtMost(dialogRightEdgePosition, containerWidth); }); it('sets the dialog\'s horizontal position correctly to prevent overlapping with DevTools on the right when alinged to the center.', async () => { const containerWidth = container.clientWidth; host.style.left = `${containerWidth + 260}px`; await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog'); assert.exists(dialog, 'Dialog not found'); // Test the capped dimensions const dialogRight = dialog.getBoundingClientRect().right; const dialogRightEdgePosition = dialogRight - 2 * Dialogs.Dialog.DIALOG_SIDE_PADDING - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW / 2; assert.isAtMost(dialogRightEdgePosition, containerWidth); }); it('sets the dialog\'s horizontal position correctly to prevent overlapping with DevTools on the left when alinged to the center.', async () => { host.style.left = '-260px'; await RenderCoordinator.done(); // Open the dialog and check its position. dispatchClickEvent(host); await RenderCoordinator.done(); const dialog = devtoolsDialog.shadowRoot?.querySelector('dialog'); assert.exists(dialog, 'Dialog not found'); // Test the capped dimensions const containerLeft = container.getBoundingClientRect().left; const dialogLeft = dialog.getBoundingClientRect().left; assert.isAtLeast(dialogLeft, containerLeft); }); }); // Fails on Windows only after the window-size was increased. it.skip( '[crbug.com/420924642]: updates the dialog client rect automatically when its dimensions change', async function() { host.addEventListener('click', () => dialog.setDialogVisible(true)); const dialogContent = document.createElement('div'); dialogContent.style.display = 'block'; dialogContent.style.minWidth = '10px'; dialogContent.style.minHeight = '10px'; dialogContent.style.fontSize = '10px'; dialogContent.innerText = 'Hello'; dialog.append(dialogContent); container.appendChild(host); container.appendChild(dialog); renderElementIntoDOM(container); await RenderCoordinator.done(); dispatchClickEvent(host); await RenderCoordinator.done(); const initialWidth = dialog.getDialogBounds().width; const initialHeight = dialog.getDialogBounds().height; // Increase the font size to increase the dialog's dimensions dialogContent.style.fontSize = '1000px'; // Wait for the resize handling to take effect. await new Promise(res => setTimeout(res, 200)); const finalWidth = dialog.getDialogBounds().width; const finalHeight = dialog.getDialogBounds().height; assert.isAbove(finalWidth, initialWidth); assert.isAbove(finalHeight, initialHeight); }); }); describe('closing the dialog with the ESC key', () => { let devtoolsDialog: Dialogs.Dialog.Dialog; let container: HTMLElement; beforeEach(async () => { devtoolsDialog = new Dialogs.Dialog.Dialog(); container = document.createElement('div'); const host = document.createElement('div'); const content = document.createElement('div'); content.innerHTML = 'Hello, World
I am
a Dialog!'; devtoolsDialog.origin = host; host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true)); devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false)); container.appendChild(host); container.appendChild(devtoolsDialog); renderElementIntoDOM(container); await RenderCoordinator.done(); devtoolsDialog.appendChild(content); // Open the dialog. dispatchClickEvent(host); await RenderCoordinator.done(); }); it('closes the dialog by default when the ESC key is pressed', async () => { let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.exists(dialog, 'Dialog not found'); dispatchKeyDownEvent(dialog, {key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true}); await RenderCoordinator.done(); dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.notExists(dialog, 'Dialog did not close'); }); it('closes the dialog by default when the ESC key is pressed from document.body', async () => { let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.exists(dialog, 'Dialog not found'); dispatchKeyDownEvent(document.body, {key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true}); await RenderCoordinator.done(); dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.notExists(dialog, 'Dialog did not close'); }); it('closes the dialog by default when the ESC key is pressed anywhere within the devtools bounding element', async () => { let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.exists(dialog, 'Dialog not found'); dispatchKeyDownEvent(container, {key: Platform.KeyboardUtilities.ESCAPE_KEY, bubbles: true, composed: true}); await RenderCoordinator.done(); dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.notExists(dialog, 'Dialog did not close'); }); it('does not close the dialog when the ESC key is pressed if the closeOnESC prop is set to false', async () => { let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); devtoolsDialog.closeOnESC = false; assert.exists(dialog, 'Dialog not found'); dispatchKeyDownEvent(dialog, {key: Platform.KeyboardUtilities.ESCAPE_KEY}); await RenderCoordinator.done(); dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.exists(dialog, 'Dialog was closed'); }); }); describe('rendering', () => { setupLocaleHooks(); it('do not render dialog header line if title is empty and there is no close button', async () => { const dialog = new Dialogs.Dialog.Dialog(); dialog.closeButton = false; dialog.dialogTitle = ''; renderElementIntoDOM(dialog); await RenderCoordinator.done(); assert.isNotNull(dialog.shadowRoot); const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header'); assert.exists(dialogHeader); assert.isEmpty(dialogHeader.children); }); it('should render a close button in the dialog if closeButton is true', async () => { const dialog = new Dialogs.Dialog.Dialog(); dialog.closeButton = true; renderElementIntoDOM(dialog); await RenderCoordinator.done(); assert.isNotNull(dialog.shadowRoot); const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header'); assert.exists(dialogHeader); const closeButton = dialogHeader.querySelector('devtools-button'); assert.exists(closeButton); }); it('should render dialog title if it is not empty', async () => { const dialogTitle = 'Button dialog example'; const dialog = new Dialogs.Dialog.Dialog(); dialog.dialogTitle = dialogTitle; renderElementIntoDOM(dialog); await RenderCoordinator.done(); assert.isNotNull(dialog.shadowRoot); const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header'); assert.exists(dialogHeader); const dialogTitleElement = dialogHeader.querySelector('.dialog-header-text'); assert.exists(dialogTitleElement); assert.strictEqual(dialogTitleElement.textContent, dialogTitle); }); }); }); describe('clo lick', () => { let devtoolsDialog: Dialogs.Dialog.Dialog; beforeEach(async () => { devtoolsDialog = new Dialogs.Dialog.Dialog(); const container = document.createElement('div'); const host = document.createElement('div'); const content = document.createElement('div'); content.innerHTML = 'Hello, World
I am
a Dialog!'; devtoolsDialog.origin = Dialogs.Dialog.MODAL; host.addEventListener('click', () => devtoolsDialog.setDialogVisible(true)); devtoolsDialog.addEventListener('clickoutsidedialog', () => devtoolsDialog.setDialogVisible(false)); container.appendChild(host); container.appendChild(devtoolsDialog); renderElementIntoDOM(container); await RenderCoordinator.done(); devtoolsDialog.appendChild(content); // Open the dialog. dispatchClickEvent(host); await RenderCoordinator.done(); }); it('Only closes the dialog if the click falls outside its content', async () => { let dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.exists(dialog, 'Dialog not found'); const {x, width, bottom} = dialog.getBoundingClientRect(); // Click just inside must not close the dialog. dispatchClickEvent(dialog, {clientX: x + width / 2, clientY: bottom - 1}); await RenderCoordinator.done(); dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.exists(dialog, 'Dialog closed when it should not'); dispatchClickEvent(dialog, {clientX: x + width / 2, clientY: bottom + 1}); await RenderCoordinator.done(); // Click just outside must close the dialog. dialog = devtoolsDialog.shadowRoot?.querySelector('dialog[open]'); assert.notExists(dialog, 'Dialog did not close'); }); }); describe('visual appearance', () => { setupLocaleHooks(); /** FIXME: clean up and modularize these test **/ async function renderDialogs() { const verticalPositions = [Dialogs.Dialog.DialogVerticalPosition.TOP, Dialogs.Dialog.DialogVerticalPosition.BOTTOM]; const horizontalAlignments = [ Dialogs.Dialog.DialogHorizontalAlignment.AUTO, Dialogs.Dialog.DialogHorizontalAlignment.LEFT, Dialogs.Dialog.DialogHorizontalAlignment.CENTER, Dialogs.Dialog.DialogHorizontalAlignment.RIGHT, Dialogs.Dialog.DialogHorizontalAlignment.AUTO, ]; const root = document.createElement('div'); root.id = 'root'; const style = document.createElement('style'); style.innerHTML = `#root { height: 100%; display: flex; justify-content: center; align-items: stretch; flex-direction: column; } .dialog-host { border: 1px solid black; padding: 5px; border-radius: 3px; width: 70px; } .dialog-host-narrow { border: 1px solid black; width: 10px; } .row { display: flex; justify-content: space-between; margin: 2em 0; } .container { width: 150px; height: 50px; display: flex; align-items: center; justify-content: center; }`; root.append(style); let i = 0; for (const verticalPosition of verticalPositions) { const row = document.createElement('div'); row.classList.add('row'); root.appendChild(row); for (const horizontalAlignment of horizontalAlignments) { const dialog = new Dialogs.Dialog.Dialog(); const container = document.createElement('div'); container.classList.add('container'); container.id = `container-${i}`; const host = document.createElement('div'); host.classList.add('dialog-host'); host.id = `host-${i}`; host.textContent = 'Hover me'; container.appendChild(host); row.appendChild(container); dialog.position = verticalPosition; dialog.horizontalAlignment = horizontalAlignment; dialog.origin = host; dialog.id = `dialog-${i}`; host.addEventListener('mouseover', () => { void dialog.setDialogVisible(true); }); dialog.addEventListener('clickoutsidedialog', () => { void dialog.setDialogVisible(false); }); const div = document.createElement('div'); div.classList.add('dialog-content'); div.style.padding = '0 1em'; div.innerHTML = `Hello, World
Vertical position: ${verticalPosition}
Horizontal alignment: ${horizontalAlignment}`; dialog.appendChild(div); root.appendChild(dialog); i++; } } for (const verticalPosition of verticalPositions) { const row = document.createElement('div'); row.classList.add('row'); root.appendChild(row); for (const horizontalAlignment of horizontalAlignments) { const dialog = new Dialogs.Dialog.Dialog(); const container = document.createElement('div'); container.classList.add('container'); container.id = `container-${i}`; const host = document.createElement('div'); host.classList.add('dialog-host-narrow'); host.id = `host-${i}`; host.textContent = 'H'; container.appendChild(host); row.appendChild(container); dialog.position = verticalPosition; dialog.horizontalAlignment = horizontalAlignment; dialog.origin = host; dialog.id = `dialog-${i}`; host.addEventListener('mouseover', () => { void dialog.setDialogVisible(true); }); dialog.addEventListener('clickoutsidedialog', () => { void dialog.setDialogVisible(false); }); const div = document.createElement('div'); div.classList.add('dialog-content'); div.style.padding = '0 1em'; div.innerHTML = `Hello, World
Show connector: true
Vertical position: ${ verticalPosition}
Horizontal alignment: ${horizontalAlignment}`; dialog.appendChild(div); root.appendChild(dialog); i++; } } renderDifferentModeExample(); function renderDifferentModeExample() { const row = document.createElement('div'); row.classList.add('row'); root.appendChild(row); renderDialogWithTitle(); renderDialogWithTitleAndCloseButton(); renderDialogWithoutTitleOrCloseButton(); function renderDialog(): Dialogs.Dialog.Dialog { const dialog = new Dialogs.Dialog.Dialog(); const container = document.createElement('div'); container.classList.add('container'); container.id = `container-${i}`; const host = document.createElement('div'); host.classList.add('dialog-host-narrow'); host.id = `host-${i}`; host.textContent = 'H'; container.appendChild(host); row.appendChild(container); dialog.position = Dialogs.Dialog.DialogVerticalPosition.BOTTOM; dialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.AUTO; dialog.origin = host; dialog.id = `dialog-${i}`; host.addEventListener('mouseover', () => { void dialog.setDialogVisible(true); }); dialog.addEventListener('clickoutsidedialog', () => { void dialog.setDialogVisible(false); }); const div = document.createElement('div'); div.classList.add('dialog-content'); div.style.padding = '0 var(--sys-size-8)'; div.innerHTML = 'Hello, World'; dialog.appendChild(div); root.appendChild(dialog); i++; return dialog; } function renderDialogWithTitle() { const dialog = renderDialog(); dialog.dialogTitle = 'title'; } function renderDialogWithTitleAndCloseButton() { const dialog = renderDialog(); dialog.dialogTitle = 'title'; dialog.closeButton = true; } function renderDialogWithoutTitleOrCloseButton() { renderDialog(); } } renderElementIntoDOM(root); return root; } async function openDialog(dialogNumber: number) { const dialog = document.querySelector(`#dialog-${dialogNumber}`) as Dialogs.Dialog.Dialog; await dialog.setDialogVisible(true); await raf(); return dialog; } it('renders the dialog at the top left properly', async () => { await renderDialogs(); await openDialog(1); await assertScreenshot('dialog/top-left-open.png'); }); it('renders a dialog at the bottom with automatic horizontal alignment properly', async () => { await renderDialogs(); await openDialog(5); await assertScreenshot('dialog/bottom-auto-open.png'); }); it('renders the dialog at the bottom center properly', async () => { await renderDialogs(); await openDialog(7); await assertScreenshot('dialog/bottom-center-open.png'); }); it('renders a dialog for super narrow origin at the top with automatic horizontal alignment properly', async () => { await renderDialogs(); await openDialog(20); await assertScreenshot('dialog/narrow-top-auto-open.png'); }); it('sets open attribute when the dialog is opened', async () => { await renderDialogs(); const dialog = await openDialog(2); assert.isTrue(dialog.hasAttribute('open')); }); it('removed open attribute when the dialog is hidden', async () => { await renderDialogs(); const dialog = await openDialog(2); assert.isTrue(dialog.hasAttribute('open')); await dialog.setDialogVisible(false); await RenderCoordinator.done(); assert.isFalse(dialog.hasAttribute('open')); }); });