grid-positioned-item-dynamic-change-004-ref.html (626B)
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 <style> 7 #grid { 8 display: grid; 9 width: 100px; 10 height: 100px; 11 position: relative; 12 border: solid; 13 grid-template: 50px 50px / 50px 50px; 14 } 15 16 #abspos { 17 position: absolute; 18 top: 15px; 19 left: 15px; 20 grid-area: 2 / 2 / 2 / 2; 21 width: 20px; 22 height: 20px; 23 background: lime; 24 } 25 </style> 26 27 <body> 28 29 <p>Test passes if it matches the reference.</p> 30 31 <div id="grid"> 32 <div id="abspos"></div> 33 </div> 34 35 </body> 36 37 </html>