mixed-type.html | Explore in Territory

<!DOCTYPE html>
<style>
#box {
    width: 10%;
    height: 100px;
    background-color: green;
    -webkit-transition: all 1s linear;
}

#box.final {
    width: 400px;
    height: 90%;
}
</style>
Tests transitions to and from a mix of absolute and percent values
</p>
<div style="width: 500px; height: 500px;">
  <div id="box"></div>
</div>

<div id="result">
<script src="../animations/resources/animation-test-helpers.js"></script>
<script type="text/javascript">

const expectedValues = [
  // [time, element-id, property, expected-value, tolerance]
  // The transition takes 1 second, so we compute tolerance to allow
  // 10% or 100ms variance, (endValue - startValue) / 10.
  [0.5, 'box', 'width', 225, 35],
  [0.5, 'box', 'height', 275, 35],
];

function setupTest()
{
  var box = document.getElementById('box');
  box.className = 'final';
}

runTransitionTest(expectedValues, setupTest);
</script>

chromium/third_party/blink/web_tests/transitions/mixed-type.html