<!DOCTYPE html>
<!-- 
    This tests verifies that filters work even on composited layers that fallback to rendering in software.
    NOTE: It is using the fact that Safari can draw drop-shadows in GPU only if the filter is the last one in the filter chain.
    First we apply the shaders using a composited layer, but compute the filters in CPU. Then we switch to compute them in GPU.
    You should see three green rectangles slightly rotated and blurred. There should be no red and it should not crash.
-->
<html>
<head>
    <style>
        .box {
            position: relative;
            margin: 10px;
            height: 50px;
            width: 50px;
            background-color: green;
            -webkit-transform: translate(50px, 0px) rotate(20deg);
        }
        
        .blur {
            /* force a composited layer */
            -webkit-transform: translate3d(0, 0, 0);
            background: red;
            margin: 50px;
            -webkit-filter: drop-shadow(0px 0px 1px blue) blur(5px);
            width: 0px;
            height: 0px;
        }
        
        .before {
            -webkit-filter: blur(5px) drop-shadow(0px 0px 1px blue);
        }
    </style>

    <script src="../../fast/repaint/resources/repaint.js"></script>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText(true);

        function repaintTest()
        {
            document.querySelector(".before").classList.remove("before");
        }
    </script>
</head>

<body onload="runRepaintTest()">

    <div class="blur before">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

</body>
</html>