css calc with css variable

Benchmark created on

Preparation HTML

<style>
.container {
	--itemWidth: 100px;
}
</style>
<div class="container"></div>

Setup

const container = document.querySelector('.container')

container.innerHTML = `<div></div>`.repeat(1000)

const children = [...container.children]

Teardown

container.innerHTML = ''

Test runner

Ready to run.

Testing in
TestOps/sec
normal
children.forEach(el => {
	el.style.width = '100px';	
})
ready
css variable
children.forEach(el => {
	el.style.width = 'var(--itemWidth)';	
})
ready
css calc with css variable
children.forEach(el => {
	el.style.width = 'calc(var(--itemWidth) + 1px)';	
})
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.