inherit-other-props-do-not-affect-transition-property.html

<html>
<head>
  <style>
    #parent1 {
      -webkit-transition-property: none;
      -webkit-transition-delay: 1s;
      -webkit-transition-duration: 2s;
      -webkit-transition-timing-function: linear;
    }
    #child1 {
      -webkit-transition-property: right;
      -webkit-transition-delay: inherit;
      -webkit-transition-duration: inherit;
      -webkit-transition-timing-function: inherit;
    }
    #parent2 {
      -webkit-transition-property: all;
      -webkit-transition-delay: 3s;
      -webkit-transition-duration: 4s;
      -webkit-transition-timing-function: ease-out;
    }
    #child2 {
      -webkit-transition-property: none;
      -webkit-transition-delay: inherit;
      -webkit-transition-duration: inherit;
      -webkit-transition-timing-function: inherit;
    }
  </style>
  <script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    var result = '';

    function testValue(name, actual, expected) {
      if (actual == expected)
        result += "PASS: ";
      else
        result += "FAIL: ";
      result += "Computed transition-" + name + ": " + actual + ", expected: " + expected + "<br>";
    }
    
    function testProperties()
    {
      var style = getComputedStyle(document.getElementById('child1'));
      testValue('property', style.webkitTransitionProperty, 'right');
      testValue('delay', style.webkitTransitionDelay, '1s');
      testValue('duration', style.webkitTransitionDuration, '2s');
      testValue('timing-function', style.webkitTransitionTimingFunction, 'linear');

      style = getComputedStyle(document.getElementById('child2'));
      testValue('property', style.webkitTransitionProperty, 'none');
      testValue('delay', style.webkitTransitionDelay, '3s');
      testValue('duration', style.webkitTransitionDuration, '4s');
      testValue('timing-function', style.webkitTransitionTimingFunction, 'ease-out');

      document.getElementById('result').innerHTML = result;
      if (window.testRunner)
          testRunner.notifyDone();
    }

    window.addEventListener('load', testProperties, false);
  </script>
</head>
<body>
<p>Tests that transition-property is not affected by inheritance of other transition properties.
<div id="parent1">
  <div class="child" id="child1"></div>
</div>
<div id="parent2">
  <div class="child" id="child2"></div>
</div>

<div id="result"></div>

</body>
</html>
chromium/third_party/blink/web_tests/transitions/inherit-other-props-do-not-affect-transition-property.html
