change-offset-path.html (849B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Change offset-path property</title> 4 <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> 5 <link rel="help" href="https://crbug.com/1365255"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 7 <style> 8 #target { 9 will-change: transform; 10 transform: translate(50px, 50px); 11 offset-path: path('M 0 0 L 200 200 Z'); 12 width: 100px; 13 height: 100px; 14 background: green; 15 } 16 #container { 17 width: 100px; 18 height: 100px; 19 background: red; 20 } 21 </style> 22 <p>Test passes if there is a filled green square.</p> 23 <div id="container"> 24 <div id="target"></div> 25 </div> 26 <script> 27 requestAnimationFrame(() => { 28 requestAnimationFrame(() => { 29 target.style.offsetPath = 'path(\'M 0 0 Z\')'; 30 document.documentElement.removeAttribute('class'); 31 }); 32 }); 33 </script>