<!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 initTransitionOnElement(elementId)
{
    let element = document.getElementById(elementId);
    element.className += " go";
    for (let animation of element.getAnimations()) {
        if (animation instanceof CSSTransition && animation.transitionProperty == "width") {
            animation.pause();
        }
    }
}

function runTest(expected)
{
    let result = document.getElementById("result");

    initTransitionOnElement("outer");
    for (let i = 0; i < 5; i++) {
        let [time, elementId, property, expectedValue, dependsOn] = expected[i];

        pauseTransitionAtTimeOnElement(property, time, document.getElementById(dependsOn));
        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/>`;

    }

    initTransitionOnElement("innerTransition");
    for (let i = 5; i < expected.length; i++) {
        let [time, elementId, property, expectedValue, dependsOn] = expected[i];

        pauseTransitionAtTimeOnElement(property, time, document.getElementById(elementId));
        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);});
}

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

</script>

</html>
