5 <!-- Programmatically converted from a WebKit Reftest, please forgive resulting idiosyncracies.-->
6 <meta http-equiv=
"Content-Security-Policy" content=
"style-src 'self'; script-src 'self' 'unsafe-inline'; connect-src 'self';">
7 <title>inline-style-allowed-while-cloning-objects
</title>
8 <script src=
"/resources/testharness.js"></script>
9 <script src=
"/resources/testharnessreport.js"></script>
11 var t
= async_test("Test that violation report event was fired");
12 window
.addEventListener("securitypolicyviolation", t
.step_func_done(function(e
) {
13 assert_equals(e
.violatedDirective
, "style-src-attr");
15 window
.onload = function() {
16 window
.nodes
= document
.getElementById('nodes');
17 window
.node1
= document
.getElementById('node1');
18 window
.node1
.style
.background
= "yellow";
19 window
.node1
.style
.color
= "red";
20 window
.node2
= document
.getElementById('node1').cloneNode(true);
21 window
.node2
.id
= "node2";
22 window
.node3
= document
.getElementById('node3');
23 window
.node3
.style
.background
= "blue";
24 window
.node3
.style
.color
= "green";
25 window
.node4
= document
.getElementById('node3').cloneNode(false);
26 window
.node4
.id
= "node4";
27 window
.node4
.innerHTML
= "Node #4";
28 nodes
.appendChild(node1
);
29 nodes
.appendChild(node2
);
30 nodes
.appendChild(node3
);
31 nodes
.appendChild(node4
);
33 assert_equals(node1
.style
.background
.match(/yellow/)[0], "yellow")
36 assert_equals(node2
.style
.background
.match(/yellow/)[0], "yellow")
39 assert_equals(node3
.style
.background
.match(/blue/)[0], "blue")
42 assert_equals(node4
.style
.background
.match(/blue/)[0], "blue")
45 assert_equals(node1
.style
.color
, "red")
48 assert_equals(node2
.style
.color
, "red")
51 assert_equals(node3
.style
.color
, "green")
54 assert_equals(node4
.style
.color
, "green")
57 assert_equals(window
.getComputedStyle(node1
).background
, window
.getComputedStyle(node2
).background
)
60 assert_equals(window
.getComputedStyle(node3
).background
, window
.getComputedStyle(node4
).background
)
63 assert_equals(window
.getComputedStyle(node1
).color
, window
.getComputedStyle(node2
).color
)
66 assert_equals(window
.getComputedStyle(node3
).color
, window
.getComputedStyle(node4
).color
)
68 window
.ops
= document
.getElementById('ops');
69 ops
.style
.color
= 'red';
70 window
.clonedOps
= ops
.cloneNode(true);
71 window
.violetOps
= document
.getElementById('violetOps');
72 violetOps
.style
.background
= 'rgb(238, 130, 238)';
73 document
.getElementsByTagName('body')[0].appendChild(clonedOps
);
75 assert_equals(ops
.style
.background
, "")
78 assert_equals(ops
.style
.color
, "red")
81 assert_equals(clonedOps
.style
.background
, "")
84 assert_equals(violetOps
.style
.background
.match(/rgb\(238, 130, 238\)/)[0], "rgb(238, 130, 238)")
87 assert_equals(window
.getComputedStyle(clonedOps
).background
, window
.getComputedStyle(ops
).background
)
90 assert_equals(window
.getComputedStyle(clonedOps
).color
, window
.getComputedStyle(ops
).color
)
93 assert_equals(window
.getComputedStyle(ops
).background
, window
.getComputedStyle(violetOps
).background
)
96 assert_equals(window
.getComputedStyle(clonedOps
).background
, window
.getComputedStyle(violetOps
).background
)
99 assert_equals(ops
.id
, "ops")
102 assert_equals(ops
.id
, clonedOps
.id
)
105 let el
= document
.getElementById("svg");
106 assert_equals(el
.getAttribute("style"), "");
107 el
.style
.background
= violetOps
.style
.background
;
108 assert_not_equals(el
.style
.background
, "");
109 let clone
= el
.cloneNode(true);
110 assert_equals(el
.style
.background
, clone
.style
.background
)
111 }, "non-HTML namespace");
118 This test ensures that styles can be set by object.cloneNode()
121 This is a div (nodes)
122 <div id=
"node1"> This is a div. (node
1 or
2)
</div>
123 <div id=
"node3"> This is a div. (node
3 or
4)
</div>
125 <div id=
"ops" style=
"background: rgb(238, 130, 238)">
131 <svg id=
"svg" style=
"background: rgb(238, 130, 238)"></svg>