positioned-grid-descendants-017.html (1106B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Positioned grid descendants</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> 5 <link rel="match" href="positioned-grid-descendants-017-ref.html"> 6 <meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized."> 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: 1 / 1 / 1 / 1; 17 background-color: hotpink; 18 } 19 #abspos { 20 grid-area: 2 / 2 / 2 / 2; 21 bottom: 0; 22 left: 0; 23 width: 100%; 24 height: 100%; 25 background-color: green; 26 contain: strict; 27 position: absolute; 28 } 29 #grandchild { 30 width: 50%; 31 height: 50%; 32 background-color: red; 33 } 34 </style> 35 36 <p>Test passes if it matches the reference.</p> 37 38 <div id="grid"> 39 <div id="child"> 40 <div id="abspos"> 41 <marquee id="grandchild"></marquee> 42 </div> 43 </div> 44 </div>