grid-with-content-dynamic-display-001.html (1168B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740702"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 7 <style> 8 #grid { 9 display: grid; 10 width: 100px; 11 height: 100px; 12 background: red; 13 } 14 15 #initiallyHidden { 16 display: none; 17 width: 100px; 18 height: 100px; 19 background: green; 20 } 21 </style> 22 </head> 23 <body> 24 <p>Test passes if there is a filled green square.</p> 25 <div id="grid"> 26 <div> 27 <div> 28 <div> 29 <div id="initiallyHidden"> 30 </div> 31 </div> 32 </div> 33 </div> 34 </div> 35 <script> 36 "use strict"; 37 38 const grid = document.getElementById("grid"); 39 const initiallyHidden = document.getElementById("initiallyHidden"); 40 document.documentElement.offsetHeight; // Flush layout 41 42 // Fails in buggy Firefox build because it prevents reflows from happening 43 getComputedStyle(grid).getPropertyValue("grid-template-columns"); 44 45 document.documentElement.offsetHeight; // Flush layout again 46 47 initiallyHidden.style.display = "block"; // This should trigger a reflow. 48 </script> 49 </body> 50 </html>