grid-positioned-item-dynamic-change-004.html (1108B)
1 <!DOCTYPE html> 2 <html lang=en class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> 6 <link rel="match" href="grid-positioned-item-dynamic-change-004-ref.html"> 7 <meta name="assert" content="This test checks that positioned items can be dynamically changed."> 8 <style> 9 #grid { 10 display: grid; 11 width: 100px; 12 height: 100px; 13 position: relative; 14 border: solid; 15 grid-template: 50px 50px / 50px 50px; 16 } 17 18 #abspos { 19 position: absolute; 20 top: 0px; 21 left: 10px; 22 grid-area: 2 / 2 / 2 / 2; 23 width: 20px; 24 height: 20px; 25 background: lime; 26 } 27 </style> 28 29 <body onload=updatePosition()> 30 31 <p>Test passes if it matches the reference.</p> 32 33 <div id="grid"> 34 <div id="abspos"></div> 35 </div> 36 37 </body> 38 39 <script> 40 function updatePosition() { 41 document.body.offsetTop; 42 43 document.getElementById('abspos').style.top = '15px'; 44 document.getElementById('abspos').style.left = '15px'; 45 46 document.documentElement.classList.remove('reftest-wait'); 47 } 48 </script> 49 50 </html>