grid-positioned-item-dynamic-change-005.html (1319B)
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="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> 6 <link rel="match" href="grid-positioned-item-dynamic-change-005-ref.html"> 7 <meta name="assert" content="This test checks that positioned items can be dynamically changed."> 8 <style> 9 #grid { 10 display: inline-grid; 11 grid-template-columns: 50px 50px; 12 grid-template-rows: 50px 50px; 13 background-color: blue; 14 position: relative; 15 } 16 #child { 17 grid-area: 2 / 2 / 2 / 2; 18 width: 100%; 19 height: 100%; 20 background-color: green; 21 position: absolute; 22 } 23 #grandchild { 24 width: 50%; 25 height: 50%; 26 background-color: red; 27 } 28 </style> 29 30 <body onload=updateConstraints()> 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> 39 40 </body> 41 42 <script> 43 function updateConstraints() { 44 document.body.offsetTop; 45 46 document.getElementById('child').style.bottom = '0'; 47 document.getElementById('child').style.left = '0'; 48 document.getElementById('child').style.contain = 'strict'; 49 50 document.documentElement.classList.remove('reftest-wait'); 51 } 52 </script> 53 54 </html>