column-grid-lanes-positioned-item-dynamic-change.html (1109B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Layout Test: Grid Lanes positioned item dynamic change.</title> 6 <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> 8 <link rel="match" href="column-grid-lanes-positioned-item-dynamic-change-ref.html"> 9 <style> 10 .grid-lanes { 11 display: grid-lanes; 12 grid-template-columns: 75px 25px; 13 position: relative; 14 } 15 16 .absolute { 17 background: green; 18 position: absolute; 19 grid-column: 2 / 3; 20 top: 0; 21 bottom: 0; 22 right: 0; 23 left: 0; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="grid-lanes"> 29 <div id="target" style="background: green; width: 100%; height: 25px;"></div> 30 <div style="background: red; width: 100%; height: 25px;"></div> 31 <div class="absolute"></div> 32 </div> 33 <script> 34 document.body.offsetTop; 35 document.getElementById('target').style.height = '50px'; 36 document.documentElement.classList.remove('reftest-wait'); 37 </script> 38 </body> 39 </html>