# Blog CSS Testing Checklist

**Last Updated:** 2026-01-18

Comprehensive testing checklist for verifying CSS optimizations on blog pages.

## Automated Tests

### CSS Loading Verification

Run the automated test script:

```bash
php v2/scripts/blog/test-css-visual.php https://www.ordio.com
```

Or for local testing:

```bash
php v2/scripts/blog/test-css-visual.php http://localhost:8003
```

**Checks:**
- ✅ HTTP 200 status codes
- ✅ CSS file is loaded (`blog.min.css`)
- ✅ CSS is versioned (`?v=timestamp`)
- ✅ Blog classes are present in HTML

## Manual Visual Testing

### 1. Single Post Page

**Test URLs:**
- `https://www.ordio.com/insights/ratgeber/arbeitsschutzvorschriften-im-gesundheitswesen/`
- `https://www.ordio.com/insights/lexikon/leitfaden-zur-finanzbuchhaltung/`
- `https://www.ordio.com/insights/inside-ordio/ordio-in-neuem-design/`

**Visual Checks:**
- [ ] Post header displays correctly (title, featured image, category badge)
- [ ] Featured image maintains aspect ratio (16:9)
- [ ] Post content is readable (proper font sizes, line heights)
- [ ] Tables display correctly (breakout on desktop, scrollable on mobile)
- [ ] Embeds/iframes display correctly (YouTube, videos, etc.)
- [ ] Images within content are properly sized
- [ ] Lists (ul, ol) display with correct styling
- [ ] Nested lists (ul ul ul, ol ol ol) have correct markers
- [ ] Table of contents (TOC) displays correctly
- [ ] Related posts section displays correctly
- [ ] Category navigation displays correctly
- [ ] Breadcrumbs display correctly

**Interactive Checks:**
- [ ] TOC links scroll to correct sections
- [ ] Image lightbox opens on click
- [ ] Related post cards are clickable
- [ ] Category links work correctly
- [ ] Hover effects work (post cards, buttons, links)

### 2. Category Archive Page

**Test URLs:**
- `https://www.ordio.com/insights/lexikon/`
- `https://www.ordio.com/insights/ratgeber/`
- `https://www.ordio.com/insights/inside-ordio/`

**Visual Checks:**
- [ ] Category hero section displays correctly
- [ ] Post cards display in grid layout
- [ ] Post card images maintain aspect ratio (16:9)
- [ ] Post card titles are readable (not truncated incorrectly)
- [ ] Category badges display correctly
- [ ] Pagination displays correctly
- [ ] Filter buttons display correctly

**Interactive Checks:**
- [ ] Post cards are clickable
- [ ] Pagination links work
- [ ] Filter buttons filter posts correctly
- [ ] Hover effects work on post cards

### 3. Blog Index Page

**Test URL:**
- `https://www.ordio.com/insights/`

**Visual Checks:**
- [ ] Hero section displays correctly
- [ ] Featured posts section displays correctly
- [ ] Category cards display correctly
- [ ] Post grid displays correctly
- [ ] All sections have proper spacing

**Interactive Checks:**
- [ ] Category cards are clickable
- [ ] Featured post cards are clickable
- [ ] Filter buttons work correctly

### 4. Responsive Breakpoints

**Test at different viewport sizes:**

**Mobile (375px - 639px):**
- [ ] Post header stacks vertically
- [ ] Featured image is full width
- [ ] Post content is readable (not too small)
- [ ] Tables scroll horizontally
- [ ] Embeds don't overflow
- [ ] Post cards stack vertically
- [ ] Navigation is accessible

**Tablet (640px - 1023px):**
- [ ] Post header displays correctly
- [ ] Featured image maintains aspect ratio
- [ ] Post cards display in 2-column grid
- [ ] Tables display correctly
- [ ] Embeds display correctly

**Desktop (1024px+):**
- [ ] Post header displays correctly
- [ ] Featured image breaks out of content width
- [ ] Tables break out of content width
- [ ] Embeds break out of content width (if applicable)
- [ ] Post cards display in 3-column grid
- [ ] All spacing is correct

### 5. Interactive Elements

**Test all interactive components:**

- [ ] **Post Cards:**
  - Hover effect (shadow, transform)
  - Image zoom on hover
  - Click functionality

- [ ] **Table of Contents:**
  - Links scroll to sections
  - Active item highlighting
  - Smooth scrolling

- [ ] **Image Lightbox:**
  - Opens on image click
  - Displays full-size image
  - Closes on click outside or ESC

- [ ] **Category Navigation:**
  - Active category highlighting
  - Hover effects
  - Click functionality

- [ ] **Pagination:**
  - Links work correctly
  - Active page highlighting
  - Hover effects

- [ ] **Filter Buttons:**
  - Filter posts correctly
  - Active state styling
  - Hover effects

### 6. Alpine.js Components

**Verify Alpine.js components work:**

- [ ] Blog index filter (Alpine.js filtering)
- [ ] Category navigation (Alpine.js active state)
- [ ] TOC scroll tracking (Alpine.js)
- [ ] Image lightbox (Alpine.js modal)
- [ ] Demo booking modals (Alpine.js)

### 7. Performance Testing

**Run PageSpeed Insights:**

```bash
# Using API (requires API key)
php v2/scripts/blog/analyze-blog-performance.php
```

**Check:**
- [ ] LCP (Largest Contentful Paint) < 2.5s
- [ ] FID (First Input Delay) < 100ms
- [ ] CLS (Cumulative Layout Shift) < 0.1
- [ ] PageSpeed Score > 90 (mobile and desktop)

**Compare before/after:**
- [ ] CSS file size reduced or maintained
- [ ] No increase in render-blocking CSS
- [ ] No increase in unused CSS

### 8. Browser Compatibility

**Test in multiple browsers:**

- [ ] **Chrome** (latest)
- [ ] **Firefox** (latest)
- [ ] **Safari** (latest)
- [ ] **Edge** (latest)

**Check for:**
- [ ] Visual consistency across browsers
- [ ] No CSS rendering issues
- [ ] Interactive elements work correctly
- [ ] No console errors

## Common Issues to Watch For

### After CSS Optimizations

1. **Missing Styles:**
   - Check if any styles are missing after consolidation
   - Verify media queries still work
   - Check if responsive breakpoints work

2. **Layout Shifts:**
   - Check for CLS (Cumulative Layout Shift)
   - Verify images have explicit dimensions
   - Check if embeds maintain aspect ratio

3. **Broken Interactions:**
   - Verify hover effects work
   - Check if click handlers work
   - Verify Alpine.js components initialize

4. **Performance Regressions:**
   - Check CSS file size
   - Verify CSS is minified
   - Check if CSS is cached properly

## Testing Scripts

### Automated CSS Loading Test

```bash
php v2/scripts/blog/test-css-visual.php https://www.ordio.com
```

### Performance Analysis

```bash
php v2/scripts/blog/analyze-blog-performance.php
```

### Unused CSS Detection

```bash
php v2/scripts/blog/detect-unused-css.php
```

## Reporting Issues

If you find any visual regressions or issues:

1. **Document the issue:**
   - Page URL
   - Browser and version
   - Viewport size
   - Screenshot (if possible)
   - Steps to reproduce

2. **Check CSS:**
   - Verify CSS file is loading
   - Check browser console for errors
   - Verify CSS is minified correctly

3. **Compare with backup:**
   - Check `docs/backups/blog-css-backup-2026-01-18.css`
   - Compare before/after styles
   - Identify what changed

## Next Steps

After completing all tests:

1. ✅ Document any issues found
2. ✅ Fix any critical issues
3. ✅ Re-test after fixes
4. ✅ Update optimization report
5. ✅ Deploy to production