Node-appendChild-script-in-script.tentative.html (1980B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Node.appendChild: inserting a script and some code in an empty script</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <body> 7 <script id="s1"></script> 8 <script> 9 const happened = []; 10 test(() => { 11 const s1 = document.getElementById("s1"); 12 const s2 = document.createElement("script"); 13 14 // This script, which is ultimately a *child* of the 15 // already-connected-but-empty `s1` script, runs second, after `s1` runs. See 16 // the example in 17 // http://html.spec.whatwg.org/C/#script-processing-model:children-changed-steps 18 // for more information. 19 // 20 // HISTORICAL CONTEXT: There used to be a condition in the HTML standard that 21 // said an "outer" script must be "prepared" when a node gets inserted into 22 // the script. BUT it also stipulated that if the insertion consists of any 23 // "inner" (nested, essentially) script elements, then this "outer" script 24 // must prepare/execute after any of those "inner" newly-inserted scripts 25 // themselves get prepared. 26 // 27 // This changed in https://github.com/whatwg/html/pull/10188. 28 s2.textContent = ` 29 happened.push("s2"); 30 31 // This text never executes in the outer script, because by the time this 32 // gets appended, the outer script has "already started" [1], so it does not 33 // get re-prepared/executed a second time. 34 // 35 // [1]: https://html.spec.whatwg.org/C#already-started 36 s1.appendChild(new Text("happened.push('s1ran');")); 37 38 happened.push("s2ran"); 39 `; 40 41 const df = document.createDocumentFragment(); 42 df.appendChild(new Text(`happened.push("s1");`)); 43 df.appendChild(s2); 44 45 assert_array_equals(happened, []); 46 s1.appendChild(df); 47 assert_array_equals(happened, ["s1", "s2", "s2ran"]); 48 }, "An outer script whose preparation/execution gets triggered by the " + 49 "insertion of a 'nested'/'inner' script, executes *before* the inner " + 50 "script executes"); 51 </script>