| <!DOCTYPE html> |
| <script src="../resources/runner.js"></script> |
| <script src="resources/utils.js"></script> |
| <link help="https://drafts.csswg.org/css-variables/#pending-substitution-value"> |
| <div id="container" style="height: 100px; overflow: hidden"></div> |
| <script> |
| createDOMTree(container, 2, 3); |
| applyCSSRule(':root { --border: 4mm ridge rgba(170, 50, 220, .6); }'); |
| applyCSSRule(':root { --margin: 1px 2px 3px 4px; }'); |
| applyCSSRule(':root { --padding: 1px 2px 3px 4px; }'); |
| applyCSSRule(':root { --background: content-box radial-gradient(crimson, skyblue); }'); |
| |
| const sequence_size = 2000; |
| |
| function create_var_sequence() { |
| let chain = []; |
| for (let i = 0; i < sequence_size; ++i) { |
| chain.push(`var(--v${i}, )`); |
| } |
| return chain.join(' '); |
| } |
| |
| applyCSSRule(`div { border: ${create_var_sequence()} var(--border); }`); |
| applyCSSRule(`div { margin: ${create_var_sequence()} var(--margin); }`); |
| applyCSSRule(`div { padding: ${create_var_sequence()} var(--padding); }`); |
| applyCSSRule(`div { background: ${create_var_sequence()} var(--bakground); }`); |
| |
| PerfTestRunner.measureTime({ |
| description: 'Measure impact of resolving pending-substitution-values', |
| run: function() { |
| container.style.setProperty('display', 'none'); |
| forceStyleRecalc(container); |
| container.style.setProperty('display', 'block'); |
| forceStyleRecalc(container); |
| } |
| }); |
| </script> |
