| <!DOCTYPE html> |
| <head> |
| <title>CSS Custom Properties and Variables: Changes that require resolving variable references</title> |
| <script src="../resources/runner.js"></script> |
| <script src="resources/utils.js"></script> |
| </head> |
| <style> |
| .container > div { |
| display: inline-block; |
| height: 14px; |
| width: 14px; |
| box-sizing: border-box; |
| border: 1px solid green; |
| } |
| .container { |
| height: 0px; |
| overflow: hidden; |
| } |
| </style> |
| <body> |
| <header id=info>CSS Variables: <button id=button></button></header> |
| <script> |
| const NUM_ELEMENTS = 20000; |
| const PROP_COUNT = 1000; |
| let curBorder = -1; |
| let root = document.createElement('div'); |
| root.classList.add(`container`); |
| |
| // Add ?ref to URL to run a similar test without CSS Variables. |
| const ref = document.location.href.endsWith('?ref'); |
| button.textContent = ref ? 'OFF' : 'ON'; |
| button.addEventListener('click', function(){ |
| let href = document.location.href; |
| if (ref) { |
| document.location.href = href.substr(0, href.length - 4); |
| } else { |
| document.location.href = href + '?ref'; |
| } |
| }); |
| |
| function hexcolor(i) { |
| let hex = i.toString(16); |
| while (hex.length < 6) |
| hex = '0' + hex; |
| return '#' + hex; |
| } |
| |
| function createDOMTree() { |
| for (let n = 0; n < NUM_ELEMENTS; n++) { |
| let div = document.createElement('div'); |
| let i = n % PROP_COUNT; |
| div.classList.add(`bg-color${i}`); |
| root.appendChild(div); |
| } |
| document.body.appendChild(root); |
| } |
| |
| function createDivRules() { |
| let lines = []; |
| for (let i = 0; i < PROP_COUNT; i++) { |
| lines.push(`.border${i} > div { border-color: ${hexcolor(i)}; }`); |
| if (ref) |
| lines.push(`.bg-color${i} { background-color: ${hexcolor(i)}; }`); |
| else |
| lines.push(`.bg-color${i} { background-color: var(--prop-${i}); }`); |
| } |
| return lines.join('\n'); |
| } |
| |
| // Create a rule which defines 'propCount' custom properties at :root. |
| function createRootRule() { |
| if (ref) |
| return; |
| let lines = [':root {']; |
| for (let i = 0; i < PROP_COUNT; i++) { |
| lines.push(`--prop-${i}: ${hexcolor(i)};`); |
| } |
| lines.push('}'); |
| return lines.join('\n'); |
| } |
| |
| applyCSSRule(createDivRules()); |
| applyCSSRule(createRootRule()); |
| createDOMTree(); |
| PerfTestRunner.measureTime({ |
| description: "Measures the performance of the CSS variable reference recalc.", |
| setup: () => { |
| root.classList.remove(`border${curBorder}`); |
| // Using PROP_COUNT to ensure different border values, avoiding the style cache |
| curBorder = (curBorder + 1) % PROP_COUNT; |
| }, |
| run: function() { |
| root.classList.add(`border${curBorder}`); |
| forceStyleRecalc(document.body); |
| }, |
| }); |
| </script> |
| </body> |
