style-attr-update-across-documents.html (2265B)
1 <!DOCTYPE html> 2 <title>CSSStyleDeclaration setter works when a node changes document</title> 3 <link rel="author" title="Raphael Kubo da Costa" href="raphael.kubo.da.costa@intel.com"> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-camel-cased-attribute"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit-cased-attribute"> 6 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-dashed-attribute"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <div id="original-div" style="background-color:green; height: 100px; width: 100px"></div> 10 <script> 11 // Create and return a 100x100 red <div>. 12 function createDiv(containerDocument) { 13 const div = containerDocument.createElement("div"); 14 div.style.backgroundColor = "red"; 15 div.style.height = "100px"; 16 div.style.width = "100px"; 17 containerDocument.body.appendChild(div); 18 return div; 19 } 20 21 async_test(t => { 22 const iframeElement = document.createElement("iframe"); 23 iframeElement.addEventListener("load", t.step_func_done(() => { 24 const originalDiv = document.getElementById("original-div"); 25 const newDiv = createDiv(iframeElement.contentDocument); 26 27 assert_not_equals(newDiv.ownerDocument, document, 28 "The new <div> belongs to the iframe, not the main document"); 29 30 document.body.insertBefore(newDiv, originalDiv); 31 assert_equals(newDiv.ownerDocument, document, 32 "The new <div> now belongs to the main document"); 33 34 newDiv.style.backgroundColor = "blue"; 35 assert_equals(window.getComputedStyle(newDiv).getPropertyValue("background-color"), 36 "rgb(0, 0, 255)", 37 "The new <div>'s background-color is blue"); 38 39 document.body.removeChild(iframeElement); 40 41 newDiv.style.backgroundColor = "green"; 42 assert_equals(window.getComputedStyle(newDiv).getPropertyValue("background-color"), 43 "rgb(0, 128, 0)", 44 "The new <div>'s background-color is green"); 45 })); 46 document.body.appendChild(iframeElement); 47 }, "Changing the style of a node that switched documents works"); 48 </script>