|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Property Test: Theme Consistency</title>
|
|
|
<link rel="stylesheet" href="../static/css/design-tokens.css">
|
|
|
<style>
|
|
|
body {
|
|
|
font-family: 'Inter', sans-serif;
|
|
|
background: #0f172a;
|
|
|
color: #f1f5f9;
|
|
|
padding: 2rem;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
.test-container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.test-header {
|
|
|
border-bottom: 2px solid rgba(99, 102, 241, 0.3);
|
|
|
padding-bottom: 1rem;
|
|
|
margin-bottom: 2rem;
|
|
|
}
|
|
|
.test-section {
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 1rem;
|
|
|
padding: 1.5rem;
|
|
|
margin-bottom: 1.5rem;
|
|
|
}
|
|
|
.test-result {
|
|
|
padding: 1rem;
|
|
|
border-radius: 0.5rem;
|
|
|
margin: 0.5rem 0;
|
|
|
}
|
|
|
.test-pass {
|
|
|
background: rgba(16, 185, 129, 0.1);
|
|
|
border-left: 4px solid #10b981;
|
|
|
color: #34d399;
|
|
|
}
|
|
|
.test-fail {
|
|
|
background: rgba(239, 68, 68, 0.1);
|
|
|
border-left: 4px solid #ef4444;
|
|
|
color: #f87171;
|
|
|
}
|
|
|
.test-info {
|
|
|
background: rgba(59, 130, 246, 0.1);
|
|
|
border-left: 4px solid #3b82f6;
|
|
|
color: #60a5fa;
|
|
|
}
|
|
|
.property-list {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
|
gap: 0.5rem;
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
.property-item {
|
|
|
background: rgba(255, 255, 255, 0.03);
|
|
|
padding: 0.5rem;
|
|
|
border-radius: 0.25rem;
|
|
|
font-family: monospace;
|
|
|
font-size: 0.875rem;
|
|
|
}
|
|
|
.contrast-test {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 1rem;
|
|
|
padding: 1rem;
|
|
|
margin: 0.5rem 0;
|
|
|
border-radius: 0.5rem;
|
|
|
}
|
|
|
.color-swatch {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
border-radius: 0.5rem;
|
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
.summary {
|
|
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
|
|
|
border: 2px solid rgba(99, 102, 241, 0.3);
|
|
|
border-radius: 1rem;
|
|
|
padding: 2rem;
|
|
|
text-align: center;
|
|
|
margin-top: 2rem;
|
|
|
}
|
|
|
.summary h2 {
|
|
|
margin: 0 0 1rem 0;
|
|
|
font-size: 2rem;
|
|
|
}
|
|
|
code {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
padding: 0.2rem 0.4rem;
|
|
|
border-radius: 0.25rem;
|
|
|
font-family: monospace;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="test-container">
|
|
|
<div class="test-header">
|
|
|
<h1>🧪 Property-Based Test: Theme Consistency</h1>
|
|
|
<p><strong>Feature:</strong> admin-ui-modernization, Property 1</p>
|
|
|
<p><strong>Validates:</strong> Requirements 1.4, 5.3, 14.3</p>
|
|
|
<p><strong>Property:</strong> For any theme mode (light/dark), all CSS custom properties should be defined and color contrast ratios should meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text)</p>
|
|
|
</div>
|
|
|
|
|
|
<div id="test-results"></div>
|
|
|
|
|
|
<div class="summary" id="summary"></div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const WCAG_AA_NORMAL_TEXT = 4.5;
|
|
|
const WCAG_AA_LARGE_TEXT = 3.0;
|
|
|
|
|
|
|
|
|
const REQUIRED_PROPERTIES = [
|
|
|
'color-primary', 'color-accent', 'color-success', 'color-warning', 'color-error',
|
|
|
'bg-primary', 'bg-secondary', 'text-primary', 'text-secondary',
|
|
|
'glass-bg', 'glass-border', 'border-color',
|
|
|
'gradient-primary', 'gradient-glass',
|
|
|
'font-family-primary', 'font-size-base', 'font-weight-normal',
|
|
|
'line-height-normal', 'letter-spacing-normal',
|
|
|
'spacing-xs', 'spacing-sm', 'spacing-md', 'spacing-lg', 'spacing-xl',
|
|
|
'shadow-sm', 'shadow-md', 'shadow-lg',
|
|
|
'blur-sm', 'blur-md', 'blur-lg',
|
|
|
'transition-fast', 'transition-base', 'ease-in-out'
|
|
|
];
|
|
|
|
|
|
|
|
|
const CONTRAST_TESTS = [
|
|
|
{ text: 'text-primary', bg: 'bg-primary', name: 'Primary Text on Primary Background' },
|
|
|
{ text: 'text-secondary', bg: 'bg-primary', name: 'Secondary Text on Primary Background' },
|
|
|
{ text: 'text-primary', bg: 'bg-secondary', name: 'Primary Text on Secondary Background' }
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getLuminance(r, g, b) {
|
|
|
const [rs, gs, bs] = [r, g, b].map(c => {
|
|
|
c = c / 255;
|
|
|
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
|
});
|
|
|
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getContrastRatio(color1, color2) {
|
|
|
const lum1 = getLuminance(color1.r, color1.g, color1.b);
|
|
|
const lum2 = getLuminance(color2.r, color2.g, color2.b);
|
|
|
const lighter = Math.max(lum1, lum2);
|
|
|
const darker = Math.min(lum1, lum2);
|
|
|
return (lighter + 0.05) / (darker + 0.05);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function parseColor(colorStr) {
|
|
|
const div = document.createElement('div');
|
|
|
div.style.color = colorStr;
|
|
|
document.body.appendChild(div);
|
|
|
const computed = window.getComputedStyle(div).color;
|
|
|
document.body.removeChild(div);
|
|
|
|
|
|
const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
|
|
if (match) {
|
|
|
return {
|
|
|
r: parseInt(match[1]),
|
|
|
g: parseInt(match[2]),
|
|
|
b: parseInt(match[3])
|
|
|
};
|
|
|
}
|
|
|
return null;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getCSSProperty(propertyName, theme = 'dark') {
|
|
|
const testElement = document.createElement('div');
|
|
|
testElement.setAttribute('data-theme', theme);
|
|
|
document.body.appendChild(testElement);
|
|
|
|
|
|
const value = window.getComputedStyle(testElement).getPropertyValue(`--${propertyName}`).trim();
|
|
|
|
|
|
document.body.removeChild(testElement);
|
|
|
return value;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function testRequiredProperties() {
|
|
|
const results = {
|
|
|
dark: { defined: [], missing: [] },
|
|
|
light: { defined: [], missing: [] }
|
|
|
};
|
|
|
|
|
|
['dark', 'light'].forEach(theme => {
|
|
|
REQUIRED_PROPERTIES.forEach(prop => {
|
|
|
const value = getCSSProperty(prop, theme);
|
|
|
if (value && value !== '') {
|
|
|
results[theme].defined.push(prop);
|
|
|
} else {
|
|
|
results[theme].missing.push(prop);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
return results;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function testContrastRatios() {
|
|
|
const results = {
|
|
|
dark: [],
|
|
|
light: []
|
|
|
};
|
|
|
|
|
|
['dark', 'light'].forEach(theme => {
|
|
|
CONTRAST_TESTS.forEach(test => {
|
|
|
const textColor = getCSSProperty(test.text, theme);
|
|
|
const bgColor = getCSSProperty(test.bg, theme);
|
|
|
|
|
|
if (textColor && bgColor) {
|
|
|
const textRgb = parseColor(textColor);
|
|
|
const bgRgb = parseColor(bgColor);
|
|
|
|
|
|
if (textRgb && bgRgb) {
|
|
|
const ratio = getContrastRatio(textRgb, bgRgb);
|
|
|
const passes = ratio >= WCAG_AA_NORMAL_TEXT;
|
|
|
|
|
|
results[theme].push({
|
|
|
name: test.name,
|
|
|
textColor,
|
|
|
bgColor,
|
|
|
textRgb,
|
|
|
bgRgb,
|
|
|
ratio: ratio.toFixed(2),
|
|
|
passes,
|
|
|
required: WCAG_AA_NORMAL_TEXT
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
return results;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function testThemeSwitching(iterations = 100) {
|
|
|
const failures = [];
|
|
|
|
|
|
for (let i = 0; i < iterations; i++) {
|
|
|
const theme = i % 2 === 0 ? 'dark' : 'light';
|
|
|
|
|
|
|
|
|
const propsToCheck = REQUIRED_PROPERTIES.slice(0, 5 + Math.floor(Math.random() * 5));
|
|
|
|
|
|
for (const prop of propsToCheck) {
|
|
|
const value = getCSSProperty(prop, theme);
|
|
|
if (!value || value === '') {
|
|
|
failures.push({
|
|
|
iteration: i + 1,
|
|
|
theme,
|
|
|
property: prop
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return failures;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function renderResults() {
|
|
|
const resultsContainer = document.getElementById('test-results');
|
|
|
let html = '';
|
|
|
let allPassed = true;
|
|
|
|
|
|
|
|
|
html += '<div class="test-section">';
|
|
|
html += '<h2>Test 1: Required CSS Custom Properties</h2>';
|
|
|
|
|
|
const propResults = testRequiredProperties();
|
|
|
|
|
|
['dark', 'light'].forEach(theme => {
|
|
|
const themeName = theme.charAt(0).toUpperCase() + theme.slice(1);
|
|
|
const passed = propResults[theme].missing.length === 0;
|
|
|
|
|
|
if (!passed) allPassed = false;
|
|
|
|
|
|
html += `<div class="test-result ${passed ? 'test-pass' : 'test-fail'}">`;
|
|
|
html += `<strong>${themeName} Theme:</strong> `;
|
|
|
|
|
|
if (passed) {
|
|
|
html += `✓ All ${propResults[theme].defined.length} required properties defined`;
|
|
|
} else {
|
|
|
html += `✗ Missing ${propResults[theme].missing.length} properties: `;
|
|
|
html += `<code>${propResults[theme].missing.join(', ')}</code>`;
|
|
|
}
|
|
|
|
|
|
html += '</div>';
|
|
|
});
|
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
html += '<div class="test-section">';
|
|
|
html += '<h2>Test 2: WCAG AA Contrast Ratios</h2>';
|
|
|
|
|
|
const contrastResults = testContrastRatios();
|
|
|
|
|
|
['dark', 'light'].forEach(theme => {
|
|
|
const themeName = theme.charAt(0).toUpperCase() + theme.slice(1);
|
|
|
html += `<h3>${themeName} Theme</h3>`;
|
|
|
|
|
|
contrastResults[theme].forEach(result => {
|
|
|
if (!result.passes) allPassed = false;
|
|
|
|
|
|
html += `<div class="contrast-test" style="background: ${result.bgColor}; color: ${result.textColor};">`;
|
|
|
html += `<div class="color-swatch" style="background: ${result.textColor};"></div>`;
|
|
|
html += `<div class="color-swatch" style="background: ${result.bgColor};"></div>`;
|
|
|
html += '<div>';
|
|
|
html += `<strong>${result.name}</strong><br>`;
|
|
|
html += `Ratio: <strong>${result.ratio}:1</strong> `;
|
|
|
html += result.passes
|
|
|
? '<span style="color: #34d399;">✓ PASS</span>'
|
|
|
: `<span style="color: #f87171;">✗ FAIL (required: ${result.required}:1)</span>`;
|
|
|
html += `<br><small>Text: ${result.textColor} | Background: ${result.bgColor}</small>`;
|
|
|
html += '</div>';
|
|
|
html += '</div>';
|
|
|
});
|
|
|
});
|
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
html += '<div class="test-section">';
|
|
|
html += '<h2>Test 3: Property-Based Theme Switching (100 iterations)</h2>';
|
|
|
|
|
|
const switchingFailures = testThemeSwitching(100);
|
|
|
const switchingPassed = switchingFailures.length === 0;
|
|
|
|
|
|
if (!switchingPassed) allPassed = false;
|
|
|
|
|
|
html += `<div class="test-result ${switchingPassed ? 'test-pass' : 'test-fail'}">`;
|
|
|
|
|
|
if (switchingPassed) {
|
|
|
html += '✓ All 100 random theme switches maintained property consistency';
|
|
|
} else {
|
|
|
html += `✗ Found ${switchingFailures.length} failures across 100 iterations<br>`;
|
|
|
html += '<small>First 5 failures:</small><br>';
|
|
|
switchingFailures.slice(0, 5).forEach(failure => {
|
|
|
html += `<small>Iteration ${failure.iteration} (${failure.theme}): Missing property <code>${failure.property}</code></small><br>`;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
html += '</div>';
|
|
|
html += '</div>';
|
|
|
|
|
|
resultsContainer.innerHTML = html;
|
|
|
|
|
|
|
|
|
const summary = document.getElementById('summary');
|
|
|
if (allPassed) {
|
|
|
summary.innerHTML = `
|
|
|
<h2 style="color: #34d399;">✓ ALL TESTS PASSED</h2>
|
|
|
<p>Theme consistency property is satisfied.</p>
|
|
|
<p>All CSS custom properties are properly defined and contrast ratios meet WCAG AA standards.</p>
|
|
|
`;
|
|
|
summary.style.background = 'linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2))';
|
|
|
summary.style.borderColor = 'rgba(16, 185, 129, 0.3)';
|
|
|
} else {
|
|
|
summary.innerHTML = `
|
|
|
<h2 style="color: #f87171;">✗ SOME TESTS FAILED</h2>
|
|
|
<p>Theme consistency property is NOT satisfied.</p>
|
|
|
<p>Please review the failures above and update the design tokens accordingly.</p>
|
|
|
`;
|
|
|
summary.style.background = 'linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(236, 72, 153, 0.2))';
|
|
|
summary.style.borderColor = 'rgba(239, 68, 68, 0.3)';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', renderResults);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
