inline-style-allowed-while-cloning-objects.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="style-src 'self';">
    <script src="/js-test-resources/testharness.js"></script>
    <script src="/js-test-resources/testharnessreport.js"></script>
    <script>
        const testCase = async_test('Styles can be set by object.cloneNode()');
        window.onload = testCase.step_func_done(() => {
            window.nodes = document.getElementById('nodes');
            window.node1 = document.getElementById('node1');
            window.node1.style.background = "yellow";
            window.node1.style.color = "red";
            window.node2 = document.getElementById('node1').cloneNode(true);
            window.node2.id =  "node2";
            window.node3 = document.getElementById('node3');
            window.node3.style.background = "blue";
            window.node3.style.color = "green";
            window.node4 = document.getElementById('node3').cloneNode(false);
            window.node4.id =  "node4";
            window.node4.innerHTML = "Node #4";

            nodes.appendChild(node1);
            nodes.appendChild(node2);
            nodes.appendChild(node3);
            nodes.appendChild(node4);

            assert_equals(node1.style.background, "yellow");
            assert_equals(node2.style.background, "yellow");
            assert_equals(node3.style.background, "blue");
            assert_equals(node4.style.background, "blue");
  
            assert_equals(node1.style.color, "red");
            assert_equals(node2.style.color, "red");
            assert_equals(node3.style.color, "green");
            assert_equals(node4.style.color, "green");

            assert_equals(window.getComputedStyle(node1).background, window.getComputedStyle(node2).background);
            assert_equals(window.getComputedStyle(node3).background, window.getComputedStyle(node4).background);

            assert_equals(window.getComputedStyle(node1).color, window.getComputedStyle(node2).color);
            assert_equals(window.getComputedStyle(node3).color, window.getComputedStyle(node4).color);

            window.ops = document.getElementById('ops');
            ops.style.color = 'red';
            window.clonedOps = ops.cloneNode(true);
            window.violetOps = document.getElementById('violetOps');

            violetOps.style.background = 'rgb(238, 130, 238)';
            document.getElementsByTagName('body')[0].appendChild(clonedOps);

            assert_equals(ops.style.background, "");
            assert_equals(ops.style.color, "red");
            assert_equals(clonedOps.style.background, "");
            assert_equals(violetOps.style.background, "rgb(238, 130, 238)");

            assert_equals(window.getComputedStyle(clonedOps).background, window.getComputedStyle(ops).background);
            assert_equals(window.getComputedStyle(clonedOps).color, window.getComputedStyle(ops).color);
            assert_not_equals(window.getComputedStyle(ops).background, window.getComputedStyle(violetOps).background);
            assert_not_equals(window.getComputedStyle(clonedOps).background, window.getComputedStyle(violetOps).background);

            assert_equals(ops.id, "ops");
            assert_equals(ops.id, clonedOps.id);
       });
    </script>
</head>
<body>

    <div id="nodes">
	This is a div (nodes)
        <div id="node1"> This is a div. (node 1 or 2)</div>
        <div id="node3"> This is a div. (node 3 or 4)</div>
    </div>

    <div id="ops" style="background: rgb(238, 130, 238)">
         Yet another div.
    </div>

    <div id="violetOps">
         Yet another div.
    </div>

</body>
</html>
chromium/third_party/blink/web_tests/http/tests/security/contentSecurityPolicy/inline-style-allowed-while-cloning-objects.html
