Video with svg clip

Demonstrating webkit bug https://bugs.webkit.org/show_bug.cgi?id=200381

by David Iglesias

HTML

<video crossorigin="anonymous" width="300" height="300">
  <source src="https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4">
</video>
<div id="ref"></div>
<svg width="0" height="0">
  <defs>
    <clipPath id="a">
      <path d="M 150 0 L 300 300 L 0 300"/>
    </clipPath>
  </defs>
</svg>

CSS

video { object-fit: fill; }
video, #ref {
  width: 300px; height: 300px;
  background: green;
  -webkit-clip-path: url(#a);
  clip-path: url(#a);
}