# RustPad Complete Feature Demonstration {#rustpad-complete-test}

This note is an extensive test document for the RustPad editor, Markdown renderer, preview editor, file handling, media players, collaboration tools, and mobile interface.

Use **Markdown mode** and begin in **Split view**. Later, follow the manual interface checklist near the end of this note.

## Preparation before testing

Upload files with these exact names so every local attachment example can resolve:

- `TEST_IMAGE.png` — any PNG or JPEG image renamed to this filename.
- `TEST_VIDEO.mp4` — a short MP4 video.
- `TEST_DOCUMENT.pdf` — any PDF document.
- `TEST_ARCHIVE.zip` — any ZIP archive.

Until the files are uploaded, aliases such as `[image=TEST_IMAGE.png,...]` remain visible as plain text. This is expected.

[TOC]

---

# 1. Headings and navigation {#headings-and-navigation}

## Heading level 2

### Heading level 3

#### Heading level 4

##### Heading level 5

###### Heading level 6

The toolbar exposes H1–H4, while the renderer also supports H5 and H6 entered manually.

## Custom heading identifier {#custom-anchor-example}

This heading uses the explicit identifier `custom-anchor-example`.

[Jump to the custom heading](#custom-anchor-example)

[Return to the top](#rustpad-complete-test)

## Repeated heading

The first repeated heading should receive the generated anchor `repeated-heading`.

## Repeated heading

The second repeated heading should receive a unique generated anchor such as `repeated-heading-2`.

---

# 2. Paragraphs, wrapping, and plain text

This is a normal paragraph. It should wrap naturally when the editor or preview becomes narrow. Resize the browser window and verify that no horizontal page overflow is introduced by ordinary text.

This deliberately long sentence tests wrapping, compact mode, synchronized scrolling, font changes, mobile layout, and preview editing while preserving a readable paragraph across narrow and wide screens without forcing the entire interface beyond the available viewport width.

A blank source line creates visible paragraph spacing.

The next line contains characters that should be escaped rather than executed:

<script>alert("This must never execute")</script>

HTML other than the supported `<details>` and `<summary>` block should be displayed safely as text.

---

# 3. Inline formatting

**Bold text**

*Italic text*

~~Strikethrough text~~

==Highlighted text==

H~2~O uses subscript.

E = mc^2^ uses superscript.

Use `cargo test`, `npm run build`, and `SELECT * FROM notes;` as inline code.

Formatting can appear in one sentence: **bold**, *italic*, ~~deleted~~, ==important==, H~2~O, x^2^, and `inline code`.

Select one or more lines in the editor and press a formatting button. Multi-line selection should apply or remove the wrapper on each non-empty selected line.

---

# 4. Emoji support

Shortcodes should render as emoji:

:smile: :rocket: :white_check_mark: :warning: :heart: :fire: :computer: :memo: :bug: :tada:

The **Emoji** toolbar menu should also:

- search by emoji name or keyword,
- switch between categories,
- insert the selected emoji at the current cursor position,
- close after insertion.

Direct Unicode emoji should remain unchanged: 😀 🚀 ✅ ⚠️ ❤️ 🔥 🧪 📎 🎬.

---

# 5. Links and automatic link detection

[Example link](https://example.com)

[Example link with a title](https://example.com "Open example.com")

[Relative link to the RustPad home page](/)

[Internal link to the media section](#media-and-attachments)

A plain URL should become clickable automatically:

https://example.com/documentation

Trailing punctuation should not become part of the URL: https://example.com/testing.

A mail address using the mailto scheme should become clickable:

mailto:qa@example.com

A deliberately unsafe URL should be neutralized instead of executed:

[Blocked JavaScript URL](javascript:alert%281%29)

A protocol-relative URL should also be rejected:

[Blocked protocol-relative URL](//example.com/path)

---

# 6. Blockquotes

> RustPad renders a quoted line as a blockquote.

> This second source line is another quote and can be edited directly in Preview mode.

> **Formatting**, `inline code`, links such as [RustPad home](/), and :memo: emoji work inside a quote.

---

# 7. Unordered, ordered, nested, and task lists

## Unordered list

- First unordered item
- Second unordered item with **bold text**
- Third unordered item with a [link](https://example.com)
+ A plus sign is also accepted as an unordered-list marker
* An asterisk is also accepted as an unordered-list marker

## Nested lists

- Parent item A
  - Child item A.1
  - Child item A.2
    - Grandchild item A.2.1
    - Grandchild item A.2.2
  1. Nested ordered item A.3
  2. Nested ordered item A.4
- Parent item B
  1. First ordered child
  2. Second ordered child
     - Nested unordered detail
     - Another nested detail

## Ordered list

1. First ordered item
2. Second ordered item
3. Third ordered item
4. Fourth ordered item with `inline code`

## Task list

- [ ] Unchecked task — click the checkbox in Preview mode
- [x] Completed task
- [ ] Task containing **bold text**, *italic text*, and :rocket:
- [ ] Task with a [documentation link](https://example.com/docs)
  - [ ] Nested unchecked task
  - [x] Nested completed task

Clicking a task checkbox in Preview mode should update the source without moving the preview to another position.

---

# 8. Definition lists

RustPad
: A collaborative note editor with Markdown preview.
: A system supporting notes, workspaces, file uploads, history, sharing, and live collaboration.

Markdown mode
: Renders headings, formatting, lists, tables, diagrams, media, and other supported syntax.

Text mode
: Displays the source as plain text without Markdown rendering.

---

# 9. Tables

## Alignment and formatting

| Left aligned | Center aligned | Right aligned |
| :--- | :---: | ---: |
| Alpha | Center | 10 |
| **Bold cell** | `inline code` | 20 |
| [Link](https://example.com) | ==Highlighted== | 30 |
| Literal pipe: A &#124; B | H~2~O | x^2^ |

## Larger editable table

| ID | Feature | Expected result | Status |
| ---: | :--- | :--- | :---: |
| 1 | Markdown preview | Content is rendered | ✅ |
| 2 | Direct preview editing | A clicked cell becomes editable | ⬜ |
| 3 | Cell containing a pipe | The value `left &#124; right` stays in one cell | ⬜ |
| 4 | Long content | This long cell wraps instead of breaking the page width on mobile devices | ⬜ |

Click an ordinary table cell in Preview mode, edit its value, and press Enter or click outside. A literal `|` entered through Preview editing should be stored safely as `&#124;`.

---

# 10. Horizontal rules

Text above the rule.

---

Text between two rules.

-------

Text below the rule.

---

# 11. Collapsible sections

<details>
<summary>Open the basic collapsible section</summary>

This content should remain hidden until the summary is clicked.

- Collapsible sections can contain lists.
- They can contain **formatting** and [links](https://example.com).
- They can contain tasks:
  - [ ] Task inside a collapsible section
  - [x] Completed task inside a collapsible section

</details>

<details>
<summary>Open the advanced collapsible section</summary>

### Heading inside details

| Item | Value |
| --- | ---: |
| CPU | 4 |
| Memory | 8 GB |

```javascript
const insideDetails = true;
console.log({ insideDetails });
```

:::info
Alerts can also be nested inside a collapsible section.
:::

</details>

---

# 12. Alert blocks

:::success
**Success:** The operation completed correctly. Use this block for confirmations, passed checks, and completed deployment steps.
:::

:::info
**Information:** This is neutral supporting information. It may include `inline code`, [links](https://example.com), and multiple source lines.

The second paragraph should remain inside the same information block.
:::

:::warning
**Warning:** Review configuration before continuing. This example tests a longer warning that wraps correctly on mobile screens.
:::

:::danger
**Danger:** This is a destructive or critical-action warning. It should be visually distinct from all other alert types.
:::

---

# 13. Footnotes

RustPad supports simple footnote references.[^rustpad]

A second reference can point to another note.[^security]

Footnotes may contain more than one source line when continuation lines are indented.[^multiline]

[^rustpad]: RustPad renders collected footnotes at the end of the document and provides a return link.
[^security]: Links are sanitized and unsupported HTML is escaped.
[^multiline]: This is the first line of a multi-line footnote.
    This is the second line of the same footnote.
    This is the third line and contains **formatting**, `code`, and :memo:.

---

# 14. Code blocks and syntax highlighting

## Plain text block

```text
This block should use a monospace font.
No syntax highlighting is required.
Special characters remain literal: <tag> **not bold** :rocket:
```

## JavaScript

```javascript
class RustPadClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  async loadNote(slug) {
    const response = await fetch(`${this.baseUrl}/api/notes/${slug}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  }
}

const client = new RustPadClient(window.location.origin);
console.log(client);
```

## JavaScript with line numbers starting at 40

```javascript=40
function calculateTotal(values) {
  return values.reduce((sum, value) => sum + value, 0);
}

const total = calculateTotal([10, 20, 30]);
console.log({ total });
```

## Rust

```rust
use std::collections::HashMap;

fn word_counts(input: &str) -> HashMap<String, usize> {
    let mut counts = HashMap::new();
    for word in input.split_whitespace() {
        *counts.entry(word.to_lowercase()).or_insert(0) += 1;
    }
    counts
}

fn main() {
    println!("{:?}", word_counts("RustPad RustPad test"));
}
```

## Python with line numbers starting at 101

```python=101
from dataclasses import dataclass

@dataclass
class Note:
    title: str
    content: str

note = Note(title="Feature test", content="Everything works")
print(note)
```

## JSON

```json
{
  "name": "RustPad",
  "features": ["markdown", "collaboration", "files", "history"],
  "enabled": true,
  "limits": {
    "uploadBytes": 10485760,
    "chatCharacters": 1000
  }
}
```

## Bash

```bash
#!/usr/bin/env bash
set -euo pipefail

./dev.sh
curl -fsS http://localhost:3000/health
```

## SQL

```sql
SELECT
    n.id,
    n.title,
    COUNT(f.id) AS file_count
FROM notes AS n
LEFT JOIN files AS f ON f.note_id = n.id
GROUP BY n.id, n.title
ORDER BY n.title;
```

## HTML

```html
<article class="note-card">
  <h2>Example note</h2>
  <p>This is source code, not active HTML.</p>
</article>
```

## CSS

```css
.note-card {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-inline: auto;
}
```

## Diff

```diff
- <button>Image/File</button>
+ <button>Upload</button>
```

## YAML using tilde fences

~~~yaml
services:
  rustpad:
    build: .
    ports:
      - "3000:3000"
    restart: unless-stopped
~~~

## Code block with line numbers and no language

```=7
first numbered line
second numbered line
third numbered line
```

---

# 15. Mermaid diagrams

Each Mermaid fence should be replaced by an SVG diagram. Mermaid should load only when at least one Mermaid block is present.

## Flowchart

```mermaid
flowchart LR
  Start([Open RustPad]) --> Mode{Choose mode}
  Mode -->|Markdown| Preview[Render Markdown preview]
  Mode -->|Text| Raw[Render plain text]
  Preview --> Save[Save automatically]
  Raw --> Save
  Save --> Done([Done])
```

## Sequence diagram

```mermaid
sequenceDiagram
  participant U as User
  participant E as Editor
  participant S as RustPad Server
  participant P as Preview
  U->>E: Type a change
  E->>P: Render locally
  E->>S: Send collaborative operation
  S-->>E: Acknowledge revision
  S-->>U: Saved state is updated
```

## Class diagram

```mermaid
classDiagram
  class Note {
    +String title
    +String content
    +render()
    +save()
  }
  class FileAttachment {
    +String filename
    +String mimeType
    +download()
  }
  Note "1" --> "0..*" FileAttachment
```

## State diagram

```mermaid
stateDiagram-v2
  [*] --> Connecting
  Connecting --> Online: authenticated
  Connecting --> Offline: network error
  Online --> Saving: local edit
  Saving --> Online: acknowledged
  Online --> Offline: connection lost
  Offline --> Connecting: retry
```

## Entity relationship diagram

```mermaid
erDiagram
  USER ||--o{ NOTE : owns
  NOTE ||--o{ FILE : contains
  NOTE ||--o{ REVISION : records
  USER ||--o{ REVISION : creates
  USER {
    string id
    string nickname
  }
  NOTE {
    string id
    string title
  }
```

## Pie chart

```mermaid
pie showData
  title Feature coverage
  "Markdown" : 35
  "Collaboration" : 25
  "Files and media" : 20
  "Sharing and history" : 20
```

## Git graph

```mermaid
gitGraph
  commit id: "initial note"
  branch feature
  checkout feature
  commit id: "add media"
  commit id: "add toolbar focus mode"
  checkout main
  merge feature id: "release"
```

---

# 16. Media and attachments {#media-and-attachments}

## External image using standard Markdown

![External placeholder image](https://placehold.co/640x240/png?text=RustPad+External+Image "External image title")

The external image depends on network access. Failure to load it should not break the rest of the preview.

## Uploaded image aliases

The following examples require `TEST_IMAGE.png` to exist in the note file list.

Default uploaded image:

[image=TEST_IMAGE.png,Default uploaded image]

Left-aligned uploaded image:

[image=TEST_IMAGE.png,Left aligned image,a=left]

Centered uploaded image:

[image=TEST_IMAGE.png,Centered image,a=center]

Right-aligned uploaded image:

[image=TEST_IMAGE.png,Right aligned image,a=right]

Explicitly sized image:

[image=TEST_IMAGE.png,Sized image,a=center,size=480x270]

The short `img` alias is also supported:

[img=TEST_IMAGE.png,Image using the img alias,a=left,size=320x180]

Click an uploaded image in Preview mode. The image tools should allow:

- automatic, left, center, and right alignment,
- width and height entry from 1 to 10000 pixels,
- applying an explicit size,
- resetting to natural dimensions,
- resizing by dragging the image handle,
- closing the tools with Escape or by clicking outside the image.

## Uploaded document and archive download aliases

[file=TEST_DOCUMENT.pdf,Download the test PDF]

[file=TEST_ARCHIVE.zip,Download the test ZIP archive]

A file alias should create a download link using the original uploaded file.

## Embedded uploaded video

The player alias must be the only content on its source line:

[video=TEST_VIDEO.mp4,Embedded uploaded video]

The player should expose native controls, play inline on mobile, preload metadata, support seeking through HTTP Range requests, and offer a fallback download link if playback fails.

## Uploaded video as an ordinary playback link

This alias is intentionally inline, so it should render as a normal link rather than an embedded player: [video=TEST_VIDEO.mp4,Open the uploaded video].

## Uploaded video as a forced download

[file=TEST_VIDEO.mp4,Download the original test video]

## YouTube watch URL

A standalone YouTube URL should become an embedded privacy-enhanced player:

https://www.youtube.com/watch?v=dQw4w9WgXcQ

## YouTube short URL with a custom title

[Custom YouTube player title](https://youtu.be/dQw4w9WgXcQ)

YouTube playback requires network access. The fallback should remain a safe external link.

---

# 17. Preview editing tests

The following content is intentionally simple so it can be edited directly in Preview mode.

## Editable heading example

Click this paragraph in Preview mode and replace a few words. Press Enter to commit the edit.

> Click this blockquote in Preview mode and edit it.

- Click this list item text and edit it without removing its bullet.
- [ ] Click this task checkbox, then edit the task label separately.

| Editable column A | Editable column B |
| --- | --- |
| Click this cell | Edit this value |

Preview editing controls to verify:

- click a rendered heading, paragraph, quote, list item, or table cell to edit it,
- press Enter to save the active preview line,
- press Alt+Enter to insert a new source line and continue editing,
- press Escape once to switch the active line to raw Markdown source,
- press Escape again while raw source is active to cancel and rerender,
- use Arrow Up and Arrow Down to move between editable preview lines,
- select text in Preview and use Bold, Italic, Strikethrough, Link, or another toolbar action,
- select preview text and press Backspace/Delete to remove it,
- cut selected preview text with Ctrl/Cmd+X,
- use Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z to undo and redo changes.

---

# 18. Scroll synchronization stress test

Use **Split view**. Scroll the editor and preview independently, then drag either pane to the bottom. Both panes should reach their true final position without stopping early.

## Long section A

RustPad should keep the editor and rendered preview aligned even when the source and rendered content have different heights. Code blocks, tables, alerts, lists, diagrams, images, and collapsed sections all produce different visual heights, so synchronization should use relative document progress rather than assume that one source line always has one fixed preview height.

## Long section B

This paragraph intentionally contains enough text to wrap across many lines on a phone. It tests the relationship between editor scroll height, preview scroll height, viewport dimensions, font size, compact mode, toolbar focus mode, and responsive layout. Change the font from Mono to System, Serif, Arial, and Georgia, then repeat the scroll test at sizes 14, 16, 18, 20, and 22.

## Long section C

1. Scroll to approximately 25 percent.
2. Scroll to approximately 50 percent.
3. Scroll to approximately 75 percent.
4. Scroll all the way to the final marker.
5. Toggle between Edit, Split, and Preview without losing the approximate reading position.
6. Toggle Markdown/Text mode and verify that the reading position remains sensible.
7. Collapse and expand the toolbar and verify that the workspace grows or shrinks without a large scroll jump.

## Long task block for checkbox stability

- [ ] Checkbox stability test 01
- [ ] Checkbox stability test 02
- [x] Checkbox stability test 03
- [ ] Checkbox stability test 04
- [x] Checkbox stability test 05
- [ ] Checkbox stability test 06
- [ ] Checkbox stability test 07
- [x] Checkbox stability test 08
- [ ] Checkbox stability test 09
- [ ] Checkbox stability test 10
- [x] Checkbox stability test 11
- [ ] Checkbox stability test 12

Click these checkboxes while the block is near the middle or bottom of the preview. The preview should not jump to a different vertical position.

---

# 19. Editor toolbar checklist

Test every visible toolbar control:

- **Bold** — wraps or unwraps the selection with `**`.
- **Italic** — wraps or unwraps the selection with `*`.
- **Strikethrough** — wraps or unwraps the selection with `~~`.
- **H1, H2, H3, H4** — adds or removes the matching heading prefix.
- **Bullet list** — adds or removes `- ` on all selected lines.
- **Numbered list** — numbers all selected lines.
- **Task list** — adds or removes `- [ ] `.
- **Quote** — adds or removes `> `.
- **Link** — inserts `[description](https://)`.
- **Emoji** — searches and inserts emoji.
- **More → Collapsible section** — inserts `<details>` and `<summary>`.
- **More → Table of contents** — inserts `[TOC]`.
- **More → Success/Info/Warning/Danger alert** — inserts the selected alert block.
- **More → Inline code** — wraps text with backticks.
- **More → Code block** — inserts a fenced text block.
- **More → Code block with line numbers** — inserts a fence using `text=`.
- **More → Mermaid diagram** — inserts a Mermaid flowchart template.
- **More → Table** — inserts a two-column table template.
- **More → Footnote** — inserts a reference and definition.
- **More → Definition** — inserts a definition-list pair.
- **More → Highlight** — wraps text with `==`.
- **More → Subscript** — wraps text with `~`.
- **More → Superscript** — wraps text with `^`.
- **More → Horizontal rule** — inserts `---` on separate lines.
- **Upload** — opens the file picker.

Test the toolbar with:

- no selection,
- a single-word selection,
- a multi-line selection,
- a selection made inside Preview mode,
- the cursor at the beginning, middle, and end of the note.

---

# 20. Upload and file-dialog checklist

## General upload behavior

- Click **Upload** and upload an image, video, document, and archive.
- Paste an image or file from the clipboard into the editor.
- Confirm that upload progress, success, failure, and retry states are understandable.
- Confirm that uploaded files appear in **Files** and in the footer file count.
- Confirm that file size, MIME type, upload time, and attachment state are displayed.
- Remove an alias from the note and verify that the file becomes marked as removed from content rather than disappearing automatically.

## Non-video file actions

For an image, PDF, or archive, verify these actions where applicable:

- **Link** — shows the direct file URL.
- **Alias** — shows RustPad attachment alias code.
- **Markdown** — shows standard Markdown image or link code.
- **Add to note** — inserts the recommended code at the cursor.
- **Copy** — copies generated code.
- **Delete** — permanently deletes the file after confirmation when allowed.

## Video file actions

When uploading a video, verify the insertion-choice dialog:

- **Embedded player** inserts `[video=...]` on its own line.
- **Download link** inserts `[file=...]`.
- Cancel closes the dialog without uploading or inserting.

In the file list verify:

- **Link** — shows the direct playback URL.
- **Player code** — shows `[video=...]`.
- **Download code** — shows `[file=...]`.
- **Add player** — inserts an embedded player block.
- **Add download** — inserts a download link.
- **Delete** — removes the uploaded video after confirmation when allowed.

---

# 21. View, mode, and workspace checklist

## View switch

- **Edit** displays the source editor.
- **Split** displays editor and preview together.
- **Preview** displays the rendered document.
- Switching views should preserve the approximate scroll position.
- In narrow landscape layouts, the compact view switch should remain usable.

## Markdown/Text mode

- **Markdown** renders all supported syntax, diagrams, highlighting, files, images, video, and YouTube.
- **Text** displays every source line literally.
- The preview label should change to describe the active mode.
- Switching modes should not alter the stored note content.

## Toolbar focus mode

- Collapse the toolbar using the chevron button.
- The entire toolbar row should stop taking workspace height.
- Only the expand button and Edit/Split/Preview switch should remain in a subtle floating position.
- The chevron should use the full clickable button area.
- Reload the note and confirm that the collapsed state is restored for the same user and note.
- Open another note and verify that its state can be different.

## Editor appearance

Test every font family:

- Mono
- System
- Serif
- Arial
- Georgia

Test every font size:

- 14
- 16
- 18
- 20
- 22

Toggle:

- **Editor lines**
- **Preview lines**
- **Compact**
- **Line links**

When **Line links** is enabled, click a line number and verify that a URL pointing to that exact line is copied. Open the URL in another tab and verify that the linked line is revealed and highlighted.

---

# 22. Keyboard shortcut checklist

Use Ctrl on Windows/Linux and Cmd on macOS.

- Ctrl/Cmd+Z — undo.
- Ctrl/Cmd+Shift+Z — redo.
- Ctrl/Cmd+Y — alternative redo where supported.
- Ctrl/Cmd+B — bold.
- Ctrl/Cmd+I — italic.
- Ctrl/Cmd+Shift+X — strikethrough.
- Ctrl/Cmd+K — link.
- Ctrl/Cmd+Shift+7 — numbered list.
- Ctrl/Cmd+Shift+8 — bullet list.
- Ctrl/Cmd+Shift+9 — task list.
- Alt+1 — H1.
- Alt+2 — H2.
- Alt+3 — H3.
- Alt+4 — H4.
- Tab — indent by two spaces.
- Shift+Tab — remove indentation.

Open the **Shortcuts** dialog and verify that the displayed list matches the working behavior.

---

# 23. Collaboration, authorship, and presence checklist

Open the same note in two browser sessions using different nicknames.

- Type in both sessions and verify live collaborative updates.
- Verify that changes are saved automatically.
- Disconnect one session, make edits, reconnect, and verify recovery or resynchronization.
- Check the connection status, latency, jitter, uptime, reconnect count, client identifier, and last event.
- Verify the interruption notice and automatic reconnect behavior.
- Confirm that the participant count and participant list update.
- Send chat messages in both directions.
- Verify unread chat badges when chat is closed.
- Verify that chat links are clickable.
- Verify that chat messages disappear after disconnect as described by the interface.

Authorship controls:

- Change the current user color.
- Restore the global profile color.
- Toggle authorship colors when permitted.
- Switch between **Simple** and **Full** authorship display when permitted.
- Verify participant badges and author-colored content.
- Confirm that read-only users cannot change content, tasks, files, or protected global authorship settings.

---

# 24. Sharing, access, and published-page checklist

## Current note link

- Click **Copy link**.
- Click the note title/link area if it is also configured as a copy action.
- Open the copied URL in a private window.
- Verify that the encoded view and mode state are sensible.

## Password and access

- Set a note or workspace password of at least eight characters.
- Open the protected note without a saved access token.
- Enter an incorrect password and verify the error.
- Enter the correct password and verify the granted access level.
- Test full and read-only sharing where available.

## Published page

In **Page options**:

- enable or disable the published page,
- enable **Editable tasks**,
- enable or disable **Unprotect Page** when allowed,
- open the page and verify that its link is copied,
- confirm that the published page renders Markdown, Mermaid, highlighted code, images, files, video, and YouTube,
- confirm that ordinary text is read-only,
- when Editable tasks is enabled, click a public task checkbox and verify that the source note updates,
- disable Editable tasks and verify that public checkboxes become read-only,
- disable the page and confirm that the published URL is no longer available.

---

# 25. History checklist

- Make several distinct edits and allow them to save.
- Open **History**.
- Verify author, timestamp, short content preview, and revision ordering.
- Expand a revision preview.
- Restore an older revision.
- Verify that the restored content is synchronized to other active sessions.
- Verify that undo/redo still behaves sensibly after ordinary local edits.

---

# 26. Mobile interface checklist

Test at widths around 320 px, 344 px, 375 px, 390 px, and 600 px.

- The header should not create horizontal page scrolling.
- Long titles and labels should wrap or truncate with an ellipsis.
- Toolbar actions should remain usable without overlapping.
- The Upload action should be visible and clearly named.
- Edit/Split/Preview controls should fit or use compact labels.
- The collapsed-toolbar controls should remain reachable.
- The editor and preview should use the available height.
- Tables, code blocks, media, and long links should scroll internally or wrap without widening the page.
- Image controls should remain usable.
- Video and YouTube players should fit the viewport.
- The mobile quick-action bubble should be draggable and remember its position.
- The quick-action bubble should open Files, editor options, color, chat, and connection diagnostics.
- Mobile font, size, line-number, preview-line, compact, and line-link controls should mirror desktop settings.
- Chat should open as a mobile panel and close when clicking outside.

---

# 27. Theme and profile-related visual test

Switch between the Dark and Light interface themes in the user profile.

Verify that:

- editor surfaces and text remain readable,
- Mermaid uses the matching light or dark theme after rerendering,
- syntax highlighting remains readable,
- alerts, tables, code blocks, links, tasks, images, media controls, dialogs, and focus indicators have sufficient contrast,
- the selected editor color and authorship colors remain distinguishable.

---

# 28. Final bottom-of-document checks {#final-checks}

This section must be reachable at the true bottom of both the editor and preview.

- [ ] The editor reaches the final source line.
- [ ] The preview reaches the final rendered line.
- [ ] Split-view synchronization reaches 100 percent in both directions.
- [ ] Clicking this checkbox does not jump upward.
- [ ] Edit/Split/Preview switching preserves the approximate position.
- [ ] Markdown/Text switching preserves the content.
- [ ] Collapsing the toolbar increases the workspace height.
- [ ] Reloading restores personal editor settings.
- [ ] Uploaded image controls work.
- [ ] Uploaded video playback and download work.
- [ ] YouTube playback or its fallback link works.
- [ ] Mermaid diagrams render.
- [ ] Highlight.js styles code blocks.
- [ ] Direct preview editing works.
- [ ] Collaboration, chat, history, and sharing checks pass.

**FINAL SOURCE MARKER — if this line is fully visible in the editor, source scrolling works.**

The renderer appends collected footnotes after the ordinary document content. Scroll past them until the final generated footnote marker.[^final-bottom]

[Return to the top](#rustpad-complete-test)

[^final-bottom]: **FINAL RENDERED BOTTOM MARKER — if this footnote and its return arrow are fully visible, preview scrolling reached the true bottom.**