Add Chromium bug reports for SVG rendering issues (Issue #17)

chromium-bug-reports/README.md

@@ -0,0 +1,77 @@
+# Chromium Bug Reports for RegularExpressions.Transformer
+
+This directory contains documentation and test cases for submitting bug reports to the Chromium project regarding SVG rendering issues discovered in the RegularExpressions.Transformer project.
+
+## Background
+
+The RegularExpressions.Transformer project's GitHub Pages site (https://linksplatform.github.io/RegularExpressions.Transformer/) contains interactive SVG diagrams that required workarounds for Chromium browser rendering issues. These workarounds were implemented in commits:
+
+- [89c4f13](https://github.com/linksplatform/RegularExpressions.Transformer/commit/89c4f13652d18cfda7179c381a0bbabf6931bdfa) - Stroke width scaled 10x larger
+- [7b29f0e](https://github.com/linksplatform/RegularExpressions.Transformer/commit/7b29f0ecd34dcab9ec2ce403c267ac8648b05653) - All sizes scaled up 10x  
+- [d7659aa](https://github.com/linksplatform/RegularExpressions.Transformer/commit/d7659aa139d828f5ba06bacc2c892b766799519c) - SVG images embedded directly instead of external files
+
+## Issues Identified
+
+### 1. Small SVG Elements Don't Render
+**Problem**: SVG elements with dimensions smaller than 0.5 pixels don't render in Chromium browsers, even when scaled up via CSS transforms.
+
+**Impact**: Forces developers to artificially scale up coordinates by 10x or more.
+
+**Files**: 
+- `bug-report-1-small-images.md` - Detailed bug report
+- `examples/small-image-test.html` - Test case demonstrating the issue
+
+### 2. SVG Alignment Issues with External Files  
+**Problem**: External SVG files referenced via `<image>` elements are incorrectly positioned compared to inline SVG content.
+
+**Impact**: Forces developers to embed all SVG content inline instead of using modular external files.
+
+**Files**:
+- `bug-report-2-svg-alignment.md` - Detailed bug report  
+- `examples/svg-alignment-test.html` - Test case showing misalignment
+- `examples/test-logo.svg` - Sample external SVG file for testing
+
+## Submission Instructions
+
+Follow the guide in `chromium-bug-submission-guide.md` to submit these bug reports to the Chromium project.
+
+**Quick Links**:
+- Chromium Issue Tracker: https://issues.chromium.org/issues
+- New Issue: https://crbug.com/new
+
+## Testing the Issues
+
+1. Open the test HTML files in different browsers:
+   - **Chrome/Edge**: Will show the bugs
+   - **Firefox/Safari**: Will show correct rendering
+
+2. Compare the differences to understand the issues
+
+3. Use these test cases when submitting bug reports
+
+## File Structure
+
+```
+chromium-bug-reports/
+├── README.md                           # This file
+├── chromium-bug-submission-guide.md   # Step-by-step submission guide
+├── bug-report-1-small-images.md       # Bug report for small elements issue
+├── bug-report-2-svg-alignment.md      # Bug report for alignment issue
+└── examples/
+    ├── small-image-test.html          # Test case for small elements
+    ├── svg-alignment-test.html        # Test case for alignment
+    └── test-logo.svg                  # Sample external SVG
+```
+
+## Next Steps
+
+1. Test the examples in multiple browsers to verify the issues
+2. Submit bug reports using the provided templates and guides
+3. Update this README with the Chromium issue numbers once submitted
+4. Monitor the bug reports for developer responses
+
+## References
+
+- Original issue: https://github.com/linksplatform/RegularExpressions.Transformer/issues/17
+- Project GitHub Pages: https://linksplatform.github.io/RegularExpressions.Transformer/
+- Chromium Bug Guidelines: https://www.chromium.org/for-testers/bug-reporting-guidelines/

chromium-bug-reports/bug-report-1-small-images.md

@@ -0,0 +1,39 @@
+# Chromium Bug Report #1: SVG Image Elements with Small Dimensions Don't Render
+
+## Summary
+SVG `<image>` elements with height or width less than 0.5 pixels do not render in Chromium-based browsers, even when the parent SVG is scaled up through CSS or viewport transformations.
+
+## Browser Information
+- Browser: Chromium (all versions tested)
+- Affected browsers: Chrome, Microsoft Edge, Opera
+- Non-affected browsers: Firefox, Safari
+
+## Expected Behavior
+SVG `<image>` elements should render regardless of their specified dimensions, as long as they are visible in the final rendered output after transformations and scaling.
+
+## Actual Behavior
+SVG `<image>` elements with dimensions smaller than 0.5 pixels are not rendered at all, even when the parent SVG container is scaled to make them visually larger than 0.5 pixels.
+
+## Impact
+This forces developers to use workarounds like scaling up all dimensions by a factor of 10 or more, which:
+- Makes code less intuitive and harder to maintain
+- Requires manual coordinate system conversion
+- May cause precision issues with very small or very large numbers
+- Breaks the natural 1:1 relationship between design specifications and code
+
+## Test Case
+See attached test files:
+- `small-image-test.html` - Demonstrates the issue
+- `comparison-browsers.html` - Shows how other browsers handle this correctly
+
+## Reproduction Steps
+1. Create an SVG with an `<image>` element having width/height < 0.5
+2. Place this SVG in a scaled container or viewport
+3. Observe that the image doesn't render in Chromium browsers
+4. Test the same code in Firefox/Safari to see it works correctly
+
+## Additional Notes
+This issue was discovered while developing interactive SVG diagrams for documentation. The workaround (10x scaling) is currently implemented in production at: https://linksplatform.github.io/RegularExpressions.Transformer/
+
+## Related Standards
+According to SVG specifications, there should be no minimum size limit for rendered elements, only for what's visually perceptible.

chromium-bug-reports/bug-report-2-svg-alignment.md

@@ -0,0 +1,45 @@
+# Chromium Bug Report #2: Incorrect SVG Alignment Inside Image Element
+
+## Summary
+When using external SVG files as sources for `<image>` elements within an SVG, the alignment and positioning of the SVG content is incorrect in Chromium browsers, causing visual misalignment compared to other browsers and the SVG specification.
+
+## Browser Information
+- Browser: Chromium (all versions tested)
+- Affected browsers: Chrome, Microsoft Edge, Opera  
+- Non-affected browsers: Firefox, Safari
+
+## Expected Behavior
+External SVG files used as `<image>` sources should be positioned and aligned according to the SVG specification, matching the behavior of other browsers and inline SVG content.
+
+## Actual Behavior
+External SVG files used as `<image>` sources are misaligned, appearing shifted or positioned incorrectly compared to:
+1. The same SVG content when embedded inline
+2. How the same code renders in Firefox and Safari
+3. Expected positioning according to SVG specifications
+
+## Impact
+This forces developers to:
+- Avoid external SVG files and inline all SVG content instead
+- Create larger HTML files with embedded SVG data
+- Lose benefits of SVG file caching and modularity
+- Implement workarounds that may affect performance
+
+## Test Case
+See attached test files:
+- `svg-alignment-test.html` - Demonstrates the alignment issue with external SVG files
+- `inline-vs-external-comparison.html` - Shows difference between inline and external SVG positioning
+
+## Reproduction Steps
+1. Create an SVG file with specific viewBox and content
+2. Reference this SVG as the `href` attribute of an `<image>` element within another SVG
+3. Compare the positioning with the same content embedded inline
+4. Test in Firefox/Safari to see correct behavior
+5. Test in Chromium to observe misalignment
+
+## Additional Notes
+This issue was discovered while creating interactive programming language logos for documentation. The current workaround involves embedding all SVG content directly in the HTML file instead of using external SVG files.
+
+Current production example (with workaround): https://linksplatform.github.io/RegularExpressions.Transformer/
+
+## Related Standards
+According to the SVG specification, external SVG files referenced via `<image>` elements should be positioned consistently with their inline equivalents.

chromium-bug-reports/chromium-bug-submission-guide.md

@@ -0,0 +1,126 @@
+# Chromium Bug Submission Guide
+
+## Overview
+This document provides instructions for submitting bug reports to the Chromium project for the two rendering issues discovered in the RegularExpressions.Transformer project.
+
+## Bug Reports to Submit
+
+### Bug #1: Small SVG Image Elements Don't Render
+- **File**: `bug-report-1-small-images.md`
+- **Test Case**: `examples/small-image-test.html`
+- **Priority**: Medium
+- **Component**: Blink>SVG
+
+### Bug #2: Incorrect SVG Alignment in Image Elements  
+- **File**: `bug-report-2-svg-alignment.md`
+- **Test Cases**: `examples/svg-alignment-test.html`, `examples/test-logo.svg`
+- **Priority**: Medium
+- **Component**: Blink>SVG
+
+## Submission Steps
+
+### Prerequisites
+1. Create a Google Account if you don't have one
+2. Verify the issues in the latest Chrome Canary build
+3. Test the issues in other browsers (Firefox, Safari) to confirm they're Chromium-specific
+
+### Step-by-Step Submission
+
+1. **Go to the Chromium Issue Tracker**
+   - Visit: https://issues.chromium.org/issues
+   - Or use the shortcut: https://crbug.com/new
+
+2. **Sign In**
+   - Click "Sign In" and use your Google Account
+
+3. **Create New Issue**
+   - Click "New Issue" or "Create Issue"
+
+4. **Fill Out the Form**
+
+   **For Bug #1 (Small Images):**
+   - **Summary**: "SVG image elements with dimensions < 0.5px don't render"
+   - **Component**: Blink>SVG
+   - **Priority**: P3 (Medium)
+   - **Type**: Bug
+   - **Description**: Copy content from `bug-report-1-small-images.md`
+   - **Attachments**: Upload `examples/small-image-test.html`
+
+   **For Bug #2 (SVG Alignment):**
+   - **Summary**: "Incorrect positioning of external SVG files in image elements"
+   - **Component**: Blink>SVG
+   - **Priority**: P3 (Medium)
+   - **Type**: Bug
+   - **Description**: Copy content from `bug-report-2-svg-alignment.md`
+   - **Attachments**: Upload `examples/svg-alignment-test.html` and `examples/test-logo.svg`
+
+5. **Additional Information to Include**
+   - **OS**: Your operating system
+   - **Browser Version**: Latest Chrome stable and Canary versions tested
+   - **Reproducible**: Yes
+   - **Frequency**: Always
+
+### Template Information for Each Bug
+
+#### Bug #1 Template:
+```
+Component: Blink>SVG
+Summary: SVG image elements with dimensions < 0.5px don't render
+Description: [Content from bug-report-1-small-images.md]
+Steps to reproduce:
+1. Create SVG with image element having width/height < 0.5px
+2. Open in Chrome
+3. Compare with Firefox/Safari
+Expected result: Image should render if visible after scaling
+Actual result: Image doesn't render at all
+```
+
+#### Bug #2 Template:
+```
+Component: Blink>SVG  
+Summary: Incorrect positioning of external SVG files in image elements
+Description: [Content from bug-report-2-svg-alignment.md]
+Steps to reproduce:
+1. Create external SVG file
+2. Reference in image element with specific x,y,width,height
+3. Compare positioning with inline SVG
+4. Test in Chrome vs Firefox/Safari
+Expected result: External SVG positioned same as inline
+Actual result: External SVG appears misaligned
+```
+
+## Post-Submission
+
+1. **Note the Issue Numbers**
+   - Save the bug report URLs for reference
+   - Update this repository with the issue numbers
+
+2. **Monitor Progress**
+   - Check for developer responses
+   - Provide additional information if requested
+   - Test proposed fixes when available
+
+3. **Update Documentation**
+   - Document the bug report numbers in the repository
+   - Update the pull request description with links to the Chromium issues
+
+## Important Notes
+
+- Be respectful and professional in all communications
+- Provide detailed reproduction steps and test cases
+- Be responsive if developers ask for clarification
+- Don't duplicate existing reports - search first
+- Keep descriptions focused and technical
+
+## Expected Timeline
+
+- **Initial Response**: 1-7 days
+- **Triage**: 1-4 weeks  
+- **Investigation**: Varies widely
+- **Fix**: Depends on complexity and priority
+
+## References
+
+- Chromium Bug Reporting Guidelines: https://www.chromium.org/for-testers/bug-reporting-guidelines/
+- Chromium Issue Tracker: https://issues.chromium.org/issues
+- SVG Specification: https://www.w3.org/TR/SVG2/

chromium-bug-reports/examples/small-image-test.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Chromium Bug: Small SVG Image Elements Don't Render</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .test-container { 
+            margin: 20px 0; 
+            border: 1px solid #ccc; 
+            padding: 10px; 
+            display: inline-block; 
+        }
+        .scaled-container { 
+            transform: scale(10); 
+            transform-origin: top left; 
+            margin: 50px; 
+        }
+        h2 { color: #333; }
+        .description { color: #666; margin-bottom: 10px; }
+    </style>
+</head>
+<body>
+    <h1>Test Case: SVG Image Elements with Small Dimensions</h1>
+
+    <h2>Test 1: Direct Small Image (Should NOT render in Chromium)</h2>
+    <div class="description">Circle with radius 0.25 - too small for Chromium</div>
+    <div class="test-container">
+        <svg width="200" height="200" viewBox="0 0 10 10">
+            <circle cx="5" cy="5" r="0.25" fill="red" stroke="black" stroke-width="0.02"/>
+            <text x="5" y="8" text-anchor="middle" font-size="0.5" fill="black">Small Circle</text>
+        </svg>
+    </div>
+
+    <h2>Test 2: Large Image (Should render in all browsers)</h2>
+    <div class="description">Circle with radius 2.5 - large enough for all browsers</div>
+    <div class="test-container">
+        <svg width="200" height="200" viewBox="0 0 10 10">
+            <circle cx="5" cy="5" r="2.5" fill="red" stroke="black" stroke-width="0.2"/>
+            <text x="5" y="8" text-anchor="middle" font-size="0.5" fill="black">Large Circle</text>
+        </svg>
+    </div>
+
+    <h2>Test 3: Small Image Scaled Up (Should render in Firefox/Safari, NOT in Chromium)</h2>
+    <div class="description">Small circle (r=0.25) scaled up 10x - should be visible but isn't in Chromium</div>
+    <div class="test-container">
+        <div class="scaled-container">
+            <svg width="20" height="20" viewBox="0 0 10 10">
+                <circle cx="5" cy="5" r="0.25" fill="blue" stroke="black" stroke-width="0.02"/>
+                <text x="5" y="8" text-anchor="middle" font-size="0.5" fill="black">Scaled Small</text>
+            </svg>
+        </div>
+    </div>
+
+    <div style="margin-top: 100px;">
+        <h2>Expected Results:</h2>
+        <ul>
+            <li><strong>Firefox/Safari:</strong> All three circles should be visible</li>
+            <li><strong>Chromium browsers:</strong> Only Test 2 (large circle) should be visible</li>
+        </ul>
+
+        <h2>Bug Description:</h2>
+        <p>Chromium browsers fail to render SVG elements with dimensions smaller than 0.5 pixels, 
+        even when those elements are scaled up via CSS transforms and should be visually larger 
+        than 0.5 pixels in the final rendered output.</p>
+
+        <p>This inconsistency with other browsers and the SVG specification forces developers 
+        to implement workarounds like pre-scaling all coordinates by a factor of 10 or more.</p>
+    </div>
+</body>
+</html>