CGamesPlay · July 23, 2025 03:29
diff --git a/repro.html b/repro.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Safari Animation.commitStyles() CSP Bug</title>
    
    <!-- CSP that triggers the bug - style-src-attr 'self' only -->
    <meta http-equiv="Content-Security-Policy" content="style-src-attr 'self'">
    
    <!-- Workaround CSP - uncomment to demonstrate fix -->
    <!-- <meta http-equiv="Content-Security-Policy" content="style-src-attr 'self' 'unsafe-inline'"> -->
    
    <style>
        #testElement {
            width: 200px;
            height: 100px;
            background-color: red;
            border: 2px solid #333;
            border-radius: 8px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
    </style>
 </head>
 <body>
    <h1>Safari Animation.commitStyles() CSP Bug</h1>
    
    <p><strong>Bug:</strong> Animation.commitStyles() triggers CSP violation with <code>style-src-attr 'self'</code></p>
    
    <div id="testElement">
        Test
    </div>
    
    <div>
        <h3>What this test does:</h3>
        <ol>
            <li>Element starts RED (CSS background)</li>
            <li>Automatically animates from BLUE to GREEN</li>
            <li>Calls Animation.commitStyles() when animation finishes, causes CSP violation</li>
            <li>Calls Animation.cancel(), which visually shows that the commitStyles failed</li>
        </ol>
        
        <p><strong>To test workaround:</strong> Comment out the first CSP meta tag and uncomment the second one with 'unsafe-inline'</p>
    </div>

    <script>
        const testElement = document.getElementById('testElement');
        
        // Start the test automatically
        console.log('Starting animation: BLUE → GREEN');
        
        const animation = testElement.animate([
            { backgroundColor: 'blue' },
            { backgroundColor: 'green' },
        ], {
            duration: 2000,
            fill: 'forwards',
            easing: 'ease-in-out'
        });
        
        animation.addEventListener('finish', () => {
            console.log('Animation finished. Element should be GREEN.');
            
            setTimeout(() => {
                console.log('Calling commitStyles() - this should not trigger a CSP violation');
                animation.commitStyles();
                console.log('Calling cancel() - this should have no visual effect');
                animation.cancel();
            }, 500);
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Safari Animation.commitStyles() CSP Bug</title>

	<!-- CSP that triggers the bug - style-src-attr 'self' only -->
	<meta http-equiv="Content-Security-Policy" content="style-src-attr 'self'">

	<!-- Workaround CSP - uncomment to demonstrate fix -->
	<!-- <meta http-equiv="Content-Security-Policy" content="style-src-attr 'self' 'unsafe-inline'"> -->

	<style>
	#testElement {
	width: 200px;
	height: 100px;
	background-color: red;
	border: 2px solid #333;
	border-radius: 8px;
	margin: 20px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<h1>Safari Animation.commitStyles() CSP Bug</h1>

	<p><strong>Bug:</strong> Animation.commitStyles() triggers CSP violation with <code>style-src-attr 'self'</code></p>

	<div id="testElement">
	Test
	</div>

	<div>
	<h3>What this test does:</h3>
	<ol>
	<li>Element starts RED (CSS background)</li>
	<li>Automatically animates from BLUE to GREEN</li>
	<li>Calls Animation.commitStyles() when animation finishes, causes CSP violation</li>
	<li>Calls Animation.cancel(), which visually shows that the commitStyles failed</li>
	</ol>

	<p><strong>To test workaround:</strong> Comment out the first CSP meta tag and uncomment the second one with 'unsafe-inline'</p>
	</div>

	<script>
	const testElement = document.getElementById('testElement');

	// Start the test automatically
	console.log('Starting animation: BLUE → GREEN');

	const animation = testElement.animate([
	{ backgroundColor: 'blue' },
	{ backgroundColor: 'green' },
	], {
	duration: 2000,
	fill: 'forwards',
	easing: 'ease-in-out'
	});

	animation.addEventListener('finish', () => {
	console.log('Animation finished. Element should be GREEN.');

	setTimeout(() => {
	console.log('Calling commitStyles() - this should not trigger a CSP violation');
	animation.commitStyles();
	console.log('Calling cancel() - this should have no visual effect');
	animation.cancel();
	}, 500);
	});
	</script>
	</body>
	</html>