paint-order-with-transform-change.html (843B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Changes to transform should not affect paint order</title> 4 <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> 5 <link rel="help" href="https://crbug.com/1267689"> 6 <link rel="match" href="paint-order-with-transform-change-ref.html"> 7 <style> 8 #bottom { 9 will-change: transform; 10 position: absolute; 11 top: 0; 12 left: 100px; 13 width: 100px; 14 height: 100px; 15 background: red; 16 } 17 #top { 18 position: absolute; 19 top: 0; 20 left: 0; 21 width: 100px; 22 height: 100px; 23 background: green; 24 } 25 </style> 26 <div id="bottom"></div> 27 <div id="top"></div> 28 <script> 29 requestAnimationFrame(() => { 30 requestAnimationFrame(() => { 31 bottom.style.transform = 'translate(-100px, 0px)'; 32 document.documentElement.removeAttribute('class'); 33 }); 34 }); 35 </script>