52 lines
2 KiB
JavaScript
52 lines
2 KiB
JavaScript
// 🧪 CSS 12: Testsuite für Transitions, Transforms & Keyframes
|
|
|
|
const styleContent = Array.from(document.querySelectorAll("style")).map(s => s.textContent).join("\n");
|
|
|
|
// TEST: 1. Transition auf .interactive-card
|
|
assert.ok(
|
|
document.querySelector(".interactive-card"),
|
|
".interactive-card muss im HTML existieren"
|
|
);
|
|
assert.ok(
|
|
/\.interactive-card\s*\{[^}]*transition\s*:\s*[^;]*(transform|box-shadow)/i.test(styleContent),
|
|
".interactive-card muss eine Transition für 'transform' oder 'box-shadow' besitzen"
|
|
);
|
|
|
|
// TEST: 2. Hover-Zustand mit Transform & Box-Shadow
|
|
assert.ok(
|
|
/\.interactive-card:hover\s*\{[^}]*transform\s*:\s*translateY\(-8px\)/i.test(styleContent) &&
|
|
/\.interactive-card:hover\s*\{[^}]*transform\s*:\s*[^;]*scale\(1\.02\)/i.test(styleContent),
|
|
".interactive-card:hover muss 'transform: translateY(-8px) scale(1.02)' besitzen"
|
|
);
|
|
assert.ok(
|
|
/\.interactive-card:hover\s*\{[^}]*box-shadow\s*:/i.test(styleContent),
|
|
".interactive-card:hover muss einen erweiterten 'box-shadow' erhalten"
|
|
);
|
|
|
|
// TEST: 3. Keyframes Pulse & .live-dot Animation
|
|
assert.ok(
|
|
/@keyframes\s+pulse\s*\{/i.test(styleContent),
|
|
"@keyframes pulse muss im CSS definiert sein"
|
|
);
|
|
assert.ok(
|
|
/\.live-dot\s*\{[^}]*animation\s*:\s*pulse\s+2s\s+infinite/i.test(styleContent),
|
|
".live-dot muss 'animation: pulse 2s infinite ease-in-out' besitzen"
|
|
);
|
|
|
|
// TEST: 4. Keyframes Float & .floating-badge Animation
|
|
assert.ok(
|
|
/@keyframes\s+float\s*\{/i.test(styleContent),
|
|
"@keyframes float muss im CSS definiert sein"
|
|
);
|
|
assert.ok(
|
|
/\.floating-badge\s*\{[^}]*animation\s*:\s*float\s+4s\s+infinite/i.test(styleContent),
|
|
".floating-badge muss 'animation: float 4s infinite ease-in-out' besitzen"
|
|
);
|
|
|
|
// TEST: 5. Barrierefreiheit mit prefers-reduced-motion
|
|
assert.ok(
|
|
/@media\s*\(\s*prefers-reduced-motion\s*:\s*reduce\s*\)/i.test(styleContent),
|
|
"Media Query '@media (prefers-reduced-motion: reduce)' muss im Stylesheet definiert sein"
|
|
);
|
|
|
|
console.log("✅ Alle 5 Transitions & Keyframe Tests für Modul 12 erfolgreich bestanden!");
|