test_grid_subtree_dirty.html (1466B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 <style> 8 #grid { 9 display: grid; 10 width: 100px; 11 height: 100px; 12 } 13 14 #initiallyHidden { 15 display: none; 16 width: 100px; 17 height: 100px; 18 background: lime; 19 } 20 </style> 21 <script> 22 "use strict"; 23 24 SimpleTest.waitForExplicitFinish(); 25 26 function runTests() { 27 const grid = document.getElementById("grid"); 28 const initiallyHidden = document.getElementById("initiallyHidden"); 29 document.documentElement.offsetHeight; // Flush layout to be sure we have grid-item sizes cached 30 31 grid.getGridFragments(); // This marks the grid and its descendants as dirty 32 33 document.documentElement.offsetHeight; // Flush layout again. In buggy builds, this layout will fail to reflow/clear-dirty-bits on the grid item. 34 35 initiallyHidden.style.display = "block"; // This should trigger a reflow. 36 let height = getComputedStyle(initiallyHidden).height; 37 is(height, "100px", "initiallyHidden element should get a reflow and arrive at the expected height after we toggle its display"); 38 39 SimpleTest.finish(); 40 } 41 </script> 42 </head> 43 <body onLoad="runTests();"> 44 <div id="grid"> 45 <div> 46 <div> 47 <div> 48 <div id="initiallyHidden"> 49 PASS 50 </div> 51 </div> 52 </div> 53 </div> 54 </div> 55 </body> 56 </html>