<!DOCTYPE html><!-- webkit-test-runner [ ColorFilterEnabled=true ] -->
<html>
    <head>
        <title>CSS Test: -apple-color-filter affects caret-color</title>
        <link rel="author" title="Apple" href="http://www.apple.com/">
        <link rel="match" href="-apple-color-filter-caret-color-expected.html">

        <meta name="assert" content="-apple-color-filter affects caret-color">
        <style>
        #test-container {
            height: 150px;
            width: 100px;
            overflow: hidden;
        }

        #test {
            -apple-color-filter: invert();
            background-color: white;
            transform-origin: left top;
            transform: scale(50, 50);
            clip-path: inset(1px 99px 0px 0px);
            font-size: 10px; /* Needed for the caret to render in Firefox. */
            caret-color: rgb(255, 128, 255);
        }

        </style>
    </head>
    <body>
        <p>The caret should show as a green flashing square below.</p>
        <div id="test-container">
            <div id="test" contenteditable="true">
                <span>&nbsp;<!-- Needed for the caret to render in Firefox. --></span>
            </div>
        </div>
        <script>
            document.getElementById("test").focus();
            window.getSelection().modify("move", "left", "character"); // Place the caret at the start of the <span>.
        </script>
    </body>
</html>
