<style>
#testdiv {
    background-color: inherit; /* needed to dodge the matched properties cache */
}
.test {
    transition: 1s;
    width: calc(100% - 10px); /* calc compares inequal with the same exact calc value */
}
</style>
<body onload="test()">
Test that calc values in transitions don't lead to a style resolution spin.
<div id=log></div>
<div id=testdiv></div>
<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
}

function test() {
    document.body.offsetWidth;

    const startStyleRecalcCount = window.internals ? internals.styleRecalcCount() : 0;

    testdiv.classList.add('test');

    if (!window.internals)
        return;
    setTimeout(() => {
       const styleRecalcCount = internals.styleRecalcCount() - startStyleRecalcCount;
       if (styleRecalcCount <= 3)
           log.innerHTML = "PASS"
       else
           log.innerHTML = `FAIL: styleRecalcCount: ${ internals.styleRecalcCount() - startStyleRecalcCount}`;
       testRunner.notifyDone();
    }, 10);
}
</script>
</div>