| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| div > #picture { |
| transition-property: transform; |
| transition-duration: 50ms; |
| transition-timing-function: ease-in; |
| transform: scale(2); |
| } |
| |
| div.enabled > #picture { |
| transition-timing-function: ease-out; |
| transform: scale(3); |
| } |
| |
| div > #description { |
| transition-property: transform; |
| transition-duration: 90ms; |
| transition-timing-function: ease-in; |
| } |
| |
| div.enabled > #description { |
| transform: translate3d(100px,0,0); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="item"> |
| <div id="picture"></div> |
| <div id="description"></div> |
| </div> |
| <script> |
| 'use strict'; |
| async_test(t => { |
| description.addEventListener('transitionend', t.step_func_done(() => { |
| assert_equals(getComputedStyle(picture).transform, 'matrix(3, 0, 0, 3, 0, 0)'); |
| assert_equals(getComputedStyle(description).transform, 'matrix(1, 0, 0, 1, 100, 0)'); |
| })); |
| |
| document.body.offsetHeight; // Force style recalc |
| item.className = 'enabled'; |
| }); |
| </script> |
| </body> |
| </html> |
