| <!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> |
