grid-positioned-item-dynamic-change-007.html (1258B)
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="Filipp Riabchun" href="mailto:talpa@yandex.ru"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> 7 <link rel="match" href="grid-positioned-item-dynamic-change-007-ref.html"> 8 <meta name="assert" content="This test checks that positioned items react to grid track size changes."> 9 <style> 10 .grid { 11 display: inline-grid; 12 grid-gap: 8px; 13 position: relative; 14 } 15 16 .green { 17 background: green; 18 width: 100px; 19 height: 100px; 20 } 21 22 .blue { 23 position: absolute; 24 border: 3px solid blue; 25 top: 0; 26 right: 0; 27 bottom: 0; 28 left: 0; 29 box-sizing: border-box; 30 grid-column: 1 / 2; 31 grid-row: 2 / 3; 32 } 33 34 </style> 35 36 <p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p> 37 38 <div class="grid"> 39 <div class="green" id="item"></div> 40 <div class="green"></div> 41 <div class="blue"></div> 42 </div> 43 44 <script> 45 document.body.offsetLeft; 46 47 var item = document.getElementById("item"); 48 item.style.height = '50px'; 49 50 document.documentElement.classList.remove('reftest-wait'); 51 </script> 52 53 </html>