grid-positioned-item-dynamic-change-003.html (996B)
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="../../reference/ref-filled-green-100px-square.xht"> 7 <meta name="assert" content="This test checks that positioned items can be dynamically assigned."> 8 <style> 9 .grid { 10 display: inline-grid; 11 grid: 100px / 100px; 12 background-color: red; 13 } 14 15 #item { 16 width: 100px; 17 height: 100px; 18 background-color: green; 19 } 20 </style> 21 22 <body onload=updatePositionType()> 23 24 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 25 26 <div class="grid"> 27 <div id="item"></div> 28 </div> 29 30 </body> 31 32 <script> 33 function updatePositionType() { 34 document.body.offsetLeft; 35 36 var item = document.getElementById("item"); 37 item.style.position= "absolute"; 38 39 document.documentElement.classList.remove('reftest-wait'); 40 } 41 </script> 42 43 </html>