| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/runner.js"></script> |
| <style> |
| div { color: grey } |
| .a:has(~ .b .c) { color: green } |
| </style> |
| </head> |
| <body> |
| <div id=container><div class=a></div></div> |
| <script> |
| |
| function addChildren(element, numChildren, idPrefix) |
| { |
| for (var i = 0; i < numChildren; i++) { |
| var child = document.createElement("div"); |
| child.id = idPrefix + i; |
| element.appendChild(child); |
| } |
| } |
| |
| function makeTree(element, depth, fanOut, idPrefix) |
| { |
| if (depth <= 0) |
| return; |
| addChildren(element, fanOut, idPrefix); |
| for (var child = element.firstChild; child.nextSibling; child = child.nextSibling) { |
| makeTree(child, depth - 1, fanOut, child.id); |
| } |
| if (child) |
| makeTree(child, depth - 1, fanOut, child.id); |
| } |
| |
| for (var i = 0; i < 32; i++) { |
| var child = document.createElement("div"); |
| child.id = "child" + i; |
| child.classList.add("b"); |
| container.appendChild(child); |
| makeTree(child, 6, 2, child.id + "_") |
| } |
| |
| container.offsetHeight; // force recalc style |
| |
| var runFunction = function() |
| { |
| child0_0.classList.toggle("c"); |
| container.offsetHeight; // force recalc style |
| child0_0.classList.toggle("c"); |
| container.offsetHeight; // force recalc style |
| |
| child31_111111.classList.toggle("c"); |
| container.offsetHeight; // force recalc style |
| child31_111111.classList.toggle("c"); |
| container.offsetHeight; // force recalc style |
| } |
| |
| PerfTestRunner.measureRunsPerSecond({ |
| description: "Measures performance of the '.a:has(~ .b .c)' invalidation with a single subject element.", |
| run: runFunction |
| }); |
| |
| </script> |
| </body> |
| </html> |
