clip-path-scaled-video.html (1750B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta name="assert" content="There should be no hairline along the edges of clip-path bounding box"> 4 <link rel="help" href="https://drafts.fxtf.org/css-masking/#ClipPathElement"> 5 <link rel="help" href="https://crbug.com/1171601"> 6 <link rel="match" href="clip-path-scaled-video-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <body style="overflow: hidden"> 9 <p>Expect no hairlines below.</p> 10 <svg width="700" height="550"> 11 <!-- Clipping the video--> 12 <clipPath id="clip"> 13 <polygon points="100,100 250,250"/> 14 </clipPath> 15 <g clip-path="url(#clip)" transform="scale(0.112)"> 16 <foreignObject width="320" height="240"> 17 <video src="/media/test.webm" autoplay loop></video> 18 </foreignObject> 19 </g> 20 <g clip-path="url(#clip)" transform="scale(0.345)"> 21 <foreignObject width="320" height="240"> 22 <video src="/media/test.webm" autoplay loop></video> 23 </foreignObject> 24 </g> 25 <g clip-path="url(#clip)" transform="scale(0.778)"> 26 <foreignObject width="320" height="240"> 27 <video src="/media/test.webm" autoplay loop></video> 28 </foreignObject> 29 </g> 30 <g clip-path="url(#clip)" transform="scale(0.912)"> 31 <foreignObject width="320" height="240"> 32 <video src="/media/test.webm" autoplay loop></video> 33 </foreignObject> 34 </g> 35 <g clip-path="url(#clip)" transform="scale(1.678)"> 36 <foreignObject width="320" height="240"> 37 <video src="/media/test.webm" autoplay loop></video> 38 </foreignObject> 39 </g> 40 <g clip-path="url(#clip)" transform="scale(3.333)"> 41 <foreignObject width="320" height="240"> 42 <video src="/media/test.webm" oncanplaythrough="takeScreenshot()" autoplay loop></video> 43 </foreignObject> 44 </g> 45 </svg> 46 </body>