grid-positioned-item-dynamic-change-006.html (988B)
1 <!DOCTYPE html> 2 <html lang=en> 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-006-ref.html"> 7 <meta name="assert" content="This test checks that positioned items update upon dynamic changes."> 8 <style> 9 .absolute { 10 background: green; 11 position: absolute; 12 grid-row: 2 / 3; 13 grid-column: 1 / 2; 14 top: 0; 15 bottom: 0; 16 right: 0; 17 left: 0; 18 } 19 </style> 20 <body> 21 <p>Test passes if it matches the reference.</p> 22 <div style="display: grid; position: relative; width: 100px;"> 23 <div style="background: green;"> 24 <div id="target"></div> 25 </div> 26 <div style="background: red; height: 25px;"></div> 27 <div class="absolute"></div> 28 </div> 29 <script> 30 document.body.offsetTop; 31 document.getElementById('target').style.height = '75px'; 32 document.documentElement.classList.remove('reftest-wait'); 33 </script> 34 </body> 35 </html>