will-change-abspos-cb-dynamic-001.html (995B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: will-change: position turns an element in an abspos containing block when changed dynamically.</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499863"> 7 <link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> 8 <link rel="match" href="will-change-abspos-cb-001-ref.html"> 9 <style> 10 .container { 11 border: 1px solid green; 12 width: 100px; 13 height: 100px; 14 margin-top: 100px; 15 } 16 .abspos { 17 position: absolute; 18 top: 0; 19 left: 0; 20 background: orange; 21 height: 20px; 22 width: 20px; 23 } 24 </style> 25 <div class="container"> 26 <div class="abspos"></div> 27 </div> 28 <script> 29 onload = function() { 30 let container = document.querySelector(".container"); 31 container.offsetTop; 32 container.style.willChange = "position"; 33 } 34 </script>