grid-positioned-item-dynamic-change-002.html (1173B)
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 descendant positioned items can be dynamically changed."> 8 <style> 9 .grid { 10 display: grid; 11 grid: 50px 50px / 50px 50px; 12 position: relative; 13 } 14 15 .green { 16 background: green; 17 } 18 19 .red { 20 background: red; 21 } 22 23 #item { 24 position: absolute; 25 width: 100%; 26 height: 100%; 27 grid-column: 1 / 2; 28 grid-row: 1 / 2; 29 top: 0; 30 } 31 </style> 32 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 35 <div class="grid"> 36 <div class="green"></div> 37 <div class="green"> 38 <div id="item" class="green"></div> 39 </div> 40 <div class="green"></div> 41 <div class="red"></div> 42 </div> 43 44 <script> 45 document.body.offsetLeft; 46 47 var item = document.getElementById("item"); 48 item.style.gridColumn = "2 / 3"; 49 item.style.gridRow = "2 / 3"; 50 51 document.documentElement.classList.remove('reftest-wait'); 52 </script> 53 54 </html>