25 lines
875 B
HTML
25 lines
875 B
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<title>Switch from one clip-path url() to another with the same bounds</title>
|
|
<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="reference/green-100x100.html">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<svg>
|
|
<clipPath id="circle">
|
|
<circle cx="50" cy="50" r="50"/>
|
|
</clipPath>
|
|
<clipPath id="rect">
|
|
<rect width="100" height="100"/>
|
|
</clipPath>
|
|
<rect width="100" height="100" fill="red"/>
|
|
<rect width="100" height="100" fill="green" id="target" clip-path="url(#circle)"/>
|
|
</svg>
|
|
<script>
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
document.getElementById('target').setAttribute('clip-path', 'url(#rect)');
|
|
takeScreenshot();
|
|
});
|
|
});
|
|
</script>
|