Screenshot Edge Case Testing App

This Devvit app tests the ability to take screenshots of content rendered inside an iframe. It compares two popular screenshot libraries:

• html-to-image - Converts DOM to canvas using foreignObject
• html2canvas - Renders DOM to canvas by parsing styles

Purpose

Test screenshot libraries in a production Devvit environment to ensure they can accurately capture complex CSS features, modern color formats, Canvas/WebGL graphics, and various edge cases.

Tech Stack

• Devvit: Reddit's developer platform for immersive web apps
• Vite: For compiling the WebView
• React: For UI
• Hono: For backend logic
• TRPC: Type-safe RPCs from server to client
• Tailwind: For styles
• TypeScript: For type safety
• html-to-image & html2canvas: Screenshot libraries

Test Pages

The app contains 9 comprehensive test pages:

1. Gradients, Colors & Shadows

• Linear and radial gradients
• OKLCH/OKLAB modern color formats
• Box shadows, text shadows, drop shadows
• Advanced multi-layer shadows

2. Transforms & 3D

• 2D transforms: rotate, scale, skew, translate
• 3D transforms with preserve-3d
• Rotating 3D cubes
• Multiple transform combinations

3. Images & SVG

• Server-loaded images via tRPC (pattern for Reddit uploads)
• Data URI images (working within CSP)
• Inline SVG graphics
• SVG gradients (linear and radial)
• Complex SVG with opacity layers

4. Fonts & Text Effects

• Custom fonts and typography
• Text effects (shadows, glows, strokes, layered)
• Text decorations (underline, strikethrough, overline)
• Gradient text fill
• Multi-column text layouts

5. Canvas & WebGL

• Canvas 2D graphics
• Canvas-based bar charts
• WebGL 3D rendering

6. Filters & Advanced CSS

• CSS filters: blur, brightness, contrast, saturate, hue-rotate, grayscale, sepia
• Complex gradients: conic, repeating-linear, repeating-radial
• Blend modes: multiply, screen, overlay
• Backdrop filters

7. Layout & Positioning

• Overflow and scrollable content
• Absolute/fixed positioning
• Nested iframes (iframe inception)
• Z-index layering

8. Video & Audio

• Video elements with posters
• Audio player controls
• Media elements with various attributes
• Media in different layout contexts

9. PDF Embeds

• PDF via iframe, embed, and object tags (native - won't capture)
• Styled PDF containers with borders and shadows
• PDF scaling and sizing tests
• Fallback content rendering
• PDF.js with blob URLs (working solution but complex!)
• Demonstrates real pain point for Devvit developers

Getting Started

Make sure you have Node 22 downloaded on your machine before running!

# Install dependencies
npm install

# Build the project
npm run build

# Start local development server
npm run dev

# Deploy to Reddit
npm run deploy

# Publish for review
npm run launch

How to Use

1. Deploy the app to your test subreddit
2. Create a post using the app's menu item
3. Click "Start Testing" on the splash screen
4. Navigate through pages using Prev/Next buttons
5. Capture screenshots using:
   • 📷 html-to-image - Capture with html-to-image only
   • 📷 html2canvas - Capture with html2canvas only
   • 📷 Both - Capture with both libraries for comparison
6. Compare the screenshots side-by-side with the original content
7. Look for differences in:
   • Color accuracy (especially OKLCH/OKLAB)
   • Gradient rendering quality
   • Shadow effects
   • Transform accuracy
   • Canvas/WebGL content capture
   • Missing or blank content (iframes, images)
   • CSS filter effects

Commands

• npm run dev: Starts a development server for live development on Reddit
• npm run build: Builds client and server projects
• npm run deploy: Uploads a new version of your app
• npm run launch: Publishes your app for review
• npm run login: Logs your CLI into Reddit
• npm run type-check: Runs TypeScript type checking
• npm run lint: Lints your code
• npm run test: Runs tests

Known Challenges

Nested iframes

Most screenshot libraries cannot capture content inside nested iframes - they typically show a blank rectangle.

WebGL Content

GPU-rendered content may not transfer to screenshots or may appear blank.

CORS Images

External images without proper CORS headers may appear blank in screenshots.

3D Transforms

Complex 3D CSS (preserve-3d, perspective) may flatten or render incorrectly in screenshots.

Modern Color Formats

OKLCH/OKLAB colors may need preprocessing for canvas APIs, as they're not natively supported.

Backdrop Filters

Backdrop filters like backdrop-blur may not render correctly in screenshots.

Project Structure

src/
├── game.tsx              # Main app with screenshot capture logic
├── splash.tsx            # Landing page
├── pages/                # Test page components
│   ├── GradientsColors.tsx
│   ├── Transforms.tsx
│   ├── ImagesSvg.tsx
│   ├── FontsText.tsx
│   ├── CanvasWebgl.tsx
│   ├── FiltersAdvanced.tsx
│   ├── Layout.tsx
│   ├── Media.tsx
│   └── Pdf.tsx
├── server/               # Backend code
│   ├── index.ts
│   ├── trpc.ts
│   └── routes/
└── index.css             # Global styles

Known Issues & Solutions

Images (Page 3)

• Issue: External images (e.g., picsum.photos) are blocked by Devvit's CSP
• Solution: Use Reddit media upload API or data URIs (see IMAGE_UPLOAD_NOTES.md)
• Current: Pattern implemented with data URIs, ready for reddit.uploadMedia()

PDFs (Page 9)

• Issue: Native PDF embeds don't capture in screenshots
• Solution: PDF.js with blob URL conversion (implemented and working)

Other Known Limitations

• Video/audio elements show poster/controls, not playback
• WebGL content may appear black depending on library support
• Nested iframes typically show blank
• External fonts may not load before screenshot

See individual page documentation for detailed workarounds.

Testing Methodology

1. Visual comparison: Compare screenshots with original content
2. Feature detection: Check if specific CSS features render correctly
3. Cross-library comparison: Compare html-to-image vs html2canvas results
4. Performance metrics: Capture time is displayed for each library
5. Edge case validation: Test all identified edge cases systematically

Contributing

This is a test app for evaluating screenshot library capabilities. Feel free to add more edge cases or test scenarios.

License

BSD-3-Clause