transitions.html | Explore in Territory

<!DOCTYPE html>
<style>
.transitionTest {
    background-color: green;
    height: 100px;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
}

#startCalcEndCalc, #startCalcEndPx, #startCalcEndPercent {
    width: calc(10% + 50px);
    width: -moz-calc(10% + 50px);
}

#startPxEndCalc {
    width: 100px;
}

#startPercentEndCalc {
    width: 20%;
}

#startCalcEndCalc.go, #startPxEndCalc.go, #startPercentEndCalc.go {
    width: calc(100% - 100px);
    width: -moz-calc(100% - 100px);
}

#startCalcEndPx.go {
    width: 400px;
}

#startCalcEndPercent.go {
    width: 80%;
}
</style>

This tests that transitions containing calc() expressions transition correctly.
<div style="width:500px; border: 1px solid black;">
    <div class="transitionTest" id="startCalcEndCalc"></div>
    <div class="transitionTest" id="startPxEndCalc"></div>
    <div class="transitionTest" id="startPercentEndCalc"></div>
    <div class="transitionTest" id="startCalcEndPx"></div>
    <div class="transitionTest" id="startCalcEndPercent"></div>
</div>
<div id="result"></div>

<script src="../../animations/resources/animation-test-helpers.js"></script>
<script>

const tests = ["startCalcEndCalc", "startPxEndCalc", "startPercentEndCalc", "startCalcEndPx", "startCalcEndPercent"];

expectedValues = [];

for (var i = 0; i < tests.length; i++) {
    expectedValues = expectedValues.concat([[0.25, tests[i], 'width', 175, 2]]);
    expectedValues = expectedValues.concat([[0.5, tests[i], 'width', 250, 2]]);
    expectedValues = expectedValues.concat([[0.75, tests[i], 'width', 325, 2]]);
    expectedValues = expectedValues.concat([[1.0, tests[i], 'width', 400, 2]]);
}

function initialize(id)
{
    var expectedStartWidth = 100;
    var element = document.getElementById(id);
    var width = element.offsetWidth;
    if (width == expectedStartWidth)
        result += 'PASS - "width" property for "' + id +'" element at 0.0s was: ' + width + '<br>';
    else
        result += 'FAIL  - "width" property for "' + id +'" element at 0.0s expected: ' + expectedStartWidth + ' but saw: ' + width + '<br>';
    
    element.className += " go";
}

function setupTest()
{
    for (var i = 0; i < tests.length; i++)
        initialize(tests[i]);
}

runTransitionTest(expectedValues, setupTest, undefined, false /* pixel test */);

</script>
chromium/third_party/blink/web_tests/css3/calc/transitions.html
