positioned-grid-items-023.html (996B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Positioned grid items</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos" title="9. Absolute Positioning"> 5 <link rel="match" href="positioned-grid-items-023-ref.html"> 6 <meta name="assert" content="Checks that absolutely positioned grid items with a strict contain attribute are properly placed in a grid."> 7 <style> 8 #grid { 9 display: inline-grid; 10 grid-template-columns: 50px 50px; 11 grid-template-rows: 50px 50px; 12 background-color: blue; 13 position: relative; 14 } 15 #child { 16 grid-area: 2 / 2 / 2 / 2; 17 bottom: 0; 18 left: 0; 19 width: 100%; 20 height: 100%; 21 background-color: green; 22 contain: strict; 23 position: absolute; 24 } 25 #grandchild { 26 width: 50%; 27 height: 50%; 28 background-color: red; 29 } 30 </style> 31 32 <p>Test passes if it matches the reference.</p> 33 34 <div id="grid"> 35 <div id="child"> 36 <marquee id="grandchild"></marquee> 37 </div> 38 </div>