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