<!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
<style>
.outerBlock {
    border: 1px solid black;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
}

.innerBlock {    
    background-color: green;
    height: 100px;
    -webkit-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="../../transitions/resources/transition-test-helpers.js"></script>
<script>

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

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

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

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

function runTest(expected) 
{
    for (var i = 0; i < expected.length; ++i) {
        var time = expected[i][0];
        var elementId = expected[i][1];
        var property = expected[i][2];
        var expectedValue = expected[i][3];
        var dependsOn = expected[i][4];
        pauseTransitionAtTimeOnElement(property, time, document.getElementById(dependsOn));
        pauseTransitionAtTimeOnElement(property, time, document.getElementById(elementId));
        var actual = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
        var result = document.getElementById("result");
        if (actual == expectedValue)
            result.innerHTML += 'PASS - "' + property + '" property for "' + elementId +'" element at ' + time + 's was: ' + actual + '<br/>';
        else
            result.innerHTML += 'FAIL - "' + property + '" property for "' + elementId +'" element at ' + time + 's expected: ' + expectedValue + ' but saw: ' + actual + '<br/>';
    }
    if (window.testRunner)
        testRunner.notifyDone();
}

function loadListener()
{
    waitForAnimationStart(function(){runTest(expectedValues);});
}

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

window.addEventListener("load", loadListener, false);
window.testRunner.waitUntilDone();

</script>