clip-path-svg-invalidate.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-svg-invalidate.html - WPT Dashboard Interop Dashboard

<!doctype html>

<html class="reftest-wait">

<title>Clip Path: invalidate composited clip-path via SVG</title>

<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">

<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">

<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">

<link rel="match" href="clip-path-svg-invalidate-ref.html">

<script src="/common/reftest-wait.js"></script>

<style>

  body {

    margin: 0;

  div {

    height: 500px;

    background: black;

    clip-path: url(#clip);

    will-change: transform;

  svg {

    width: 0;

    height: 0;

</style>

<div></div>

<svg viewBox="0 0 1 1">

  <clipPath id="clip" clipPathUnits="objectBoundingBox">

    <polygon points="0,0 0.5,0.5 1,0" />

  </clipPath>

</svg>

<script>

  const polygon = document.querySelector("polygon");

  const points = "0,0 0.5,1 1,0";

  requestAnimationFrame(() => requestAnimationFrame(() => {

      polygon.setAttribute("points", points);

      takeScreenshot();

  }));

</script>