<!DOCTYPE html>
<html>
    <head>
    <style>
    div {
        height: 100px;
        width: 100px;
        margin: 5px;
        border: 1px solid black;
        float: left;
    }
    br { clear: both; }
    </style>
    <script>
        const UNPREFIXED_STYLE = "linear-gradient(to bottom, orange, blue)";
        const PREFIXED_STYLE = "-webkit-linear-gradient(   bottom, orange, blue)";

        if (window.testRunner)
            testRunner.waitUntilDone();

        function doTest()
        {
            initStyles();
            setTimeout(tweakStyles, 0);
        }

        function initStyles()
        {
            u.style.backgroundImage = UNPREFIXED_STYLE;
            u2p.style.backgroundImage = UNPREFIXED_STYLE;

            p.style.backgroundImage = PREFIXED_STYLE;
            p2u.style.backgroundImage = PREFIXED_STYLE;
        }

        function tweakStyles()
        {
            u2p.style.backgroundImage = PREFIXED_STYLE;
            p2u.style.backgroundImage = UNPREFIXED_STYLE;
            
            if (window.testRunner)
                testRunner.notifyDone();
        }

        window.addEventListener('load', doTest, false);
    </script>
    </head>
    <body>
        Orange at top:<br>
        <div id="u"></div>
        <div id="p2u"></div>
        <br>Blue at top:<br>
        <div id="p"></div>
        <div id="u2p"></div>
    </body>
</html>