change-transform-origin-property.html (834B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Change transform-origin 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: rotate(90deg); 11 transform-origin: 100px 100px; 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.transformOrigin = '50px 50px'; 30 document.documentElement.removeAttribute('class'); 31 }); 32 }); 33 </script>