grid-placement-using-named-grid-lines-007.html (1786B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid item placement with dynamically named grid lines</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement"> 6 <link rel="match" href="../../reference/ref-filled-green-300px-square.html"> 7 <meta name="assert" content="Grid item placement is updated when the names of the grid lines change dynamically."> 8 <style> 9 .container { 10 display: grid; 11 width: 300px; 12 height: 100px; 13 background: red; 14 } 15 .container::before { 16 content: ""; 17 grid-area: main; 18 background: green; 19 } 20 .explicit { 21 grid-template-columns: [quux-start] 100% [quux-end]; 22 grid-template-rows: [quux-start] 100% [quux-end]; 23 } 24 .explicit.changed { 25 grid-template-columns: [main-start] 100% [main-end]; 26 grid-template-rows: [main-start] 100% [main-end]; 27 } 28 .auto-repeat { 29 grid-template-columns: repeat(auto-fill, [quux-start] 100% [quux-end]); 30 grid-template-rows: repeat(auto-fill, [quux-start] 100% [quux-end]); 31 } 32 .auto-repeat.changed { 33 grid-template-columns: repeat(auto-fill, [main-start] 100% [main-end]); 34 grid-template-rows: repeat(auto-fill, [main-start] 100% [main-end]); 35 } 36 .implicit { 37 grid-template-columns: 100%; 38 grid-template-rows: 100%; 39 grid-template-areas: "quux"; 40 } 41 .implicit.changed { 42 grid-template-areas: "main"; 43 } 44 </style> 45 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 46 <div class="container explicit"></div> 47 <div class="container auto-repeat"></div> 48 <div class="container implicit"></div> 49 <script> 50 // Force layout 51 document.body.offsetLeft; 52 53 // Change the grid line names 54 for (let container of document.querySelectorAll(".container")) { 55 container.classList.add("changed"); 56 } 57 </script>