grid-item-absolute-positioning-dynamic-001.html (1148B)
1 <!DOCTYPE html> 2 <html lang=en class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Test: Grid item absolute positioning dynamic</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-200px-square.html"> 8 <meta name="assert" content="This test checks that a grid item which becomes an absolutelly positioned children of a grid."> 9 <style> 10 #wrapper { 11 width: 200px; 12 height: 200px; 13 position: relative; 14 background: red; 15 } 16 17 #grid { 18 display: grid; 19 grid: 100px / 100px; 20 } 21 22 #item { 23 background: green; 24 width: 100%; 25 height: 100%; 26 } 27 </style> 28 29 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 30 31 <div id="wrapper"> 32 <div id="grid"> 33 <div id="item"></div> 34 </div> 35 </div> 36 37 <script> 38 window.requestAnimationFrame(() => { 39 document.getElementById("item").style.position = "absolute"; 40 document.body.offsetLeft; 41 document.documentElement.classList.remove('reftest-wait'); 42 }); 43 </script> 44 45 </html>