@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f899313

package/src/CodeBlock/CodeLanguage.test.tsx

@@ -1,173 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file CodeLanguage.test.tsx
- * @input CodeBlock, language modules, createCodeLanguage
- * @output CodeBlock FR13 evidence: a language value passed as `language`
- *   paints, labels with its name, and reflects its first identifier; a string
- *   never reaches a module; the `tokenizer` prop still wins; server rendering
- *   paints in the first render
- * @position CodeBlock FR13 evidence
- */
-
-import {render, screen} from '@testing-library/react';
-import {renderToString} from 'react-dom/server';
-import {describe, expect, it} from 'vitest';
-import {CodeBlock} from './CodeBlock';
-import {createCodeLanguage} from './grammar';
-import {objectiveC} from './languages/objective-c';
-import {thrift} from './languages/thrift';
-
-const THRIFT = 'struct User {\n  1: required string name;\n}';
-
-function keywordTexts(root: ParentNode): string[] {
-  return Array.from(root.querySelectorAll('.astryx-token-keyword')).map(
-    node => node.textContent ?? '',
-  );
-}
-
-describe('a language value as `language` (FR13)', () => {
-  it('paints and labels with the value; a string never reaches a module', () => {
-    const plain = render(
-      <CodeBlock code={THRIFT} language="thrift" highlightMode="spans" />,
-    );
-    expect(keywordTexts(plain.container)).toEqual([]);
-
-    const {container} = render(
-      <CodeBlock code={THRIFT} language={thrift} highlightMode="spans" />,
-    );
-    expect(keywordTexts(container)).toEqual(
-      expect.arrayContaining(['struct', 'required', 'string']),
-    );
-    expect(screen.getAllByText('thrift').length).toBeGreaterThan(0);
-  });
-
-  it('reflects the first identifier as data-language', () => {
-    const {container} = render(
-      <CodeBlock code="@interface A\n@end" language={objectiveC} />,
-    );
-    expect(container.querySelector('pre')?.getAttribute('data-language')).toBe(
-      'objective-c',
-    );
-  });
-
-  it('paints a custom language made with createCodeLanguage', () => {
-    const zig = createCodeLanguage({
-      name: 'zig',
-      identifiers: ['zig'],
-      tokenize: () => [{type: 'keyword', start: 0, end: 3}],
-    });
-    const {container} = render(
-      <CodeBlock
-        code="pub fn main() void {}"
-        language={zig}
-        highlightMode="spans"
-      />,
-    );
-    expect(keywordTexts(container)).toEqual(['pub']);
-    expect(container.querySelector('pre')?.getAttribute('data-language')).toBe(
-      'zig',
-    );
-  });
-
-  it('labels with the value name and reflects its first identifier', () => {
-    const zig = createCodeLanguage({
-      name: 'Zig Lang',
-      identifiers: ['zig', 'ziglang'],
-      tokenize: () => [],
-    });
-    const {container} = render(
-      <CodeBlock code="const a = 1;" language={zig} />,
-    );
-    expect(screen.getByText('Zig Lang')).toBeInTheDocument();
-    expect(container.querySelector('pre')?.getAttribute('data-language')).toBe(
-      'zig',
-    );
-  });
-
-  it('paints a custom language synchronously at any length, as tokenizer does', () => {
-    const long = 'pub '.repeat(600);
-    const zig = createCodeLanguage({
-      name: 'zig',
-      identifiers: ['zig'],
-      tokenize: code =>
-        Array.from(code.matchAll(/pub/g), match => ({
-          type: 'keyword',
-          start: match.index ?? 0,
-          end: (match.index ?? 0) + 3,
-        })),
-    });
-    const html = renderToString(
-      <CodeBlock code={long} language={zig} highlightMode="spans" />,
-    );
-    expect(html.match(/astryx-token-keyword/g)?.length).toBe(600);
-    const {container} = render(
-      <CodeBlock code={long} language={zig} highlightMode="spans" />,
-    );
-    expect(keywordTexts(container)).toHaveLength(600);
-  });
-
-  it('keeps the tokenizer prop winning, as released', () => {
-    const tokenizer = () => [{type: 'string', start: 0, end: 6}];
-    const builtIn = render(
-      <CodeBlock
-        code="const x = 1;"
-        language="ts"
-        tokenizer={tokenizer}
-        highlightMode="spans"
-      />,
-    );
-    expect(keywordTexts(builtIn.container)).toEqual([]);
-    expect(
-      builtIn.container.querySelector('.astryx-token-string')?.textContent,
-    ).toBe('const ');
-    const value = render(
-      <CodeBlock
-        code={THRIFT}
-        language={thrift}
-        tokenizer={tokenizer}
-        highlightMode="spans"
-      />,
-    );
-    expect(keywordTexts(value.container)).toEqual([]);
-  });
-
-  it('tokenizes an inline custom language once across re-renders', () => {
-    let calls = 0;
-    const tokenize = () => {
-      calls++;
-      return [{type: 'keyword', start: 0, end: 3}];
-    };
-    const make = () =>
-      createCodeLanguage({name: 'zig', identifiers: ['zig'], tokenize});
-    const {rerender} = render(
-      <CodeBlock code="pub fn" language={make()} highlightMode="spans" />,
-    );
-    for (let i = 0; i < 5; i++) {
-      rerender(
-        <CodeBlock code="pub fn" language={make()} highlightMode="spans" />,
-      );
-    }
-    expect(calls).toBe(1);
-  });
-
-  it('renders plain, not throwing, when a custom language has no function', () => {
-    const missing = createCodeLanguage({
-      name: 'zig',
-      identifiers: ['zig'],
-      tokenize: undefined as unknown as () => [],
-    });
-    const {container} = render(
-      <CodeBlock code="pub fn" language={missing} highlightMode="spans" />,
-    );
-    expect(keywordTexts(container)).toEqual([]);
-    expect(container.textContent).toContain('pub fn');
-  });
-
-  it('paints a language value in the server render', () => {
-    const html = renderToString(
-      <CodeBlock code={THRIFT} language={thrift} highlightMode="spans" />,
-    );
-    expect(html).toContain('astryx-token-keyword');
-  });
-});

package/src/CodeBlock/__tests__/CodeBlockCopyClearance.a11y.chromium.spec.ts

@@ -1,325 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file CodeBlockCopyClearance.a11y.chromium.spec.ts
- * @input Built CodeBlock story and real Chromium layout
- * @output Browser evidence that the floating Copy control never covers code
- * @position CodeBlock headerless state (Copy on the root, ORD2): the code body
- *   stays readable (Code Body, Copy Button design relationships)
- */
-
-import {expect, test, type Locator, type Page} from '@playwright/test';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-const STORY = 'core-codeblock--copy-clearance';
-
-async function mount(
-  page: Page,
-  args: Record<string, unknown> = {},
-  direction: 'ltr' | 'rtl' = 'ltr',
-) {
-  await page.setViewportSize({width: 600, height: 400});
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=${STORY}&viewMode=story&globals=direction:${direction}`,
-  );
-  await expect(copyButton(page)).toBeVisible();
-  if (Object.keys(args).length > 0) {
-    // Measure only the story as these args render it. Storybook emits
-    // `storyRendered` for the story's own first render too, shortly after it
-    // is visible, so the update waits for that render to finish first; the
-    // `storyRendered` it then waits for is the re-render with the args, and a
-    // re-render that never comes fails here instead of being measured. Each
-    // arg the cases pass is also checked in the page, so a slow runner can
-    // never measure the default story in its place.
-    await page.waitForFunction(
-      () =>
-        (
-          window as unknown as {
-            __STORYBOOK_PREVIEW__?: {currentRender?: {phase?: string}};
-          }
-        ).__STORYBOOK_PREVIEW__?.currentRender?.phase === 'finished',
-    );
-    await page.evaluate(
-      async ({storyId, updatedArgs}) =>
-        new Promise<void>((resolve, reject) => {
-          const channel = (
-            window as unknown as {
-              __STORYBOOK_ADDONS_CHANNEL__: {
-                emit: (event: string, payload: unknown) => void;
-                once: (event: string, handler: () => void) => void;
-              };
-            }
-          ).__STORYBOOK_ADDONS_CHANNEL__;
-          const timer = setTimeout(
-            () =>
-              reject(new Error('the story did not re-render with its args')),
-            20_000,
-          );
-          channel.once('storyRendered', () => {
-            clearTimeout(timer);
-            resolve();
-          });
-          channel.emit('updateStoryArgs', {storyId, updatedArgs});
-        }),
-      {storyId: STORY, updatedArgs: args},
-    );
-    if (typeof args.code === 'string') {
-      await expect(
-        page.locator('pre.astryx-code-block [data-line]'),
-      ).toHaveCount(args.code.split('\n').length);
-    }
-    if (typeof args.title === 'string') {
-      await expect(page.getByText(args.title, {exact: true})).toBeVisible();
-    }
-    if (args.isWrapped === true) {
-      await expect(
-        page.locator('pre.astryx-code-block [data-line="1"]'),
-      ).toHaveCSS('white-space', 'pre-wrap');
-    }
-  }
-}
-
-async function box(locator: Locator) {
-  const rect = await locator.boundingBox();
-  if (!rect) {
-    throw new Error('element not laid out');
-  }
-  return rect;
-}
-
-function copyButton(page: Page) {
-  return page.getByRole('button', {name: 'Copy code'});
-}
-
-/**
- * The code viewport clips every line, so a line can reach the button only if
- * the viewport's box overlaps it. Returns the overlap width in pixels.
- */
-async function overlap(page: Page, viewportName: string) {
-  const button = await box(copyButton(page));
-  const viewport = await box(page.getByRole('group', {name: viewportName}));
-  const inline =
-    Math.min(button.x + button.width, viewport.x + viewport.width) -
-    Math.max(button.x, viewport.x);
-  const block =
-    Math.min(button.y + button.height, viewport.y + viewport.height) -
-    Math.max(button.y, viewport.y);
-  return inline > 0 && block > 0 ? inline : 0;
-}
-
-/** The first line's painted text must end before the button starts. */
-async function firstLineReachesButton(page: Page) {
-  return page.evaluate(() => {
-    const find = (selector: string) => {
-      const node = document.querySelector(selector);
-      if (!node) {
-        throw new Error(`missing ${selector}`);
-      }
-      return node;
-    };
-    const button = find('[aria-label="Copy code"]').getBoundingClientRect();
-    const viewport = find('[role="group"]').getBoundingClientRect();
-    const range = document.createRange();
-    range.selectNodeContents(find('pre.astryx-code-block [data-line="1"]'));
-    const rtl =
-      getComputedStyle(find('pre.astryx-code-block')).direction === 'rtl';
-    for (const rect of Array.from(range.getClientRects())) {
-      if (rect.bottom <= button.top || rect.top >= button.bottom) {
-        continue;
-      }
-      // Visible part of the text: what the viewport does not clip.
-      const left = Math.max(rect.left, viewport.left);
-      const right = Math.min(rect.right, viewport.right);
-      if (right <= left) {
-        continue;
-      }
-      if (rtl ? left < button.right : right > button.left) {
-        return true;
-      }
-    }
-    return false;
-  });
-}
-
-test('a long first line ends before the floating Copy button', async ({
-  page,
-}) => {
-  await mount(page);
-  expect(await overlap(page, 'Code')).toBe(0);
-  expect(await firstLineReachesButton(page)).toBe(false);
-});
-
-test('scrolled to the end, the line still ends before Copy', async ({page}) => {
-  await mount(page);
-  const viewport = page.getByRole('group', {name: 'Code'});
-  await viewport.evaluate(node => {
-    node.scrollLeft = node.scrollWidth;
-  });
-  expect(await overlap(page, 'Code')).toBe(0);
-  expect(await firstLineReachesButton(page)).toBe(false);
-});
-
-test('wrapped lines wrap before Copy', async ({page}) => {
-  await mount(page, {isWrapped: true});
-  expect(await overlap(page, 'Code')).toBe(0);
-  expect(await firstLineReachesButton(page)).toBe(false);
-});
-
-test('in RTL the clearance mirrors to the inline end', async ({page}) => {
-  await mount(page, {}, 'rtl');
-  const button = await box(copyButton(page));
-  const root = await box(page.locator('pre.astryx-code-block'));
-  // Copy sits at the left (inline-end) edge in RTL.
-  expect(button.x - root.x).toBeLessThan(root.width / 2);
-  expect(await overlap(page, 'Code')).toBe(0);
-  expect(await firstLineReachesButton(page)).toBe(false);
-});
-
-test('with a header, Copy sits in the header and the code keeps its full width', async ({
-  page,
-}) => {
-  await mount(page, {title: 'run.sh'});
-  const viewport = await box(page.getByRole('group', {name: 'Code'}));
-  const root = await box(page.locator('pre.astryx-code-block'));
-  // Only the root's own border separates the viewport from the root's edges.
-  expect(Math.abs(root.width - viewport.width)).toBeLessThanOrEqual(2);
-  expect(await overlap(page, 'Code')).toBe(0);
-});
-
-async function centres(page: Page) {
-  return page.evaluate(() => {
-    const find = (selector: string) => {
-      const node = document.querySelector(selector);
-      if (!node) {
-        throw new Error(`missing ${selector}`);
-      }
-      return node.getBoundingClientRect();
-    };
-    const button = find('[aria-label="Copy code"]');
-    const line = find('pre.astryx-code-block [data-line="1"]');
-    const root = find('pre.astryx-code-block');
-    return {
-      button: button.top + button.height / 2,
-      line: line.top + line.height / 2,
-      above: button.top - root.top,
-      below: root.bottom - button.bottom,
-    };
-  });
-}
-
-test('a one-line block is one row: Copy is centred with even space', async ({
-  page,
-}) => {
-  await mount(page, {code: 'pnpm install'});
-  const one = await centres(page);
-  expect(Math.abs(one.button - one.line)).toBeLessThanOrEqual(1);
-  expect(Math.abs(one.above - one.below)).toBeLessThanOrEqual(1);
-  expect(await overlap(page, 'Code')).toBe(0);
-});
-
-test('a block that grows (streaming) keeps Copy on its first line', async ({
-  page,
-}) => {
-  await mount(page, {code: 'pnpm install'});
-  const before = await centres(page);
-  await mount(page, {code: 'pnpm install\npnpm build\npnpm test'});
-  const after = await centres(page);
-  expect(Math.abs(after.button - before.button)).toBeLessThanOrEqual(1);
-  expect(Math.abs(after.button - after.line)).toBeLessThanOrEqual(1);
-});
-
-test('the small size centres Copy on its own first line', async ({page}) => {
-  await mount(page, {code: 'pnpm install', size: 'sm'});
-  const one = await centres(page);
-  expect(Math.abs(one.button - one.line)).toBeLessThanOrEqual(1);
-});
-
-test('caller controls join Copy in the corner and never cover code', async ({
-  page,
-}) => {
-  await page.setViewportSize({width: 600, height: 400});
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-codeblock--end-content-headerless&viewMode=story`,
-  );
-  const action = page.getByRole('button', {name: 'Run in terminal'});
-  await expect(action).toBeVisible();
-  const viewport = await box(page.getByRole('group', {name: 'Code'}));
-  const run = await box(action);
-  const copy = await box(copyButton(page));
-  for (const control of [run, copy]) {
-    const inline =
-      Math.min(control.x + control.width, viewport.x + viewport.width) -
-      Math.max(control.x, viewport.x);
-    expect(inline).toBeLessThanOrEqual(0);
-  }
-  // Caller controls come first, then Copy, at the inline end.
-  expect(run.x).toBeLessThan(copy.x);
-  expect(Math.abs(run.y - copy.y)).toBeLessThanOrEqual(1);
-});
-
-test('with a header, caller controls sit before Copy in the header', async ({
-  page,
-}) => {
-  await page.setViewportSize({width: 600, height: 400});
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-codeblock--end-content&viewMode=story`,
-  );
-  const header = page.locator('.astryx-code-block-header');
-  await expect(header).toBeVisible();
-  await expect(
-    header.getByRole('button', {name: 'Run in terminal'}),
-  ).toBeVisible();
-  const run = await box(page.getByRole('button', {name: 'Run in terminal'}));
-  const copy = await box(copyButton(page));
-  expect(run.x).toBeLessThan(copy.x);
-});
-
-test('a taller caller control still centres on the first line of a one-line block', async ({
-  page,
-}) => {
-  await page.setViewportSize({width: 600, height: 400});
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-codeblock--end-content-tall&viewMode=story`,
-  );
-  await expect(
-    page.getByRole('button', {name: 'Run in terminal'}),
-  ).toBeVisible();
-  const geometry = await page.evaluate(() => {
-    const rect = (selector: string) => {
-      const node = document.querySelector(selector);
-      if (!node) {
-        throw new Error(`missing ${selector}`);
-      }
-      return node.getBoundingClientRect();
-    };
-    const action = rect('[aria-label="Run in terminal"]');
-    const copy = rect('[aria-label="Copy code"]');
-    const line = rect('pre.astryx-code-block [data-line="1"]');
-    const root = rect('pre.astryx-code-block');
-    return {
-      action: action.top + action.height / 2,
-      copy: copy.top + copy.height / 2,
-      line: line.top + line.height / 2,
-      above: line.top - root.top,
-      below: root.bottom - line.bottom,
-    };
-  });
-  expect(Math.abs(geometry.action - geometry.line)).toBeLessThanOrEqual(1);
-  expect(Math.abs(geometry.copy - geometry.line)).toBeLessThanOrEqual(1);
-  expect(Math.abs(geometry.above - geometry.below)).toBeLessThanOrEqual(1);
-});

package/src/CodeBlock/__tests__/CodeBlockLanguages.a11y.chromium.spec.ts

@@ -1,64 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file CodeBlockLanguages.a11y.chromium.spec.ts
- * @input Storybook stories core-codeblock--built-in-languages and
- *   core-codeblock--language-modules
- * @output CodeBlock FR12 and FR13 in a real browser: built-in languages and
- *   language values passed as `language` register syntax highlights over the
- *   right text
- * @position CodeBlock FR12, FR13 browser evidence
- */
-
-import {expect, test, type Page} from '@playwright/test';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-/** The text each range of the `astryx-<type>` syntax highlight covers. */
-async function highlighted(page: Page, type: string) {
-  return page.evaluate(name => {
-    const highlight = CSS.highlights.get(`astryx-${name}`);
-    return highlight
-      ? Array.from(highlight as unknown as Iterable<Range>).map(range =>
-          range.toString(),
-        )
-      : [];
-  }, type);
-}
-
-test('built-in C++, Rust, and SQL colour with no setup', async ({page}) => {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-codeblock--built-in-languages&viewMode=story`,
-  );
-  await expect(page.locator('pre.astryx-code-block')).toHaveCount(3);
-  await expect
-    .poll(async () => highlighted(page, 'keyword'))
-    .toEqual(expect.arrayContaining(['int', 'return', 'fn', 'SELECT']));
-  expect(await highlighted(page, 'comment')).toEqual(
-    expect.arrayContaining(['// Sum a vector', '-- Active users this week']),
-  );
-});
-
-test('Thrift and Java colour when passed as the language', async ({page}) => {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-codeblock--language-modules&viewMode=story`,
-  );
-  await expect(page.locator('pre.astryx-code-block')).toHaveCount(2);
-  await expect
-    .poll(async () => highlighted(page, 'keyword'))
-    .toEqual(expect.arrayContaining(['struct', 'required', 'public', 'class']));
-  expect(await highlighted(page, 'string')).toContain('"hello, "');
-});

package/src/CodeBlock/__tests__/CodeBlockOverflowStop.a11y.chromium.spec.ts

@@ -1,126 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y always
-
-/**
- * @file CodeBlockOverflowStop.a11y.chromium.spec.ts
- * @input Built CodeBlock story and real Chromium layout
- * @output Browser evidence that the code viewport is a Tab stop only while it overflows
- * @position CodeBlock FR8 / AST-025 FR12–FR13 proof over the shared scroll capability
- */
-
-import {expect, test, type Page} from '@playwright/test';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-const STORY = 'core-codeblock--overflow-stop';
-const WIDE = 'const wide = "' + 'x'.repeat(400) + '";';
-const TALL = Array.from({length: 40}, (_, i) => `const line${i} = ${i};`).join(
-  '\n',
-);
-
-async function mount(page: Page) {
-  await page.setViewportSize({width: 600, height: 500});
-  await page.goto(`${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`);
-  await expect(page.getByRole('group', {name: 'tsx'})).toBeVisible();
-}
-
-async function setArgs(page: Page, args: Record<string, unknown>) {
-  await page.evaluate(
-    async ({storyId, updatedArgs}) =>
-      new Promise<void>(resolve => {
-        const channel = (
-          window as unknown as {
-            __STORYBOOK_ADDONS_CHANNEL__: {
-              emit: (event: string, payload: unknown) => void;
-              once: (event: string, handler: () => void) => void;
-            };
-          }
-        ).__STORYBOOK_ADDONS_CHANNEL__;
-        channel.once('storyRendered', () => resolve());
-        channel.emit('updateStoryArgs', {storyId, updatedArgs});
-        setTimeout(resolve, 1500);
-      }),
-    {storyId: STORY, updatedArgs: args},
-  );
-}
-
-function viewport(page: Page) {
-  return page.getByRole('group', {name: 'tsx'});
-}
-
-test('a fitting viewport is not a Tab stop', async ({page}) => {
-  await mount(page);
-  await expect(viewport(page)).not.toHaveAttribute('tabindex', /.*/);
-  // Tab from the document start lands on the copy button, never the viewport.
-  await page.keyboard.press('Tab');
-  const active = await page.evaluate(() =>
-    document.activeElement?.getAttribute('role'),
-  );
-  expect(active).not.toBe('group');
-});
-
-test('inline overflow adds the stop; block overflow adds it too', async ({
-  page,
-}) => {
-  await mount(page);
-  await setArgs(page, {code: WIDE});
-  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
-  await expect(viewport(page)).toHaveAttribute(
-    'data-scrollable-inline',
-    'true',
-  );
-
-  await setArgs(page, {code: TALL, maxHeight: 160});
-  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
-  await expect(viewport(page)).toHaveAttribute('data-scrollable-block', 'true');
-});
-
-test('losing overflow removes the stop without moving focus', async ({
-  page,
-}) => {
-  await mount(page);
-  await setArgs(page, {code: WIDE});
-  await expect(viewport(page)).toHaveAttribute('tabindex', '0');
-  await viewport(page).focus();
-  await expect(viewport(page)).toBeFocused();
-
-  await setArgs(page, {code: 'const fits = true;'});
-  // Focus stays on the element that had it; the stop is gone for the next Tab.
-  await expect(viewport(page)).toBeFocused();
-  await expect(viewport(page)).toHaveAttribute('tabindex', '-1');
-  // Leaving and coming back by keyboard skips it: it is out of the Tab order.
-  await page.keyboard.press('Shift+Tab');
-  await page.keyboard.press('Tab');
-  await expect(viewport(page)).not.toBeFocused();
-  await expect(viewport(page)).not.toHaveAttribute('tabindex', '0');
-});
-
-test('a root height set from outside bounds the viewport, which then scrolls', async ({
-  page,
-}) => {
-  await mount(page);
-  // The IDE template's pattern: the block fills a parent of fixed height.
-  await setArgs(page, {code: TALL, style: {height: 160}});
-  const vp = viewport(page);
-  await expect(vp).toHaveAttribute('tabindex', '0');
-  await expect(vp).toHaveAttribute('data-scrollable-block', 'true');
-  const box = await vp.boundingBox();
-  expect(box?.height ?? 0).toBeLessThan(160);
-  const scrollable = await vp.evaluate(
-    node => node.scrollHeight > node.clientHeight + 1,
-  );
-  expect(scrollable).toBe(true);
-});