Elements

graph TD; %% REQVIRE-AUTOGENERATED-DIAGRAM %% Graph styling classDef userRequirement fill:#D1C4E9,stroke:#7E57C2,stroke-width:2px; classDef systemRequirement fill:#E1D8EE,stroke:#673AB7,stroke-width:1.5px; classDef verification fill:#DCEDC8,stroke:#4CAF50,stroke-width:2px; classDef folder fill:#FAFAFA,stroke:#9E9E9E,stroke-width:3px; classDef file fill:#FFF8E1,stroke:#FFCA28,stroke-width:2px; classDef default fill:#F5F5F5,stroke:#424242,stroke-width:1.5px; subgraph 7b06d045a68fb066["📁 requirements/Interfaces/WebInterface/Verifications"] subgraph 1002260922c26344["📄 HTMLGenerationVerifications.md"] cd4d13fa425c5ad["Component Reuse Verification"]; class cd4d13fa425c5ad verification; click cd4d13fa425c5ad "HTMLGenerationVerifications.html#component-reuse-verification"; 73786e8c37d9673f["HTML Validity Verification"]; class 73786e8c37d9673f verification; click 73786e8c37d9673f "HTMLGenerationVerifications.html#html-validity-verification"; 79ec057500b741e["Integration Test Verification"]; class 79ec057500b741e verification; click 79ec057500b741e "HTMLGenerationVerifications.html#integration-test-verification"; 3d80dd755086873a["Mobile Responsiveness Verification"]; class 3d80dd755086873a verification; click 3d80dd755086873a "HTMLGenerationVerifications.html#mobile-responsiveness-verification"; 6c8b966ffd2cffc4["Responsive Design Verification"]; class 6c8b966ffd2cffc4 verification; click 6c8b966ffd2cffc4 "HTMLGenerationVerifications.html#responsive-design-verification"; end end effc979c2c2475cf["test.sh"]; class effc979c2c2475cf default; click effc979c2c2475cf "../../../../tests/test-html-generation/test.sh"; 73786e8c37d9673f -->|satisfiedBy| effc979c2c2475cf; 79ec057500b741e -->|satisfiedBy| effc979c2c2475cf; 3d80dd755086873a -->|satisfiedBy| effc979c2c2475cf; 6c8b966ffd2cffc4 -->|satisfiedBy| effc979c2c2475cf;

Component Reuse Verification

Test verifies components are reused across pages without duplication.

Details

Test Procedure:

  1. Analyze generated HTML files
  2. Verify navigation component appears identically in all pages
  3. Count instances of duplicated code blocks
  4. Measure total generated HTML size

Pass Criteria:

  • Navigation HTML identical across all pages (except nav_prefix)
  • Zero duplication of CSS styles across pages (external stylesheet)
  • Total HTML size reduced by ≥50% compared to old template system
  • Source code organized in component modules

Metadata

  • type: analysis-verification

Relations

HTML Validity Verification

Test verifies generated HTML is valid and well-formed.

Details

Test Procedure:

  1. Generate all HTML pages
  2. Validate HTML using W3C validator or similar
  3. Check for:
    • Proper DOCTYPE declaration
    • Valid HTML5 structure
    • Closed tags
    • Valid attributes
    • No duplicate IDs

Pass Criteria:

  • All pages pass W3C HTML5 validation
  • No HTML parsing errors
  • Maud-generated HTML is well-formed

Metadata

  • type: test-verification

Relations

Integration Test Verification

Test verifies all 7 generated pages work correctly together.

Details

Test Procedure:

  1. Generate all 7 pages: index.html, model.html, traces.html, traceflow.html, coverage.html, resources.html, + spec file
  2. Verify each page contains:
    • Correct title
    • Navigation menu with 6 links
    • Expected content sections
  3. Test relative links:
    • From root: nav_prefix = “”
    • From requirements/: nav_prefix = “../”
    • From requirements/System/: nav_prefix = “../../”
  4. Verify visualizations load:
    • Mermaid diagrams render
    • D3 Sunburst/Icicle renders
    • D3 Sankey renders
  5. Test navigation between pages

Pass Criteria:

  • All 7 pages generate without errors
  • All pages contain required content sections
  • Relative links resolve correctly from all nesting levels
  • All visualizations load and display properly
  • Navigation links functional from all pages

Metadata

  • type: test-verification

Relations

Mobile Responsiveness Verification

Test verifies HTML documentation is usable on mobile devices.

Details

Test Procedure:

  1. Generate all 7 HTML pages (index, model, traces, traceflow, coverage, resources, + spec file)
  2. Test on Chrome DevTools device emulation:
    • iPhone SE (375px)
    • iPad (768px)
    • Desktop (1920px)
  3. Verify navigation menu:
    • Desktop: Horizontal menu visible
    • Mobile: Hamburger menu functional
  4. Verify content readability:
    • No horizontal scrolling
    • Text legible without zooming
    • Touch targets ≥ 44px

Pass Criteria:

  • All pages render without horizontal scroll on all viewport sizes
  • Navigation menu adapts correctly (hamburger on mobile, horizontal on desktop)
  • All interactive elements accessible via touch on mobile

Metadata

  • type: test-verification

Relations

Responsive Design Verification

Test verifies responsive breakpoints and Tailwind CSS integration.

Details

Test Procedure:

  1. Generate all HTML pages
  2. Take screenshots at breakpoints: 320px, 640px, 768px, 1024px, 1920px
  3. Compare screenshots to expected layouts (visual regression)
  4. Verify CSS classes applied correctly:
    • Mobile-only classes (md:hidden)
    • Desktop-only classes (hidden md:flex)
    • Responsive spacing (px-4 md:px-8)

Pass Criteria:

  • Screenshots match expected layouts at all breakpoints
  • No layout breaks or overlapping elements
  • Tailwind utility classes present in generated HTML
  • Custom Reqvire theme colors applied

Metadata

  • type: test-verification

Relations