grid-gap-decorations-047.html (1584B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title> 5 CSS Gap Decorations: Gap decorations are painted on dynamic grid change. 6 </title> 7 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 8 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 9 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 10 <style> 11 .container { 12 height: 100px; 13 width: 100px; 14 background: red; 15 } 16 17 #grid { 18 display: grid; 19 grid-template-columns: auto; 20 gap: 2px; 21 row-rule: green solid 2px; 22 height: 100%; 23 } 24 25 .item { 26 background: green; 27 } 28 </style> 29 </head> 30 <body> 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div class="container"> 33 <div id="grid"> 34 <div class="item"> </div> 35 <div class="item"> </div> 36 </div> 37 </div> 38 <script> 39 const grid = document.getElementById('grid'); 40 function addChild(num) { 41 for (let i = 0; i < num; i++) { 42 const item = document.createElement('div'); 43 item.className = 'item'; 44 grid.appendChild(item); 45 } 46 } 47 // Use double requestAnimationFrame to remove need of setTimeout. 48 // Wait for the first frame to ensure that the style is computed. 49 requestAnimationFrame(() => { 50 // Wait for the second frame to ensure that the style is painted. 51 requestAnimationFrame(() => { 52 addChild(1); 53 document.documentElement.classList.remove("reftest-wait"); 54 }); 55 }); 56 </script> 57 </body> 58 </html>