grid-positioned-item-dynamic-change-001.html (1259B)
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="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 8 <meta name="assert" content="This test checks that positioned items can be dynamically changed."> 9 <style> 10 .grid { 11 display: grid; 12 grid: 50px 50px / 50px 50px; 13 position: relative; 14 } 15 16 .green { 17 background: green; 18 } 19 20 .red { 21 background: red; 22 } 23 24 #item { 25 position: absolute; 26 width: 100%; 27 height: 100%; 28 grid-column: 1 / 2; 29 grid-row: 1 / 2; 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"></div> 38 <div class="green"></div> 39 <div class="red"></div> 40 <div id="item" class="green"></div> 41 </div> 42 43 <script> 44 document.body.offsetLeft; 45 46 var item = document.getElementById("item"); 47 item.style.gridColumn = "2 / 3"; 48 item.style.gridRow = "2 / 3"; 49 50 document.documentElement.classList.remove('reftest-wait'); 51 </script> 52 53 </html>