<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>

  <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>
</head>

<body>
  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>
</body>

<script src="../../transitions/resources/transition-test-helpers.js"></script>
<script>

if (window.testRunner)
    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', 60, "outer"],
    [0.25, "innerTransition", 'width', 167.5, "outer"],
    [0.50, "innerTransition", 'width', 275, "outer"],
    [0.75, "innerTransition", 'width', 382.5, "outer"],
    [1.00, "innerTransition", 'width', 490, "outer"],
];

function getPropertyCSSValue(elementId, property)
{
    let element = document.getElementById(elementId);
    let style = window.getComputedStyle(element, null);
    return style.getPropertyValue(property);
}

function runTest(expected)
{
    let result = document.getElementById("result");
    for (let i = 0; i < expected.length; i++) {
        let [time, elementId, property, expectedValue, dependsOn] = expected[i];
        let elem = (i < 5) ? dependsOn : elementId;
        pauseTransitionAtTimeOnElement(property, time, document.getElementById(elem));
        let actual = Number.parseFloat(getPropertyCSSValue(elementId, property));
        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 (let each of transitioningElements) {
    let element = document.getElementById(each);
    element.className += " go";
}

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

</script>

</html>