| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #foo { |
| transition: all 0.05s linear, top 0.1s linear; |
| position: absolute; |
| top: 30px; |
| left: 10px; |
| width: 300px; |
| height: 300px; |
| background-image: -webkit-linear-gradient(red, green, blue); |
| } |
| #foo.trans { |
| top: 40px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="foo">This should not fire a background-image transition.</div> |
| <script> |
| 'use strict'; |
| |
| async_test(t => { |
| foo.addEventListener('transitionend', t.step_func_done((evt) => { |
| assert_equals(evt.propertyName, 'top'); |
| })); |
| |
| // Force a layout so that changing the classname below causes an animation. |
| document.body.offsetHeight; |
| |
| foo.className = 'trans'; |
| }); |
| </script> |
| </body> |
| </html> |
