| <!DOCTYPE html> |
| <head> |
| <title>CSS Custom Properties and Variables: Changes in property's declaration</title> |
| <script src="../resources/runner.js"></script> |
| <script src="resources/utils.js"></script> |
| </head> |
| <style> |
| .green { --prop: green; } |
| .red { --prop: red; } |
| body > div > div { background-color: grey; } |
| </style> |
| <body> |
| <script> |
| function createDOMTree() { |
| let div = document.createElement('div'); |
| div.innerHTML = '<div><div><div><div><div style="color: var(--prop)">' + '' + '</div></div></div></div></div>'; |
| for (let i = 0; i < 10000; i++) { |
| document.body.appendChild(div.cloneNode(true)); |
| } |
| } |
| createDOMTree(); |
| var theme; |
| PerfTestRunner.measureTime({ |
| description: "Measures the performance in the propagation of a custom property declaration.", |
| setup: () => { |
| document.body.classList.remove(theme); |
| theme = theme == 'green' ? 'red' : 'green'; |
| }, |
| run: function() { |
| document.body.classList.add(theme); |
| forceStyleRecalc(document.body); |
| }, |
| }); |
| </script> |
| </body> |
