f2ac91cfe6
The render mode previously only accepted file paths, requiring the investigate command to use curl as a workaround (which broke relative CSS/image resolution). Now --render accepts URLs directly via BrowserUrl::parse + NetworkStack::load_sync, using the correct base URL for resource resolution. The investigate command is simplified to a single --render call. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
76 lines
3.1 KiB
Markdown
76 lines
3.1 KiB
Markdown
Investigate rendering issues for the website at: $ARGUMENTS
|
|
|
|
Follow these steps:
|
|
|
|
## Step 1: Render the page
|
|
|
|
Run the rendering pipeline directly with the URL to generate layout tree dump, display list dump, and a PNG screenshot:
|
|
```
|
|
rm -rf /tmp/rb-investigate && mkdir -p /tmp/rb-investigate
|
|
cargo run -p app_browser -- --render "$URL" --output-dir /tmp/rb-investigate --png
|
|
```
|
|
|
|
Then list the output directory to discover the stem used for output files:
|
|
```
|
|
ls /tmp/rb-investigate/
|
|
```
|
|
|
|
## Step 2: Gather all artifacts
|
|
|
|
Read all of these files (using the stem discovered above):
|
|
- `/tmp/rb-investigate/{stem}.html` — the raw HTML/CSS source
|
|
- `/tmp/rb-investigate/{stem}.layout.txt` — the layout tree dump
|
|
- `/tmp/rb-investigate/{stem}.dl.txt` — the display list dump
|
|
- `/tmp/rb-investigate/{stem}.png` — the rendered screenshot
|
|
|
|
## Step 3: Analyze for rendering bugs
|
|
|
|
Carefully analyze the HTML/CSS source, layout tree, display list, and screenshot together. Look for the following categories of issues:
|
|
|
|
### Missing or unsupported CSS properties
|
|
- Identify CSS properties used in the page's stylesheets or inline styles that the engine may not support
|
|
- Check for modern CSS features (grid, custom properties, transforms, animations, transitions, etc.)
|
|
- Note any `@`-rules that may be ignored (e.g., `@font-face`, `@keyframes`, `@supports`)
|
|
|
|
### Layout issues
|
|
- Elements with zero width or height that shouldn't be (collapsed boxes)
|
|
- Content overflowing its container when it shouldn't
|
|
- Incorrect stacking or overlapping elements
|
|
- Missing or incorrect margins, padding, or borders
|
|
- Inline elements not wrapping properly
|
|
- Flex/grid children not positioned correctly
|
|
- Floats not clearing or wrapping around properly
|
|
- Absolutely/fixed positioned elements in wrong locations
|
|
|
|
### Display list issues
|
|
- Missing text that should be visible
|
|
- Missing backgrounds or borders
|
|
- Incorrect colors or font sizes
|
|
- Clipping regions that may be cutting off content
|
|
- Z-ordering issues (elements painted in wrong order)
|
|
|
|
### HTML parsing issues
|
|
- Elements that may not be in the correct DOM position
|
|
- Missing implicit elements (html, head, body)
|
|
- Incorrectly nested elements
|
|
|
|
### Image issues
|
|
- Images that failed to load or decode
|
|
- Images with incorrect dimensions
|
|
|
|
## Step 4: Produce findings report
|
|
|
|
Output a structured report with:
|
|
|
|
1. **Page summary**: What the page is trying to render (brief description)
|
|
2. **Screenshot assessment**: What the rendered output looks like vs what it should look like
|
|
3. **Findings**: An ordered list of bugs/issues, each with:
|
|
- **Category**: (CSS Support | Layout | Display | Parsing | Image | Other)
|
|
- **Severity**: (High | Medium | Low) — based on visual impact
|
|
- **Description**: What's wrong
|
|
- **Evidence**: Specific lines from the layout dump, display list, or CSS that demonstrate the issue
|
|
- **Suggested fix**: Which crate/module would need changes and a brief description of what to implement
|
|
4. **Summary stats**: Count of issues by severity
|
|
|
|
Focus on actionable findings that would improve rendering fidelity. Don't report issues with JavaScript-dependent content (we don't execute JS).
|