change-perspective-property.html (822B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Change perspective 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 width: 10px; 10 height: 10px; 11 background: red; 12 transform: translateZ(-10px); 13 } 14 #container { 15 width: 100px; 16 height: 100px; 17 background: green; 18 perspective: 100px; 19 perspective-origin: -10px -10px; 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 container.style.perspective = '1px'; 30 document.documentElement.removeAttribute('class'); 31 }); 32 }); 33 </script>