grid-positioned-item-dynamic-change-007-ref.html (799B)
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="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 <meta name="assert" content="This test checks that positioned items react to grid track size changes."> 8 <style> 9 .green { 10 background: green; 11 width: 100px; 12 height: 50px; 13 margin-bottom: 8px; 14 } 15 16 .blue { 17 border: 3px solid blue; 18 box-sizing: border-box; 19 background: green; 20 width: 100px; 21 height: 100px; 22 } 23 24 </style> 25 26 <p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p> 27 28 <div class="green"></div> 29 <div class="blue"></div> 30 31 </html>