| <!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> |
