transitions-dependent.html | Explore in Territory

<!DOCTYPE html>
<style>
.outerBlock {
    border: 1px solid black;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
}

.innerBlock {    
    background-color: green;
    height: 100px;
    transition: all 1s linear;
    -moz-transition: all 1s linear;    
}

#outer {
    width: 100px;
}

#outer.go {
    width: 500px;
}

#inner {
    width: calc(50% + 10px);
}

#innerTransition {
    width: calc(10% + 10px);
}

#innerTransition.go {
    width: calc(100% - 10px);
}

</style>

This tests that calc() expressions depending on transitioning elements behave correctly.
<div class="outerBlock" id="outer">
    <div class="innerBlock" id="inner"></div>
    <div class="innerBlock" id="innerTransition"></div>
</div>
<div id="result"></div>

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

if (window.testRunner)
    testRunner.dumpAsText();

const transitioningElements = ["outer", "innerTransition"];

expectedValues = [
    // time, element, property, expected-value, tolerance
    [0.00, "inner", 'width', 60, 10],
    [0.25, "inner", 'width', 110, 10],
    [0.50, "inner", 'width', 160, 10],
    [0.75, "inner", 'width', 210, 10],
    [1.00, "inner", 'width', 260, 10],

    [0.00, "innerTransition", 'width', 20, 10],
    [0.25, "innerTransition", 'width', 70, 10],
    [0.50, "innerTransition", 'width', 165, 10],
    [0.75, "innerTransition", 'width', 305, 10],
    [1.00, "innerTransition", 'width', 490, 10],
];

runTransitionTest(expectedValues, setupTest);


function setupTest() {
    for (var i = 0; i < transitioningElements.length; i++) {
        var element = document.getElementById(transitioningElements[i]);
        element.className += " go";
    }
}


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