Skip to content

Commit fe872d4

Browse files
theodorejbtheodorejb
committed
Switch to CSS animations for hero background
This allows Playwright to automatically disable the animations for stable screenshot testing.
1 parent 1b25551 commit fe872d4

3 files changed

Lines changed: 46 additions & 7 deletions

File tree

‎playwright.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ export default defineConfig({
1414
workers: process.env.CI ? 1 : undefined,
1515
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
1616
reporter: 'html',
17+
expect: {
18+
toHaveScreenshot: {
19+
animations: 'disabled',
20+
},
21+
},
1722
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
1823
use: {
1924
/* Base URL to use in actions like `await page.goto('/')`. */

‎src/Themes/ReleasePage.php‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@ public static function getHeroSection(
3636

3737
return <<<HTML
3838
<section class="hero">
39-
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="hero-bg">
39+
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="hero-bg" aria-hidden="true">
4040
<defs>
41-
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(210, 203, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
42-
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(133, 109, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
43-
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5"><animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(210, 203, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
41+
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><stop offset="0%" stop-color="rgba(210, 203, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
42+
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><stop offset="0%" stop-color="rgba(133, 109, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
43+
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5"><stop offset="0%" stop-color="rgba(210, 203, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
4444
</defs>
45-
<rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)"><animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform></rect>
46-
<rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)"><animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite"></animateTransform></rect>
47-
<rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)"><animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite"></animate><animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite"></animateTransform></rect>
45+
<g class="hero-orb-1-x"><g class="hero-orb-1-y"><rect width="100%" height="100%" fill="url(#Gradient1)" class="hero-orb-1-r"></rect></g></g>
46+
<g class="hero-orb-2-x"><g class="hero-orb-2-y"><rect width="100%" height="100%" fill="url(#Gradient2)" class="hero-orb-2-r"></rect></g></g>
47+
<g class="hero-orb-3-x"><g class="hero-orb-3-y"><rect width="100%" height="100%" fill="url(#Gradient3)" class="hero-orb-3-r"></rect></g></g>
4848
</svg>
4949
5050
<!-- hero background pattern -->

‎styles/php85.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -900,6 +900,40 @@ a {
900900
position: absolute
901901
}
902902

903+
.hero-orb-1-x,
904+
.hero-orb-1-y,
905+
.hero-orb-1-r,
906+
.hero-orb-2-x,
907+
.hero-orb-2-y,
908+
.hero-orb-2-r,
909+
.hero-orb-3-x,
910+
.hero-orb-3-y,
911+
.hero-orb-3-r {
912+
transform-box: view-box;
913+
transform-origin: 50% 50%
914+
}
915+
916+
.hero-orb-1-x { animation: hero-orb1-x 10s linear infinite alternate }
917+
.hero-orb-1-y { animation: hero-orb1-y 10.5s linear infinite alternate }
918+
.hero-orb-1-r { animation: hero-orb-rotate-fwd 7s linear infinite }
919+
920+
.hero-orb-2-x { animation: hero-orb2-x 11.5s linear infinite alternate }
921+
.hero-orb-2-y { animation: hero-orb2-y 12s linear infinite alternate }
922+
.hero-orb-2-r { animation: hero-orb-rotate-fwd 12s linear infinite }
923+
924+
.hero-orb-3-x { animation: hero-orb3-x 12.5s linear infinite alternate }
925+
.hero-orb-3-y { animation: hero-orb3-y 6s linear infinite alternate }
926+
.hero-orb-3-r { animation: hero-orb-rotate-rev 9s linear infinite }
927+
928+
@keyframes hero-orb1-x { from { transform: translateX(25%) } to { transform: translateX(0%) } }
929+
@keyframes hero-orb1-y { from { transform: translateY(0%) } to { transform: translateY(25%) } }
930+
@keyframes hero-orb2-x { from { transform: translateX(-25%) } to { transform: translateX(0%) } }
931+
@keyframes hero-orb2-y { from { transform: translateY(0%) } to { transform: translateY(50%) } }
932+
@keyframes hero-orb3-x { from { transform: translateX(0%) } to { transform: translateX(25%) } }
933+
@keyframes hero-orb3-y { from { transform: translateY(0%) } to { transform: translateY(25%) } }
934+
@keyframes hero-orb-rotate-fwd { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
935+
@keyframes hero-orb-rotate-rev { from { transform: rotate(360deg) } to { transform: rotate(0deg) } }
936+
903937
.hero-badge {
904938
margin-bottom: calc(var(--spacing) * 6);
905939
background-color: #ffffffa6;

0 commit comments

Comments
 (0)