| <!DOCTYPE html> |
| <script src="../resources/runner.js"></script> |
| <script src="resources/utils.js"></script> |
| <body> |
| <nav id="container" class="red" style="visibility:hidden"></nav> |
| <style> |
| .red { --color: red; } |
| .green { --color: green; } |
| #container div { border-color: var(--color); } |
| </style> |
| <script> |
| createDOMTree(container, 5, 6); |
| |
| PerfTestRunner.measureTime({ |
| description: 'Measure impact of referencing a variable that changes on ancestor', |
| setup: () => forceStyleRecalc(container), |
| run: () => { |
| container.classList.toggle('red'); |
| container.classList.toggle('green'); |
| forceStyleRecalc(container); |
| } |
| }); |
| </script> |
| </body> |
