View All Attachments for Bug 215458

Attachment #406529
Testcase	text/html	2020-08-13 12:22:47 PDT	2.65 KB	no flags	Details

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Regression with clip-path and transforms</title>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, width=device-width, viewport-fit=cover">
		<style>
			body {background-color: #fff; color: #000; font-family: Helvetica;}

			.ClipPathOverflowHidden {overflow: hidden; width: 200px; height: 200px; clip-path: url(#MaskTest); background-color: #000;}

			.InnerGradient {width: 400px; height: 400px; background-image: linear-gradient(#dd3939 0%, #ffc342 50%, #74ff42 100%);}

			.WithTransform {transform: translate(-100px, -200px);}

			.WithTransition {transition: transform 1s ease;}
			.WithTransition:hover {transform: translate(50px, 50px);}
		</style>
	</head>
	<body>
		<svg width="0" height="0" id="FDMask">
			<defs>
			    <clipPath id="MaskTest" clipPathUnits="objectBoundingBox" transform="scale(0.005, 0.005)">
					<path d="M114.02,12.088c0,32.02-.379,52.1-1.894,68.207,9.853,40.735,39.219,70.1,80.711,83.933l-17.809,22.925a2.927,2.927,0,0,1-2.273,1.327,5.378,5.378,0,0,1-2.274-.758c-31.451-13.831-55.134-35.24-68.4-65.934C89.579,156.27,57.75,179.575,28.572,188.859a8.362,8.362,0,0,1-1.895.379,3.9,3.9,0,0,1-3.031-1.706L7.163,167.07c38.65-12.126,64.8-32.777,72.754-66.312,5.116-21.41,6.063-42.062,5.3-88.48l1.515-1.516h25.768ZM65.328,61.349l.189,2.274a159.951,159.951,0,0,1-21.788,44.713H41.455L20.994,95.453l-.19-1.706c9.473-13.262,15.157-25.2,20.083-40.355l2.463-.19Zm112.163-.758.379,1.895C168.586,82,163.281,90.337,153.429,103.031a3.952,3.952,0,0,1-3.221,1.895,4.653,4.653,0,0,1-2.842-.948L128.8,92.042a156.256,156.256,0,0,0,23.683-42.061l1.706-.379Z"/>
			    </clipPath>
			</defs>
		</svg>
		<p>The three divs below all have identical clip paths, a set width/height and overflow hidden, and a div inside with a gradient.</p>
		<div class="ClipPathOverflowHidden"><div class="InnerGradient"></div></div>
		<p>The one below has the inner gradient div transformed, which shouldn't impact the parent's clip path at all, but it does.  The behaviour is correct in Safari 13.1.2 (15609.3.5.1.3), but is no longer correct as of Safari Technology Preview 109/110 and presumably the beta of Safari 14 (but I can't install that at the moment to confirm).</p>
		<div class="ClipPathOverflowHidden"><div class="InnerGradient WithTransform"></div></div>
		<p>The div below is the same as the one above, but with a hover transition of the transform on the gradient div inside.  When you hover it and the transition is running, the clip path of the parent temporarily reverts to the correct shape/position.</p>
		<div class="ClipPathOverflowHidden"><div class="InnerGradient WithTransform WithTransition"></div></div>
	</body>
</html>