set-composited-layer-position.html (936B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Setting composited layer position paints properly</title> 5 <link rel="author" href="masonf@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view-1/"> 7 <link rel="match" href="set-composited-layer-position-ref.html"> 8 9 <div id="box"></div> 10 <div id="tomove"></div> 11 <style> 12 div { 13 position: absolute; 14 top: 0; 15 left: 0; 16 will-change: transform; 17 width: 200px; 18 height: 200px; 19 } 20 #box { 21 background: red; 22 } 23 #tomove { 24 background: green; 25 top: 200px; 26 left: 200px; 27 filter: invert(0); 28 } 29 </style> 30 <script> 31 window.onload = function() { 32 requestAnimationFrame(function() { 33 requestAnimationFrame(function() { 34 tomove = document.getElementById("tomove"); 35 tomove.style.top = 0; 36 tomove.style.left = 0; 37 document.documentElement.classList.remove("reftest-wait"); 38 }); 39 }); 40 } 41 </script> 42 </html>