<!DOCTYPE html><!-- webkit-test-runner [ ColorFilterEnabled=true ] -->
<html>
<head>
    <script src="../editing.js"></script>
    <script src="../../resources/js-test-pre.js"></script>
    <style>
        :root {
            color-scheme: dark;
            -apple-color-filter: apple-invert-lightness();
        }
    </style>
</head>
<body>
    <p id="description">This test checks that pasting into a color filtered dark mode document inserts light mode transformed content.</p>
    <div id="console"></div>

    <script>
    if (window.internals)
        internals.settings.setUseDarkAppearance(true);

    let sel = document.getSelection();
    let root = document.createElement("root");
    document.body.appendChild(root);

    function createEditable(tagName, markup) {
        let node = document.createElement(tagName);
        node.contentEditable = true;
        if (markup)
            node.innerHTML = markup;
        return node;
    }

    function testCopyPaste(originalMarkup, expected, asList = false) {
        let tagName = asList ? "ul" : "div";
        let copyNode = createEditable(tagName, originalMarkup);
        root.appendChild(copyNode);
        copyNode.focus();

        document.execCommand("SelectAll", false);
        document.execCommand("Copy", false);

        copyNode.remove();

        let pasteNode = createEditable(tagName);
        root.appendChild(pasteNode);

        if (asList) {
            pasteNode.innerHTML = "<li>Item 1</li><li>Item 2</li>";
            pasteNode.focus();
            moveSelectionForwardByLineCommand();
        } else
            pasteNode.focus();

        document.execCommand("Paste", false);

        pastedMarkup = pasteNode.innerHTML;

        shouldBe("pastedMarkup", "'" + expected + "'");
    }

    // Transformed on paste
    testCopyPaste("<span style=\"color: white; background-color: black\">Hello</span>", "<span style=\"caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(238, 238, 238); background-color: rgb(51, 51, 51)\">Hello</span>", "<span style=\"caret-color: rgb(21, 21, 21); color: rgb(21, 21, 21); background-color: rgb(255, 255, 255);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(238, 238, 238); background-color: rgb(85, 85, 85)\">Hello</span>", "<span style=\"caret-color: rgb(21, 21, 21); color: rgb(21, 21, 21); background-color: rgb(213, 213, 213);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(170, 170, 170)\">Hello</span><span style=\"color: rgb(153, 153, 153)\">Hello 2</span>", "<span style=\"color: rgb(106, 106, 106);\">Hello</span><span style=\"color: rgb(127, 128, 127);\">Hello 2</span>");
    testCopyPaste("<span style=\"color: rgb(153, 153, 153)\">Hello</span>", "<span style=\"caret-color: rgb(127, 128, 127); color: rgb(127, 128, 127);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(119, 119, 119)\">Hello</span>", "<span style=\"caret-color: rgb(170, 170, 170); color: rgb(170, 170, 170);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(102, 102, 102)\">Hello</span>", "<span style=\"caret-color: rgb(191, 191, 191); color: rgb(191, 191, 191);\">Hello</span>");
    testCopyPaste("<span style=\"color: color(display-p3 0.93 0.93 0.93); background-color: color(display-p3 0.2 0.2 0.2)\">Hello</span>", "<span style=\"caret-color: rgb(22, 22, 22); color: rgb(22, 22, 22); background-color: rgb(255, 255, 255);\">Hello</span>");

    // Transformed list items on paste
    testCopyPaste("<li><span style=\"color: white; background-color: black\">Hello</span></li>", "<li>Item 1</li><li><span style=\"color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);\">Hello</span></li><li>Item 2</li>", true);
    testCopyPaste("<li style=\"color: rgb(238, 238, 238); background-color: rgb(85, 85, 85)\">Hello 1</li><li>Hello 2</li>", "<li>Item 1</li><li style=\"color: rgb(21, 21, 21); background-color: rgb(213, 213, 213);\">Hello 1</li><li>Hello 2</li><li>Item 2</li>", true);
    testCopyPaste("<li>Hello 1</li><li style=\"color: rgb(153, 153, 153)\">Hello 2</li>", "<li>Item 1</li><li>Hello 1</li><li style=\"color: rgb(127, 128, 127);\">Hello 2</li><li>Item 2</li>", true);

    // Not transformed on paste
    testCopyPaste("<span style=\"color: rgb(101, 101, 101)\">Hello</span>", "<span style=\"caret-color: rgb(101, 101, 101); color: rgb(101, 101, 101);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(90, 90, 90)\">Hello</span>", "<span style=\"caret-color: rgb(90, 90, 90); color: rgb(90, 90, 90);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(85, 85, 85)\">Hello</span><span style=\"color: white; background-color: black\">Hello 2</span>", "<span style=\"color: rgb(85, 85, 85);\">Hello</span><span style=\"background-color: black;\">Hello 2</span>");
    testCopyPaste("<span style=\"color: rgb(68, 68, 68)\">Hello</span>", "<span style=\"caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68);\">Hello</span>");
    testCopyPaste("<span style=\"color: rgb(68, 68, 68)\">Hello</span>", "<span style=\"caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68);\">Hello</span>");
    testCopyPaste("<span style=\"color: black\">Hello</span>", "<span style=\"caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);\">Hello</span>");
    testCopyPaste("<span style=\"color: black; background-color: white\">Hello</span>", "<span style=\"caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);\">Hello</span>");
    testCopyPaste("<span style=\"color: white; background-color: white\">Hello</span>", "<span style=\"background-color: rgb(255, 255, 255);\">Hello</span>");

    // List items not transformed on paste
    testCopyPaste("<li><span style=\"color: white; background-color: white\">Hello</span></li>", "<li>Item 1</li><li><span style=\"background-color: white;\">Hello</span></li><li>Item 2</li>", true);
    testCopyPaste("<li style=\"color: rgb(85, 85, 85); background-color: rgb(235, 235, 235)\">Hello 1</li><li>Hello 2</li>", "<li>Item 1</li><li style=\"color: rgb(85, 85, 85); background-color: rgb(235, 235, 235);\">Hello 1</li><li>Hello 2</li><li>Item 2</li>", true);
    testCopyPaste("<li>Hello 1</li><li style=\"color: black\">Hello 2</li>", "<li>Item 1</li><li>Hello 1</li><li style=\"color: black;\">Hello 2</li><li>Item 2</li>", true);

    root.style.display = "none";
    </script>

    <script src="../../resources/js-test-post.js"></script>
</body>
</html>