inline-style-allowed-while-cloning-objects.sub.html (5682B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 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> 10 <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"); 14 })); 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); 32 test(function() { 33 assert_equals(node1.style.background.match(/yellow/)[0], "yellow") 34 }); 35 test(function() { 36 assert_equals(node2.style.background.match(/yellow/)[0], "yellow") 37 }); 38 test(function() { 39 assert_equals(node3.style.background.match(/blue/)[0], "blue") 40 }); 41 test(function() { 42 assert_equals(node4.style.background.match(/blue/)[0], "blue") 43 }); 44 test(function() { 45 assert_equals(node1.style.color, "red") 46 }); 47 test(function() { 48 assert_equals(node2.style.color, "red") 49 }); 50 test(function() { 51 assert_equals(node3.style.color, "green") 52 }); 53 test(function() { 54 assert_equals(node4.style.color, "green") 55 }); 56 test(function() { 57 assert_equals(window.getComputedStyle(node1).background, window.getComputedStyle(node2).background) 58 }); 59 test(function() { 60 assert_equals(window.getComputedStyle(node3).background, window.getComputedStyle(node4).background) 61 }); 62 test(function() { 63 assert_equals(window.getComputedStyle(node1).color, window.getComputedStyle(node2).color) 64 }); 65 test(function() { 66 assert_equals(window.getComputedStyle(node3).color, window.getComputedStyle(node4).color) 67 }); 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); 74 test(function() { 75 assert_equals(ops.style.background, "") 76 }); 77 test(function() { 78 assert_equals(ops.style.color, "red") 79 }); 80 test(function() { 81 assert_equals(clonedOps.style.background, "") 82 }); 83 test(function() { 84 assert_equals(clonedOps.style.color, "red") 85 }); 86 test(function() { 87 assert_equals(violetOps.style.background.match(/rgb\(238, 130, 238\)/)[0], "rgb(238, 130, 238)") 88 }); 89 test(function() { 90 assert_equals(window.getComputedStyle(clonedOps).background, window.getComputedStyle(ops).background) 91 }); 92 test(function() { 93 assert_equals(window.getComputedStyle(clonedOps).color, window.getComputedStyle(ops).color) 94 }); 95 test(function() { 96 assert_equals(window.getComputedStyle(ops).background, window.getComputedStyle(violetOps).background) 97 }); 98 test(function() { 99 assert_equals(window.getComputedStyle(clonedOps).background, window.getComputedStyle(violetOps).background) 100 }); 101 test(function() { 102 assert_equals(ops.id, "ops") 103 }); 104 test(function() { 105 assert_equals(ops.id, clonedOps.id) 106 }); 107 test(function() { 108 let el = document.getElementById("svg"); 109 assert_equals(el.getAttribute("style"), ""); 110 el.style.background = violetOps.style.background; 111 assert_not_equals(el.style.background, ""); 112 let clone = el.cloneNode(true); 113 assert_equals(el.style.background, clone.style.background) 114 }, "non-HTML namespace"); 115 }; 116 </script> 117 </head> 118 119 <body> 120 <p> 121 This test ensures that styles can be set by object.cloneNode() 122 </p> 123 <div id="nodes"> 124 This is a div (nodes) 125 <div id="node1"> This is a div. (node 1 or 2)</div> 126 <div id="node3"> This is a div. (node 3 or 4)</div> 127 </div> 128 <div id="ops" style="background: rgb(238, 130, 238)"> 129 Yet another div. 130 </div> 131 <div id="violetOps"> 132 Yet another div. 133 </div> 134 <svg id="svg" style="background: rgb(238, 130, 238)"></svg> 135 <div id="log"></div> 136 </body> 137 138 </html>