*

1 files changed, 234 insertions, 0 deletions

diff --git a/html/ccc/index.html b/html/ccc/index.html
index 9e805e3..2b3b0cd 100644
--- a/html/ccc/index.html
+++ b/html/ccc/index.html
@@ -263,6 +263,240 @@
                 box.style.display = hideFails ? "none" : "block";
             });
         }
+
+        function runContrastTests() {
+            const testCases = [
+                {
+                    color1: '#000000',
+                    color2: '#FFFFFF',
+                    expectedRatio: 21,  // Black on White should be ~21:1
+                    description: 'Black on White - Maximum Contrast'
+                },
+                {
+                    color1: '#000000',
+                    color2: '#000000',
+                    expectedRatio: 1,   // Same colors should be 1:1
+                    description: 'Same Colors - Minimum Contrast'
+                },
+                {
+                    color1: '#000',
+                    color2: 'rgb(255, 255, 255)',
+                    expectedRatio: 21,
+                    description: 'Short hex vs RGB - Should match black on white'
+                },
+                {
+                    color1: 'rgba(0, 0, 0, 1)',
+                    color2: '#FFFFFF',
+                    expectedRatio: 21,
+                    description: 'RGBA vs Hex - Should match black on white'
+                },
+                {
+                    color1: 'rgba(0, 0, 0, 0.5)',
+                    color2: '#FFFFFF',
+                    expectedRatio: 3.95,  // Corrected value based on WCAG formula
+                    description: 'Semi-transparent black on white'
+                },
+                {
+                    color1: '#777777',
+                    color2: '#FFFFFF',
+                    expectedRatio: 4.48,  // Common gray on white
+                    description: 'Gray on White - Just below AA'
+                },
+                {
+                    color1: '#565656',
+                    color2: '#FFFFFF',
+                    expectedRatio: 7.34,
+                    description: 'Dark Gray on White - AAA level'
+                },
+                {
+                    color1: '#FF0000',
+                    color2: '#FFFFFF',
+                    expectedRatio: 3.99,
+                    description: 'Red on White'
+                },
+                {
+                    color1: 'rgba(0, 0, 0, 0.8)',
+                    color2: '#FFFFFF',
+                    expectedRatio: 12.63,
+                    description: '80% transparent black on white'
+                },
+                {
+                    color1: '#FFFFFF',
+                    color2: '#FFFFFE',
+                    expectedRatio: 1.0,
+                    description: 'Nearly identical colors'
+                },
+                {
+                    color1: 'rgba(0, 0, 0, 0.001)',
+                    color2: '#FFFFFF',
+                    expectedRatio: 1.0,
+                    description: 'Nearly transparent color'
+                },
+                {
+                    color1: '#808080',
+                    color2: '#FFFFFF',
+                    expectedRatio: 3.95,
+                    description: '50% gray on white'
+                },
+                {
+                    color1: '#FFFFFF',
+                    color2: '#000000',
+                    expectedRatio: 21,
+                    description: 'White on Black - Should match Black on White'
+                }
+            ];
+
+            function runTestGroup(tests) {
+                let groupResults = {
+                    total: tests.length,
+                    passed: 0,
+                    failed: 0,
+                    details: []
+                };
+
+                tests.forEach(test => {
+                    const actualRatio = parseFloat(getContrastRatio(test.color1, test.color2).toFixed(2));
+                    const expectedRatio = parseFloat(test.expectedRatio.toFixed(2));
+                    const difference = Math.abs(actualRatio - expectedRatio);
+                    const passed = difference <= 0.1;
+
+                    groupResults.details.push({
+                        description: test.description,
+                        passed,
+                        expected: expectedRatio,
+                        actual: actualRatio,
+                        difference
+                    });
+
+                    if (passed) groupResults.passed++;
+                    else groupResults.failed++;
+                });
+
+                // Log results in a table format
+                console.table(groupResults.details);
+                
+                return groupResults;
+            }
+
+            // Group tests by category
+            console.group('Running Contrast Ratio Tests');
+            
+            console.group('Basic Contrast Tests');
+            const basicResults = runTestGroup(testCases.filter(t => !t.color1.includes('rgba')));
+            console.groupEnd();
+            
+            console.group('Transparency Tests');
+            const transparencyResults = runTestGroup(testCases.filter(t => t.color1.includes('rgba')));
+            console.groupEnd();
+
+            console.groupEnd();
+
+            // Return combined results
+            return {
+                total: basicResults.total + transparencyResults.total,
+                passed: basicResults.passed + transparencyResults.passed,
+                failed: basicResults.failed + transparencyResults.failed
+            };
+        }
+
+        function runValidationTests() {
+            const invalidCases = [
+                {
+                    input: 'not-a-color',
+                    expectedError: 'Unsupported color format'
+                },
+                {
+                    input: '#GGG',
+                    expectedError: 'Invalid hex color format'
+                },
+                {
+                    input: 'rgb(256,0,0)',
+                    expectedError: 'RGB values must be between 0 and 255'
+                },
+                {
+                    input: 'rgba(0,0,0,1.1)',
+                    expectedError: 'Alpha value must be between 0 and 1'
+                }
+            ];
+
+            console.group('Running Validation Tests');
+            
+            let results = {
+                total: invalidCases.length,
+                passed: 0,
+                failed: 0
+            };
+            
+            invalidCases.forEach(test => {
+                try {
+                    parseColor(test.input);
+                    console.error(`❌ FAILED: Expected error for "${test.input}"`);
+                    results.failed++;
+                } catch (error) {
+                    if (error.message.includes(test.expectedError)) {
+                        console.log(`✅ PASSED: Correctly rejected "${test.input}"`);
+                        results.passed++;
+                    } else {
+                        console.error(`❌ FAILED: Wrong error for "${test.input}"`);
+                        console.error(`   Expected: ${test.expectedError}`);
+                        console.error(`   Got: ${error.message}`);
+                        results.failed++;
+                    }
+                }
+            });
+
+            console.groupEnd();
+            return results;
+        }
+
+        function createTestUI() {
+            const testSection = document.createElement('section');
+            testSection.innerHTML = `
+                <div class="test-controls">
+                    <h2>Test Suite</h2>
+                    <button onclick="runContrastTests()">Run Contrast Tests</button>
+                    <button onclick="runValidationTests()">Run Validation Tests</button>
+                    <button onclick="runAllTests()">Run All Tests</button>
+                    <div id="test-results"></div>
+                </div>
+            `;
+            
+            // Add some styles
+            const style = document.createElement('style');
+            style.textContent = `
+                .test-controls {
+                    margin: 20px 0;
+                    padding: 20px;
+                    border: 1px solid #ccc;
+                    border-radius: 4px;
+                }
+                .test-controls button {
+                    margin: 0 10px 10px 0;
+                }
+                #test-results {
+                    margin-top: 20px;
+                    font-family: monospace;
+                }
+            `;
+            
+            document.head.appendChild(style);
+            document.querySelector('main').appendChild(testSection);
+        }
+
+        function runAllTests() {
+            const contrastResults = runContrastTests();
+            const validationResults = runValidationTests();
+            
+            const resultsDiv = document.getElementById('test-results');
+            resultsDiv.innerHTML = `
+                <h3>Test Results</h3>
+                <p>Contrast Tests: ${contrastResults.passed}/${contrastResults.total} passed</p>
+                <p>Validation Tests: ${validationResults.passed}/${validationResults.total} passed</p>
+            `;
+        }
+
+        // Initialize test UI when page loads
+        window.addEventListener('load', createTestUI);
     </script>
 </body>
 </html>