grid-lanes-rows-with-grid-width-changed.html (941B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 7 <link rel="match" href="grid-lanes-rows-with-grid-width-changed-ref.html"> 8 <meta name="assert" content="When the width of the grid-lanes grid changes, items are repositioned with correct offsets and are not overlapping"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 10 <style> 11 grid { 12 display: grid-lanes; 13 grid-template-columns: auto; 14 grid-gap: 10px; 15 font-family: Ahem; 16 font-size: 40px; 17 } 18 item { 19 background-color: grey; 20 } 21 </style> 22 </head> 23 <body> 24 <grid> 25 <item>Hello, world!</item> 26 <item>2</item> 27 </grid> 28 </body> 29 <script> 30 // Make sure layout occurs and then mutate the style to retrigger it 31 document.body.offsetHeight; 32 document.querySelector("grid").style["width"] = "1%"; 33 </script> 34 </html>