Node-appendChild-script-and-style.tentative.html (3826B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Node.appendChild: inserting a script and a style where the script modifies the style</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <body> 7 <script> 8 // <script> & <style> element tests. 9 test(() => { 10 window.happened = []; 11 window.style = document.createElement("style"); 12 let styleSheet = null; 13 14 style.appendChild(new Text("body {}")); 15 const script = document.createElement("script"); 16 script.textContent = ` 17 styleSheet = style.sheet; 18 happened.push(style.sheet ? "sheet" : null); 19 style.appendChild(new Text("body {}")); 20 happened.push(style.sheet?.cssRules.length); 21 `; 22 23 const div = document.createElement("div"); 24 div.appendChild(script); 25 div.appendChild(style); 26 27 assert_array_equals(happened, []); 28 document.body.appendChild(div); 29 assert_array_equals(happened, ["sheet", 2]); 30 assert_not_equals(style.sheet, styleSheet, "style sheet was created only once"); 31 }, "An earlier-inserted <script> synchronously observes a later-inserted " + 32 "<style> (via a div) being applied"); 33 34 test(() => { 35 window.happened = []; 36 window.style = document.createElement("style"); 37 let styleSheet = null; 38 39 style.appendChild(new Text("body {}")); 40 const script = document.createElement("script"); 41 script.textContent = ` 42 styleSheet = style.sheet; 43 happened.push(style.sheet ? "sheet" : null); 44 style.appendChild(new Text("body {}")); 45 happened.push(style.sheet?.cssRules.length); 46 `; 47 48 const df = document.createDocumentFragment(); 49 df.appendChild(script); 50 df.appendChild(style); 51 52 assert_array_equals(happened, []); 53 document.body.appendChild(df); 54 assert_array_equals(happened, ["sheet", 2]); 55 assert_not_equals(style.sheet, styleSheet, "style sheet was created only once"); 56 }, "An earlier-inserted <script> synchronously observes a later-inserted " + 57 "<style> (via a DocumentFragment) being applied"); 58 59 // <script> & <link rel=stylesheet> element tests. 60 test(() => { 61 window.happened = []; 62 window.link = document.createElement("link"); 63 link.rel = "stylesheet"; 64 link.href = "data:text/css,"; 65 66 const script = document.createElement("script"); 67 script.textContent = ` 68 happened.push(link.sheet ? "sheet" : null); 69 `; 70 71 const df = document.createDocumentFragment(); 72 df.appendChild(script); 73 df.appendChild(link); 74 75 assert_array_equals(happened, []); 76 document.body.appendChild(df); 77 assert_array_equals(happened, ["sheet"]); 78 }, "Earlier-inserted <script> (via a DocumentFragment) synchronously " + 79 "observes a later-inserted <link rel=stylesheet>'s CSSStyleSheet creation"); 80 81 test(() => { 82 window.happened = []; 83 window.link = document.createElement("link"); 84 link.rel = "stylesheet"; 85 link.href = "data:text/css,"; 86 87 const script = document.createElement("script"); 88 script.textContent = ` 89 happened.push(link.sheet ? "sheet" : null); 90 `; 91 92 const div = document.createElement("div"); 93 div.appendChild(script); 94 div.appendChild(link); 95 96 assert_array_equals(happened, []); 97 document.body.appendChild(div); 98 assert_array_equals(happened, ["sheet"]); 99 }, "Earlier-inserted <script> (via a div) synchronously observes a " + 100 "later-inserted <link rel=stylesheet>'s CSSStyleSheet creation"); 101 102 test(() => { 103 window.happened = []; 104 window.link = document.createElement("link"); 105 link.rel = "stylesheet"; 106 link.href = "data:text/css,"; 107 108 const script = document.createElement("script"); 109 script.textContent = ` 110 happened.push(link.sheet ? "sheet" : null); 111 `; 112 113 assert_array_equals(happened, []); 114 document.body.append(script, link); 115 assert_array_equals(happened, ["sheet"]); 116 }, "Earlier-inserted <script> (via a append()) synchronously observes a " + 117 "later-inserted <link rel=stylesheet>'s CSSStyleSheet creation"); 118 </script>