1383981-3.html (1092B)
1 <!doctype html> 2 <style> 3 div { padding: 1px; } 4 .test div { padding: 2px; } 5 .test div div { padding: 3px; } 6 .test div div div { background: orange; } 7 .test div div div div { background: white; } 8 .test div div div div div { background: red; } 9 </style> 10 <body> 11 <script> 12 let root = document.createElement('div'); 13 let p = root; 14 for (let i = 0; i < 1000; ++i) { 15 p = p.appendChild(document.createElement('div')); 16 p.appendChild(document.createTextNode(i)); 17 } 18 document.body.appendChild(root); 19 20 // Flush styles. 21 document.body.offsetTop; 22 23 // Add 20 more top-level siblings to ensure that the style traversal goes 24 // parallel before the deep tree is processed. 25 // 26 // Note that we need to make these children of the <html> element, not the 27 // <body> element, because invalidations get processed by the parent when 28 // enqueuing children, so the _parent_ needs to be at a level in the DOM 29 // with enough dirty siblings to trigger a switch to parallel mode. 30 for (let i = 0; i < 20; ++i) { 31 document.documentElement.appendChild(document.createElement('div')); 32 } 33 34 root.className = 'test'; 35 </script> 36 </body>