snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tests/blocksuite/e2e/edgeless/frame/clipboard.spec.ts

@@ -0,0 +1,162 @@
+import type { Page } from '@playwright/test';
+
+import { clickView, moveView } from '../../utils/actions/click.js';
+import {
+  autoFit,
+  createFrame as _createFrame,
+  createShapeElement,
+  deleteAll,
+  dragBetweenViewCoords,
+  edgelessCommonSetup,
+  getAllSortedIds,
+  getFirstContainerId,
+  getIds,
+  Shape,
+  shiftClickView,
+  triggerComponentToolbarAction,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import {
+  copyByKeyboard,
+  pasteByKeyboard,
+  pressBackspace,
+  pressEscape,
+} from '../../utils/actions/keyboard.js';
+import { assertContainerOfElements } from '../../utils/asserts.js';
+import { test } from '../../utils/playwright.js';
+
+const createFrame = async (
+  page: Page,
+  coord1: [number, number],
+  coord2: [number, number]
+) => {
+  await _createFrame(page, coord1, coord2);
+  await autoFit(page);
+};
+
+test.beforeEach(async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+});
+
+test.describe('frame copy and paste', () => {
+  test('copy of frame should keep relationship of child elements', async ({
+    page,
+  }) => {
+    await createFrame(page, [50, 50], [450, 450]);
+    await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
+
+    const frameTitle = page.locator('affine-frame-title');
+
+    await pressEscape(page);
+    await frameTitle.click();
+    await copyByKeyboard(page);
+    await deleteAll(page);
+    await moveView(page, [500, 500]); // center copy
+    await pasteByKeyboard(page);
+
+    const frameId = await getFirstContainerId(page);
+    const shapeId = (await getAllSortedIds(page)).filter(id => id !== frameId);
+    await assertContainerOfElements(page, shapeId, frameId);
+  });
+
+  test('copy of frame by alt/option dragging should keep relationship of child elements', async ({
+    page,
+  }) => {
+    await createFrame(page, [50, 50], [450, 450]);
+    await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
+    await createShapeElement(page, [250, 250], [350, 350], Shape.Square);
+    await createShapeElement(page, [300, 300], [400, 400], Shape.Square);
+    await pressEscape(page);
+
+    const frameTitles = page.locator('affine-frame-title');
+
+    await shiftClickView(page, [260, 260]);
+    await shiftClickView(page, [310, 310]);
+    await triggerComponentToolbarAction(page, 'addGroup');
+    await pressEscape(page);
+
+    await frameTitles.nth(0).click();
+    await page.keyboard.down('Alt');
+    await dragBetweenViewCoords(page, [60, 60], [460, 460]);
+    await page.keyboard.up('Alt');
+    await pressEscape(page);
+
+    await frameTitles.nth(0).click({ modifiers: ['Shift'] });
+    await shiftClickView(page, [250, 250]);
+    await shiftClickView(page, [350, 350]);
+    await pressBackspace(page); // remove original elements
+
+    const frameId = await getFirstContainerId(page);
+    const groupId = await getFirstContainerId(page, [frameId]);
+    const shapeIds = (await getIds(page)).filter(
+      id => ![frameId, groupId].includes(id)
+    );
+
+    await assertContainerOfElements(page, [groupId], frameId);
+    await assertContainerOfElements(page, [shapeIds[0]], frameId);
+    await assertContainerOfElements(page, [shapeIds[1]], groupId);
+    await assertContainerOfElements(page, [shapeIds[2]], groupId);
+  });
+
+  test('duplicate element in frame', async ({ page }) => {
+    await createFrame(page, [50, 50], [450, 450]);
+    await createShapeElement(page, [100, 100], [200, 200], Shape.Square);
+    await pressEscape(page);
+
+    const frameTitles = page.locator('affine-frame-title');
+
+    await frameTitles.nth(0).click();
+
+    const moreMenu = page.getByLabel('More menu');
+
+    await moreMenu.click();
+    await moreMenu
+      .locator('editor-menu-action', { hasText: 'Duplicate' })
+      .click();
+    await pressEscape(page);
+
+    await frameTitles.nth(0).click();
+    await shiftClickView(page, [150, 150]);
+    await pressBackspace(page); // remove original elements
+
+    const frameId = await getFirstContainerId(page);
+    const shapeIds = (await getIds(page)).filter(id => id !== frameId);
+    await assertContainerOfElements(page, shapeIds, frameId);
+  });
+
+  test('copy of element by alt/option dragging in frame should belong to frame', async ({
+    page,
+  }) => {
+    await createFrame(page, [50, 50], [450, 450]);
+    await createShapeElement(page, [100, 100], [200, 200], Shape.Square);
+    await pressEscape(page);
+
+    await clickView(page, [150, 150]);
+    await page.keyboard.down('Alt');
+    await dragBetweenViewCoords(page, [150, 150], [250, 250]);
+    await page.keyboard.up('Alt');
+
+    const frameId = await getFirstContainerId(page);
+    const shapeIds = (await getIds(page)).filter(id => id !== frameId);
+    await assertContainerOfElements(page, shapeIds, frameId);
+  });
+
+  test('copy of element by alt/option dragging out of frame should not belong to frame', async ({
+    page,
+  }) => {
+    await createFrame(page, [50, 50], [450, 450]);
+    await createShapeElement(page, [100, 100], [200, 200], Shape.Square);
+    await pressEscape(page);
+
+    await clickView(page, [150, 150]);
+    await page.keyboard.down('Alt');
+    await dragBetweenViewCoords(page, [150, 150], [550, 550]);
+    await page.keyboard.up('Alt');
+
+    const frameId = await getFirstContainerId(page);
+    const shapeIds = (await getIds(page)).filter(id => id !== frameId);
+    await assertContainerOfElements(page, [shapeIds[0]], frameId);
+    await assertContainerOfElements(page, [shapeIds[1]], null);
+  });
+});

tests/blocksuite/e2e/edgeless/frame/frame-mindmap.spec.ts

@@ -0,0 +1,230 @@
+import type { Page } from '@playwright/test';
+
+import { clickView } from '../../utils/actions/click.js';
+import {
+  createFrame,
+  dragBetweenViewCoords as _dragBetweenViewCoords,
+  edgelessCommonSetup,
+  getFirstContainerId,
+  getSelectedBound,
+  toViewCoord,
+  triggerComponentToolbarAction,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import { pressEscape } from '../../utils/actions/keyboard.js';
+import { waitNextFrame } from '../../utils/actions/misc.js';
+import { assertContainerOfElements } from '../../utils/asserts.js';
+import { test } from '../../utils/playwright.js';
+
+const dragBetweenViewCoords = async (
+  page: Page,
+  start: number[],
+  end: number[]
+) => {
+  // dragging slowly may drop frame if mindmap is existed, so for test we drag quickly
+  await _dragBetweenViewCoords(page, start, end, { steps: 10 });
+  await waitNextFrame(page);
+};
+
+test.beforeEach(async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+});
+
+test('drag root node of mindmap into frame partially, then drag root node of mindmap out.', async ({
+  page,
+}) => {
+  await createFrame(page, [50, 50], [550, 550]);
+  await pressEscape(page);
+  const frameId = await getFirstContainerId(page);
+
+  await triggerComponentToolbarAction(page, 'addMindmap');
+  const mindmapId = await getFirstContainerId(page, [frameId]);
+
+  // drag in
+  {
+    const mindmapBound = await getSelectedBound(page);
+    await clickView(page, [
+      mindmapBound[0] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ]);
+    await dragBetweenViewCoords(
+      page,
+      [mindmapBound[0] + 10, mindmapBound[1] + 0.5 * mindmapBound[3]],
+      [100, 100]
+    );
+  }
+
+  await assertContainerOfElements(page, [mindmapId], frameId);
+
+  // drag out
+  {
+    const mindmapBound = await getSelectedBound(page);
+    await clickView(page, [
+      mindmapBound[0] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ]);
+    await dragBetweenViewCoords(
+      page,
+      [mindmapBound[0] + 10, mindmapBound[1] + 0.5 * mindmapBound[3]],
+      [-100, -100]
+    );
+  }
+
+  await assertContainerOfElements(page, [mindmapId], null);
+});
+
+test('drag root node of mindmap into frame fully, then drag root node of mindmap out.', async ({
+  page,
+}) => {
+  await createFrame(page, [50, 50], [550, 550]);
+  const frameId = await getFirstContainerId(page);
+  await pressEscape(page);
+
+  await triggerComponentToolbarAction(page, 'addMindmap');
+  const mindmapId = await getFirstContainerId(page, [frameId]);
+
+  // drag in
+  {
+    const mindmapBound = await getSelectedBound(page);
+
+    await clickView(page, [
+      mindmapBound[0] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ]);
+    await dragBetweenViewCoords(
+      page,
+      [mindmapBound[0] + 10, mindmapBound[1] + 0.5 * mindmapBound[3]],
+      [100, 200]
+    );
+  }
+
+  await assertContainerOfElements(page, [mindmapId], frameId);
+
+  // drag out
+  {
+    const mindmapBound = await getSelectedBound(page);
+    await clickView(page, [
+      mindmapBound[0] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ]);
+    await dragBetweenViewCoords(
+      page,
+      [mindmapBound[0] + 10, mindmapBound[1] + 0.5 * mindmapBound[3]],
+      [-100, -100]
+    );
+  }
+
+  await assertContainerOfElements(page, [mindmapId], null);
+});
+
+test('drag whole mindmap into frame, then drag root node of mindmap out.', async ({
+  page,
+}) => {
+  await createFrame(page, [50, 50], [550, 550]);
+  const frameId = await getFirstContainerId(page);
+  await pressEscape(page);
+
+  await triggerComponentToolbarAction(page, 'addMindmap');
+  const mindmapId = await getFirstContainerId(page, [frameId]);
+
+  // drag in
+  {
+    const mindmapBound = await getSelectedBound(page);
+    const rootNodePos = [
+      mindmapBound[0] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ];
+    await dragBetweenViewCoords(page, rootNodePos, [
+      rootNodePos[0] - 20,
+      rootNodePos[1] + 200,
+    ]);
+  }
+
+  await assertContainerOfElements(page, [mindmapId], frameId);
+
+  // drag out
+  {
+    const mindmapBound = await getSelectedBound(page);
+    const rootNodePos = [
+      mindmapBound[0] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ];
+
+    await dragBetweenViewCoords(page, rootNodePos, [-100, -100]);
+  }
+
+  await assertContainerOfElements(page, [mindmapId], null);
+});
+
+test('add mindmap into frame, then drag root node of mindmap out.', async ({
+  page,
+}) => {
+  await createFrame(page, [50, 50], [550, 550]);
+  const frameId = await getFirstContainerId(page);
+  await pressEscape(page);
+
+  const button = page.locator('edgeless-mindmap-tool-button');
+  await button.click();
+  const mindMapMenu = page.locator('edgeless-mindmap-menu');
+  const mindMapItem = mindMapMenu.locator('.mindmap-item').first();
+  await mindMapItem.click();
+  await toViewCoord(page, [100, 200]);
+  await clickView(page, [100, 200]);
+  const mindmapId = await getFirstContainerId(page, [frameId]);
+
+  await assertContainerOfElements(page, [mindmapId], frameId);
+
+  // drag out
+  {
+    const mindmapBound = await getSelectedBound(page);
+    await pressEscape(page);
+    await clickView(page, [
+      mindmapBound[0] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ]);
+    await dragBetweenViewCoords(
+      page,
+      [mindmapBound[0] + 10, mindmapBound[1] + 0.5 * mindmapBound[3]],
+      [-20, -20]
+    );
+  }
+
+  await assertContainerOfElements(page, [mindmapId], null);
+});
+
+test('add mindmap out of frame and add new node in frame then drag frame', async ({
+  page,
+}) => {
+  await createFrame(page, [500, 50], [1000, 550]);
+  await pressEscape(page);
+
+  const button = page.locator('edgeless-mindmap-tool-button');
+  await button.click();
+  const mindMapMenu = page.locator('edgeless-mindmap-menu');
+  const mindMapItem = mindMapMenu.locator('.mindmap-item').first();
+  await mindMapItem.click();
+  await toViewCoord(page, [20, 200]);
+  await clickView(page, [20, 200]);
+  await waitNextFrame(page, 100);
+  const mindmapId = await getFirstContainerId(page);
+
+  // add new node
+  {
+    const mindmapBound = await getSelectedBound(page);
+    await pressEscape(page);
+    await waitNextFrame(page, 500);
+    await clickView(page, [
+      mindmapBound[2] - 50,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ]);
+    await waitNextFrame(page, 500);
+    await clickView(page, [
+      mindmapBound[2] + 10,
+      mindmapBound[1] + 0.5 * mindmapBound[3],
+    ]);
+    await pressEscape(page, 2);
+  }
+
+  await assertContainerOfElements(page, [mindmapId], null);
+});

tests/blocksuite/e2e/edgeless/frame/frame-title.spec.ts

@@ -0,0 +1,180 @@
+import { expect, type Page } from '@playwright/test';
+
+import {
+  addNote,
+  autoFit,
+  createFrame as _createFrame,
+  dragBetweenViewCoords,
+  edgelessCommonSetup,
+  getFrameTitle,
+  getSelectedBound,
+  toModelCoord,
+  zoomOutByKeyboard,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import {
+  pressBackspace,
+  pressEnter,
+  pressEscape,
+  type,
+} from '../../utils/actions/keyboard.js';
+import { waitNextFrame } from '../../utils/actions/misc.js';
+import { assertRectExist } from '../../utils/asserts.js';
+import { test } from '../../utils/playwright.js';
+
+const createFrame = async (
+  page: Page,
+  coord1: [number, number],
+  coord2: [number, number]
+) => {
+  const frame = await _createFrame(page, coord1, coord2);
+  await autoFit(page);
+  return frame;
+};
+
+test.beforeEach(async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+});
+
+const enterFrameTitleEditor = async (page: Page) => {
+  const frameTitle = page.locator('affine-frame-title');
+  await frameTitle.dblclick();
+
+  const frameTitleEditor = page.locator('edgeless-frame-title-editor');
+  await frameTitleEditor.waitFor({
+    state: 'attached',
+  });
+  return frameTitleEditor;
+};
+
+test.describe('frame title rendering', () => {
+  test('frame title should be displayed', async ({ page }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+
+    const frameTitle = getFrameTitle(page, frame);
+    await expect(frameTitle).toBeVisible();
+    await expect(frameTitle).toHaveText('Frame 1');
+  });
+
+  // TODO(@L-Sun): For support frame title draggable, we temporarily change frame title from root widget to frame widget,
+  // which make the z-index is not longer on the top. Because we need move the selection logic of frame title to the EdgelessInteraction
+  // where we can use the externalBound to check if the frame title is click.
+  test.fixme('frame title should be rendered on the top', async ({ page }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+
+    const frameTitle = getFrameTitle(page, frame);
+    await expect(frameTitle).toBeVisible();
+
+    const frameTitleBounding = await frameTitle.boundingBox();
+    expect(frameTitleBounding).not.toBeNull();
+    if (!frameTitleBounding) return;
+
+    const frameTitleCenter = [
+      frameTitleBounding.x + frameTitleBounding.width / 2,
+      frameTitleBounding.y + frameTitleBounding.height / 2,
+    ];
+
+    await addNote(page, '', frameTitleCenter[0], frameTitleCenter[1]);
+    await pressEscape(page, 3);
+    await waitNextFrame(page, 500);
+
+    try {
+      // if the frame title is rendered on the top, it should be clickable
+      await frameTitle.click();
+    } catch {
+      expect(true, 'frame title should be rendered on the top').toBeFalsy();
+    }
+  });
+
+  test('should not display frame title component when title is empty', async ({
+    page,
+  }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    await enterFrameTitleEditor(page);
+
+    await pressBackspace(page);
+    await pressEnter(page);
+    const frameTitle = getFrameTitle(page, frame);
+    await expect(frameTitle).toBeHidden();
+  });
+});
+
+test.describe('frame title editing', () => {
+  test('edit frame title by db-click title', async ({ page }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    const frameTitle = getFrameTitle(page, frame);
+
+    await enterFrameTitleEditor(page);
+
+    await type(page, 'ABC');
+    await pressEnter(page);
+    await expect(frameTitle).toHaveText('ABC');
+  });
+
+  test('frame title can be edited repeatedly', async ({ page }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    const frameTitle = getFrameTitle(page, frame);
+
+    await enterFrameTitleEditor(page);
+    await type(page, 'ABC');
+    await pressEnter(page);
+
+    await enterFrameTitleEditor(page);
+    await type(page, 'DEF');
+    await pressEnter(page);
+    await expect(frameTitle).toHaveText('DEF');
+  });
+
+  test('edit frame after zoom', async ({ page }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    const frameTitle = getFrameTitle(page, frame);
+
+    await zoomOutByKeyboard(page);
+    await enterFrameTitleEditor(page);
+    await type(page, 'ABC');
+    await pressEnter(page);
+    await expect(frameTitle).toHaveText('ABC');
+  });
+
+  test('edit frame title after drag', async ({ page }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    const frameTitle = getFrameTitle(page, frame);
+    await dragBetweenViewCoords(page, [50 + 10, 50 + 10], [50 + 20, 50 + 20]);
+
+    await enterFrameTitleEditor(page);
+    await type(page, 'ABC');
+    await pressEnter(page);
+    await expect(frameTitle).toHaveText('ABC');
+  });
+
+  test('blur unmount frame editor', async ({ page }) => {
+    await createFrame(page, [50, 50], [150, 150]);
+    const frameTitleEditor = await enterFrameTitleEditor(page);
+    await page.mouse.click(10, 10);
+    await expect(frameTitleEditor).toHaveCount(0);
+  });
+
+  test('enter unmount frame editor', async ({ page }) => {
+    await createFrame(page, [50, 50], [150, 150]);
+    const frameTitleEditor = await enterFrameTitleEditor(page);
+    await pressEnter(page);
+    await expect(frameTitleEditor).toHaveCount(0);
+  });
+});
+
+test('frame title should be draggable', async ({ page }) => {
+  const frame = await createFrame(page, [50, 50], [150, 150]);
+  const frameTitle = getFrameTitle(page, frame);
+  const frameTitleRect = await frameTitle.boundingBox();
+  assertRectExist(frameTitleRect);
+
+  const center = await toModelCoord(page, [
+    frameTitleRect.x + frameTitleRect.width / 2,
+    frameTitleRect.y + frameTitleRect.height / 2,
+  ]);
+
+  await dragBetweenViewCoords(page, center, [center[0] + 10, center[1] + 10]);
+  const frameRect = await getSelectedBound(page);
+  expect(frameRect).toEqual([60, 60, 100, 100]);
+});

tests/blocksuite/e2e/edgeless/frame/frame.spec.ts

@@ -0,0 +1,523 @@
+import { Bound } from '@blocksuite/global/gfx';
+import { expect, type Page } from '@playwright/test';
+
+import { clickView } from '../../utils/actions/click.js';
+import {
+  addNote,
+  autoFit,
+  createFrame as _createFrame,
+  createShapeElement,
+  dragBetweenViewCoords,
+  edgelessCommonSetup,
+  getFirstContainerId,
+  getIds,
+  getSelectedBound,
+  getSelectedIds,
+  pickColorAtPoints,
+  setEdgelessTool,
+  Shape,
+  shiftClickView,
+  toViewCoord,
+  triggerComponentToolbarAction,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import {
+  pressBackspace,
+  pressEscape,
+  redoByKeyboard,
+  SHORT_KEY,
+  undoByKeyboard,
+} from '../../utils/actions/keyboard.js';
+import { waitNextFrame } from '../../utils/actions/misc.js';
+import {
+  assertCanvasElementsCount,
+  assertContainerChildCount,
+  assertEdgelessElementBound,
+  assertSelectedBound,
+} from '../../utils/asserts.js';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+} from '../../utils/bs-alternative.js';
+import { test } from '../../utils/playwright.js';
+
+const createFrame = async (
+  page: Page,
+  coord1: [number, number],
+  coord2: [number, number]
+) => {
+  const frameId = await _createFrame(page, coord1, coord2);
+  await autoFit(page);
+  await pressEscape(page);
+  return frameId;
+};
+
+test.beforeEach(async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+});
+
+test.describe('add a frame', () => {
+  const createThreeShapesAndSelectTowShape = async (page: Page) => {
+    await createShapeElement(page, [0, 0], [100, 100], Shape.Square);
+    await createShapeElement(page, [100, 0], [200, 100], Shape.Square);
+    await createShapeElement(page, [200, 0], [300, 100], Shape.Square);
+
+    await clickView(page, [50, 50]);
+    await shiftClickView(page, [150, 50]);
+  };
+
+  test('multi select and add frame by shortcut F', async ({ page }) => {
+    await createThreeShapesAndSelectTowShape(page);
+    await page.keyboard.press('f');
+
+    await expect(page.locator('affine-frame')).toHaveCount(1);
+    await assertSelectedBound(page, [-40, -40, 280, 180]);
+
+    const frameId = await getFirstContainerId(page);
+    await assertContainerChildCount(page, frameId, 2);
+  });
+
+  test('multi select and add frame by component toolbar', async ({ page }) => {
+    await createThreeShapesAndSelectTowShape(page);
+    await triggerComponentToolbarAction(page, 'addFrame');
+
+    await expect(page.locator('affine-frame')).toHaveCount(1);
+    await assertSelectedBound(page, [-40, -40, 280, 180]);
+
+    const frameId = await getFirstContainerId(page);
+    await assertContainerChildCount(page, frameId, 2);
+  });
+
+  test('multi select and add frame by more option create frame', async ({
+    page,
+  }) => {
+    await createThreeShapesAndSelectTowShape(page);
+    await triggerComponentToolbarAction(page, 'createFrameOnMoreOption');
+
+    await expect(page.locator('affine-frame')).toHaveCount(1);
+    await assertSelectedBound(page, [-40, -40, 280, 180]);
+
+    const frameId = await getFirstContainerId(page);
+    await assertContainerChildCount(page, frameId, 2);
+  });
+
+  test('multi select add frame by edgeless toolbar', async ({ page }) => {
+    await createThreeShapesAndSelectTowShape(page);
+    await autoFit(page);
+    await setEdgelessTool(page, 'frame');
+    const frameMenu = page.locator('edgeless-frame-menu');
+    await expect(frameMenu).toBeVisible();
+    const button = page.locator('.frame-add-button[data-name="1:1"]');
+    await button.click();
+    await assertSelectedBound(page, [-450, -550, 1200, 1200]);
+
+    // the third should be inner frame because
+    const frameId = await getFirstContainerId(page);
+    await assertContainerChildCount(page, frameId, 3);
+  });
+
+  test('add frame by dragging with shortcut F', async ({ page }) => {
+    await createThreeShapesAndSelectTowShape(page);
+    await pressEscape(page); // unselect
+
+    await page.keyboard.press('f');
+    await dragBetweenViewCoords(page, [-10, -10], [210, 110]);
+
+    await expect(page.locator('affine-frame')).toHaveCount(1);
+    await assertSelectedBound(page, [-10, -10, 220, 120]);
+
+    const frameId = await getFirstContainerId(page);
+    await assertContainerChildCount(page, frameId, 2);
+  });
+
+  test('add inner frame', async ({ page }) => {
+    await createFrame(page, [50, 50], [450, 450]);
+    await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
+    await pressEscape(page);
+
+    await shiftClickView(page, [250, 250]);
+    await page.keyboard.press('f');
+    const innerFrameBound = await getSelectedBound(page);
+    expect(
+      new Bound(50, 50, 400, 400).contains(Bound.fromXYWH(innerFrameBound))
+    ).toBeTruthy();
+  });
+});
+
+test.describe('add element to frame and then move frame', () => {
+  test.describe('add single element', () => {
+    test('element should be moved since it is created in frame', async ({
+      page,
+    }) => {
+      const frameId = await createFrame(page, [50, 50], [550, 550]);
+      const shapeId = await createShapeElement(
+        page,
+        [100, 100],
+        [200, 200],
+        Shape.Square
+      );
+
+      const noteCoord = await toViewCoord(page, [200, 200]);
+      const noteId = await addNote(page, '', noteCoord[0], noteCoord[1]);
+
+      const frameTitle = page.locator('affine-frame-title');
+
+      await pressEscape(page);
+
+      await frameTitle.click();
+      await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+      await assertEdgelessElementBound(page, shapeId, [150, 150, 100, 100]);
+      await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
+      await assertEdgelessElementBound(page, noteId, [
+        220,
+        210,
+        DEFAULT_NOTE_WIDTH,
+        DEFAULT_NOTE_HEIGHT,
+      ]);
+    });
+
+    test('element should be not moved since it is created not in frame', async ({
+      page,
+    }) => {
+      const frameId = await createFrame(page, [50, 50], [550, 550]);
+      const shapeId = await createShapeElement(
+        page,
+        [600, 600],
+        [500, 500],
+        Shape.Square
+      );
+      await pressEscape(page);
+
+      const frameTitle = page.locator('affine-frame-title');
+
+      await frameTitle.click();
+      await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+      await assertEdgelessElementBound(page, shapeId, [500, 500, 100, 100]);
+      await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
+    });
+  });
+
+  test.describe('add group', () => {
+    // Group
+    // |<150px>|
+    // ┌────┐    ─
+    // │  ┌─┼──┐ 150 px
+    // └──┼─┘  │ |
+    //    └────┘ ─
+
+    test('group should be moved since it is fully contained in frame', async ({
+      page,
+    }) => {
+      const [frameId, ...shapeIds] = [
+        await createFrame(page, [50, 50], [550, 550]),
+        await createShapeElement(page, [100, 100], [200, 200], Shape.Square),
+        await createShapeElement(page, [150, 150], [250, 250], Shape.Square),
+      ];
+      await pressEscape(page);
+
+      const frameTitle = page.locator('affine-frame-title');
+
+      await shiftClickView(page, [110, 110]);
+      await shiftClickView(page, [160, 160]);
+      await page.keyboard.press(`${SHORT_KEY}+g`);
+      const groupId = (await getSelectedIds(page))[0];
+      await pressEscape(page);
+
+      await frameTitle.click();
+      await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+      await assertEdgelessElementBound(page, shapeIds[0], [150, 150, 100, 100]);
+      await assertEdgelessElementBound(page, shapeIds[1], [200, 200, 100, 100]);
+      await assertEdgelessElementBound(page, groupId, [150, 150, 150, 150]);
+      await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
+    });
+
+    test('group should be moved since its center is in frame', async ({
+      page,
+    }) => {
+      const [frameId, ...shapeIds] = [
+        await createFrame(page, [50, 50], [550, 550]),
+        await createShapeElement(page, [450, 450], [550, 550], Shape.Square),
+        await createShapeElement(page, [500, 500], [600, 600], Shape.Square),
+      ];
+      await pressEscape(page);
+
+      const frameTitle = page.locator('affine-frame-title');
+
+      await shiftClickView(page, [460, 460]);
+      await shiftClickView(page, [510, 510]);
+      await page.keyboard.press(`${SHORT_KEY}+g`);
+      const groupId = (await getSelectedIds(page))[0];
+      await pressEscape(page);
+
+      await frameTitle.click();
+      await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+      await assertEdgelessElementBound(page, shapeIds[0], [500, 500, 100, 100]);
+      await assertEdgelessElementBound(page, shapeIds[1], [550, 550, 100, 100]);
+      await assertEdgelessElementBound(page, groupId, [500, 500, 150, 150]);
+      await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
+    });
+  });
+
+  test.describe('add inner frame', () => {
+    test('the inner frame and its children should be moved since it is fully contained in frame', async ({
+      page,
+    }) => {
+      const [frameId, innerId, shapeId] = [
+        await createFrame(page, [50, 50], [550, 550]),
+        await createFrame(page, [100, 100], [300, 300]),
+        await createShapeElement(page, [150, 150], [250, 250], Shape.Square),
+      ];
+      await pressEscape(page);
+
+      const frameTitles = page.locator('affine-frame-title');
+
+      await frameTitles.nth(0).click();
+      await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+      await assertEdgelessElementBound(page, shapeId, [200, 200, 100, 100]);
+      await assertEdgelessElementBound(page, innerId, [150, 150, 200, 200]);
+      await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
+    });
+
+    test('the inner frame and its children should  be moved since its center is in frame', async ({
+      page,
+    }) => {
+      const [frameId, innerId, shapeId] = [
+        await createFrame(page, [50, 50], [550, 550]),
+        await createFrame(page, [400, 400], [600, 600]),
+        await createShapeElement(page, [550, 550], [600, 600], Shape.Square),
+      ];
+      await pressEscape(page);
+
+      const frameTitles = page.locator('affine-frame-title');
+
+      await frameTitles.nth(0).click();
+      await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+      await assertEdgelessElementBound(page, shapeId, [600, 600, 50, 50]);
+      await assertEdgelessElementBound(page, innerId, [450, 450, 200, 200]);
+      await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
+    });
+
+    test('the inner frame and its children should also be moved even though its center is not in frame', async ({
+      page,
+    }) => {
+      const [frameId, innerId, shapeId] = [
+        await createFrame(page, [50, 50], [550, 550]),
+        await createFrame(page, [500, 500], [600, 600]),
+        await createShapeElement(page, [550, 550], [600, 600], Shape.Square),
+      ];
+
+      const frameTitles = page.locator('affine-frame-title');
+
+      await frameTitles.nth(0).click();
+      await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+      await assertEdgelessElementBound(page, shapeId, [600, 600, 50, 50]);
+      await assertEdgelessElementBound(page, innerId, [550, 550, 100, 100]);
+      await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
+    });
+  });
+});
+
+test.describe('resize frame then move ', () => {
+  test('resize frame to warp shape', async ({ page }) => {
+    const [frameId, shapeId] = [
+      await createFrame(page, [50, 50], [150, 150]),
+      await createShapeElement(page, [200, 200], [300, 300], Shape.Square),
+    ];
+    await pressEscape(page);
+
+    const frameTitle = page.locator('affine-frame-title');
+
+    await frameTitle.click();
+    await dragBetweenViewCoords(page, [150, 150], [450, 450]);
+
+    await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+    await assertEdgelessElementBound(page, shapeId, [250, 250, 100, 100]);
+    await assertEdgelessElementBound(page, frameId, [100, 100, 400, 400]);
+  });
+
+  test('resize frame to unwrap shape', async ({ page }) => {
+    const [frameId, shapeId] = [
+      await createFrame(page, [50, 50], [450, 450]),
+      await createShapeElement(page, [200, 200], [300, 300], Shape.Square),
+    ];
+    await pressEscape(page);
+
+    const frameTitle = page.locator('affine-frame-title');
+
+    await frameTitle.click();
+    await dragBetweenViewCoords(page, [450, 450], [150, 150]);
+
+    await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+    await assertEdgelessElementBound(page, shapeId, [200, 200, 100, 100]);
+    await assertEdgelessElementBound(page, frameId, [100, 100, 100, 100]);
+  });
+});
+
+test('delete frame should also delete its children', async ({ page }) => {
+  await createFrame(page, [50, 50], [450, 450]);
+  await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
+  await pressEscape(page);
+
+  const frameTitle = page.locator('affine-frame-title');
+
+  await frameTitle.click();
+  await pressBackspace(page);
+  await expect(page.locator('affine-frame')).toHaveCount(0);
+
+  await assertCanvasElementsCount(page, 0);
+});
+
+test('delete frame by click ungroup should not delete its children', async ({
+  page,
+}) => {
+  await createFrame(page, [50, 50], [450, 450]);
+  const shapeId = await createShapeElement(
+    page,
+    [200, 200],
+    [300, 300],
+    Shape.Square
+  );
+  await pressEscape(page);
+
+  const frameTitle = page.locator('affine-frame-title');
+  await frameTitle.click();
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  const ungroupButton = toolbar.getByLabel('Ungroup');
+  await ungroupButton.click();
+
+  await assertCanvasElementsCount(page, 1);
+  expect(await getIds(page)).toEqual([shapeId]);
+});
+
+test('outline should keep updated during a new frame created by frame-tool dragging', async ({
+  page,
+}) => {
+  await page.keyboard.press('f');
+
+  const start = await toViewCoord(page, [0, 0]);
+  const end = await toViewCoord(page, [100, 100]);
+  await page.mouse.move(start[0], start[1]);
+  await page.mouse.down();
+  await page.mouse.move(end[0], end[1], { steps: 10 });
+  await page.waitForTimeout(50);
+
+  expect(
+    await pickColorAtPoints(page, [start, [end[0] - 1, end[1] - 1]])
+  ).toEqual(['#1e96eb', '#1e96eb']);
+});
+
+test('undo should work when create a frame by dragging', async ({ page }) => {
+  await page.keyboard.press('f');
+  await dragBetweenViewCoords(page, [0, 0], [100, 100], { steps: 50 });
+  await undoByKeyboard(page);
+  await expect(page.locator('affine-frame')).toHaveCount(0);
+});
+
+test('undo/redo should work when change frame background', async ({ page }) => {
+  await createFrame(page, [50, 50], [450, 450]);
+  await pressEscape(page);
+
+  const frameTitle = page.locator('affine-frame-title');
+  await frameTitle.click();
+
+  const getFrameBackground = async () => {
+    return page.locator('affine-frame .affine-frame-container').evaluate(el => {
+      return getComputedStyle(el).backgroundColor;
+    });
+  };
+  const colorPanel = page.locator('edgeless-color-picker-button');
+
+  let prevBackground = await getFrameBackground();
+
+  // preset color
+  {
+    await colorPanel.click();
+    await colorPanel.getByLabel('LightRed').click();
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+  }
+
+  prevBackground = await getFrameBackground();
+
+  // custom color
+  {
+    await colorPanel.click();
+    await colorPanel.locator('edgeless-color-custom-button').click();
+    await page.locator('.color-palette').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+    await pressEscape(page);
+
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getFrameBackground()).not.toBe(prevBackground);
+  }
+});
+
+test('connector and shape created simultaneously with edgeless-auto-complete should both be added to frame', async ({
+  page,
+}) => {
+  // Create a larger frame to ensure everything fits
+  const frameId = await createFrame(page, [50, 50], [650, 650]);
+
+  // Create first shape inside the frame (well within bounds)
+  const shape1Id = await createShapeElement(
+    page,
+    [150, 150],
+    [250, 250],
+    Shape.Square
+  );
+
+  // Click on the existing shape to start connection
+  await clickView(page, [200, 200]);
+
+  const autoComplete = page.locator('edgeless-auto-complete');
+  const rightArrowButton = autoComplete
+    .locator('.edgeless-auto-complete-arrow')
+    .nth(0);
+
+  await rightArrowButton.click();
+
+  // Wait for async processing
+  await waitNextFrame(page);
+
+  // Verify that the frame contains 3 children: original shape + new shape + connector
+  await assertContainerChildCount(page, frameId, 3);
+
+  // Verify by moving the frame - all elements should move together
+  const frameTitle = page.locator('affine-frame-title');
+  await frameTitle.click();
+  await dragBetweenViewCoords(page, [60, 60], [110, 110]);
+
+  // Check that the original shape moved with the frame
+  await assertEdgelessElementBound(page, shape1Id, [200, 200, 100, 100]);
+  await assertEdgelessElementBound(page, frameId, [100, 100, 600, 600]);
+
+  // Frame should still contain all 3 elements after the move
+  await assertContainerChildCount(page, frameId, 3);
+});

tests/blocksuite/e2e/edgeless/frame/layer.spec.ts

@@ -0,0 +1,67 @@
+import { expect } from '@playwright/test';
+
+import {
+  createFrame,
+  createNote,
+  createShapeElement,
+  edgelessCommonSetup,
+  getAllSortedIds,
+  getEdgelessSelectedRectModel,
+  Shape,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import {
+  pressEscape,
+  selectAllByKeyboard,
+} from '../../utils/actions/keyboard.js';
+import { test } from '../../utils/playwright.js';
+
+test.beforeEach(async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+});
+
+test.describe('layer logic of frame block', () => {
+  test('a new frame should be on the bottom layer', async ({ page }) => {
+    const shapeId = await createShapeElement(
+      page,
+      [100, 100],
+      [200, 200],
+      Shape.Square
+    );
+    const noteId = await createNote(page, [200, 200]);
+    await pressEscape(page, 3);
+
+    await selectAllByKeyboard(page);
+    const [x, y, w, h] = await getEdgelessSelectedRectModel(page);
+    await pressEscape(page);
+    const frameAId = await createFrame(
+      page,
+      [x - 10, y - 10],
+      [x + w + 10, y + h + 10]
+    );
+
+    let sortedIds = await getAllSortedIds(page);
+    expect(
+      sortedIds[0],
+      'a new frame created by frame-tool should be on the bottom layer'
+    ).toBe(frameAId);
+    expect(sortedIds[1]).toBe(shapeId);
+    expect(sortedIds[2]).toBe(noteId);
+
+    await selectAllByKeyboard(page);
+    await page.keyboard.press('f');
+
+    sortedIds = await getAllSortedIds(page);
+    const frameBId = sortedIds.find(
+      id => ![frameAId, noteId, shapeId].includes(id)
+    );
+    expect(
+      sortedIds[0],
+      'a new frame created by short-cut should also be on the bottom layer'
+    ).toBe(frameBId);
+    expect(sortedIds[1]).toBe(frameAId);
+    expect(sortedIds[2]).toBe(shapeId);
+    expect(sortedIds[3]).toBe(noteId);
+  });
+});

tests/blocksuite/e2e/edgeless/frame/selection.spec.ts

@@ -0,0 +1,221 @@
+import { expect, type Page } from '@playwright/test';
+
+import { click, clickView, dblclickView } from '../../utils/actions/click.js';
+import {
+  addNote,
+  autoFit,
+  createFrame as _createFrame,
+  createShapeElement,
+  dragBetweenViewCoords,
+  edgelessCommonSetup,
+  getFrameTitle,
+  getSelectedBoundCount,
+  getSelectedIds,
+  Shape,
+  toViewCoord,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import {
+  pressEscape,
+  selectAllByKeyboard,
+  type,
+} from '../../utils/actions/keyboard.js';
+import { waitNextFrame } from '../../utils/actions/misc.js';
+import {
+  assertEdgelessCanvasText,
+  assertRichTexts,
+  assertSelectedBound,
+} from '../../utils/asserts.js';
+import { test } from '../../utils/playwright.js';
+
+const createFrame = async (
+  page: Page,
+  coord1: [number, number],
+  coord2: [number, number]
+) => {
+  const frame = await _createFrame(page, coord1, coord2);
+  await autoFit(page);
+  return frame;
+};
+
+test.beforeEach(async ({ page }) => {
+  await edgelessCommonSetup(page);
+  await zoomResetByKeyboard(page);
+});
+
+test.describe('frame selection', () => {
+  test('frame can not be selected by click blank area of frame if it has title', async ({
+    page,
+  }) => {
+    await createFrame(page, [50, 50], [150, 150]);
+    await pressEscape(page);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+
+    await clickView(page, [100, 100]);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+  });
+
+  test('frame can be selected by click frame title', async ({ page }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    await pressEscape(page);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+
+    const frameTitle = getFrameTitle(page, frame);
+    await frameTitle.click();
+
+    expect(await getSelectedBoundCount(page)).toBe(1);
+    await assertSelectedBound(page, [50, 50, 100, 100]);
+  });
+
+  test('frame can be selected by body only if frame is locked or its background is not transparent', async ({
+    page,
+  }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    await pressEscape(page);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+
+    const frameTitle = getFrameTitle(page, frame);
+    await frameTitle.click();
+
+    const getButtons = (page: Page) => {
+      const toolbar = page.locator('affine-toolbar-widget');
+      return {
+        lock: toolbar.getByTestId('lock'),
+        unlock: toolbar.getByTestId('unlock'),
+      };
+    };
+
+    const { lock, unlock } = await getButtons(page);
+    await lock.click();
+
+    await pressEscape(page);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+
+    // click body should select
+    await clickView(page, [100, 100]);
+    expect(await getSelectedBoundCount(page)).toBe(1);
+
+    await unlock.click();
+    // set frame background to non-transparent value
+    await page.evaluate(() => {
+      const edgelessRoot = document.querySelector('affine-edgeless-root');
+
+      if (!edgelessRoot) {
+        throw new Error('Not edgeless root found');
+      }
+
+      const gfx = edgelessRoot.gfx;
+
+      gfx.std.store.transact(() => {
+        // @ts-expect-error set frame block background
+        gfx.selection.selectedElements[0].props.background = '#fb7081';
+      });
+    });
+
+    await pressEscape(page);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+
+    // click body should select
+    await clickView(page, [100, 100]);
+    expect(await getSelectedBoundCount(page)).toBe(1);
+  });
+
+  // TODO(@L-Sun): see frame-title.spec.ts:60
+  test.skip('frame can be selected by click frame title when a note overlap on it', async ({
+    page,
+  }) => {
+    const frame = await createFrame(page, [50, 50], [150, 150]);
+    await pressEscape(page);
+
+    const frameTitle = getFrameTitle(page, frame);
+    const frameTitleBox = await frameTitle.boundingBox();
+    expect(frameTitleBox).not.toBeNull();
+    if (frameTitleBox === null) return;
+
+    const frameTitleCenter = {
+      x: frameTitleBox.x + frameTitleBox.width / 2,
+      y: frameTitleBox.y + frameTitleBox.height / 2,
+    };
+
+    await addNote(page, '', frameTitleCenter.x - 10, frameTitleCenter.y);
+    await pressEscape(page, 3);
+    await waitNextFrame(page, 500);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+
+    await click(page, frameTitleCenter);
+    expect(await getSelectedBoundCount(page)).toBe(1);
+    const selectedIds = await getSelectedIds(page);
+    expect(selectedIds.length).toBe(1);
+    expect(selectedIds[0]).toBe(frame);
+  });
+
+  test('shape inside frame can be directly selected and edited', async ({
+    page,
+  }) => {
+    const frame = await createFrame(page, [50, 50], [250, 250]);
+    await createShapeElement(page, [100, 100], [200, 200], Shape.Square);
+    await pressEscape(page);
+
+    await clickView(page, [150, 150]);
+    expect(await getSelectedBoundCount(page)).toBe(1);
+    await assertSelectedBound(page, [100, 100, 100, 100]);
+
+    // select frame to change its background
+    const frameTitle = getFrameTitle(page, frame);
+    await frameTitle.click();
+    // set frame background to non-transparent value
+    await page.evaluate(() => {
+      const edgelessRoot = document.querySelector('affine-edgeless-root');
+
+      if (!edgelessRoot) {
+        throw new Error('Not edgeless root found');
+      }
+
+      const gfx = edgelessRoot.gfx;
+
+      gfx.std.store.transact(() => {
+        // @ts-expect-error set frame block background
+        gfx.selection.selectedElements[0].props.background = '#fb7081';
+      });
+    });
+    await pressEscape(page);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+    await clickView(page, [150, 150]);
+    expect(await getSelectedBoundCount(page)).toBe(1);
+    await assertSelectedBound(page, [100, 100, 100, 100]);
+
+    await dblclickView(page, [150, 150]);
+    await type(page, 'hello');
+    await assertEdgelessCanvasText(page, 'hello');
+  });
+
+  test('dom inside frame can be selected and edited', async ({ page }) => {
+    await createFrame(page, [50, 50], [150, 150]);
+    const noteCoord = await toViewCoord(page, [100, 100]);
+    await addNote(page, '', noteCoord[0], noteCoord[1]);
+    await page.mouse.click(noteCoord[0] - 80, noteCoord[1]);
+
+    await dblclickView(page, [150, 150]);
+    await type(page, 'hello');
+    await assertRichTexts(page, ['hello']);
+  });
+
+  test('element in frame should not be selected when frame is selected by drag or Cmd/Ctrl + A', async ({
+    page,
+  }) => {
+    await createFrame(page, [50, 50], [200, 200]);
+    await createShapeElement(page, [100, 100], [150, 150], Shape.Square);
+    await pressEscape(page);
+
+    await dragBetweenViewCoords(page, [0, 0], [250, 250]);
+    expect(await getSelectedBoundCount(page)).toBe(1);
+    await assertSelectedBound(page, [50, 50, 150, 150]);
+
+    await pressEscape(page);
+    expect(await getSelectedBoundCount(page)).toBe(0);
+
+    await selectAllByKeyboard(page);
+    expect(await getSelectedBoundCount(page)).toBe(1);
+    await assertSelectedBound(page, [50, 50, 150, 150]);
+  });
+});