Node-appendChild-script-and-default-style-meta-from-fragment.tentative.html (2473B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Node.appendChild: inserting script and default-style meta from a fragment</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <link rel="alternate stylesheet" title="alternative" href="data:text/css,%23div{display:none}"> 7 <div id="div">hello</div> 8 <script> 9 let scriptRan = false; 10 let computedStyleInPreScript = null; 11 let computedStyleInPostScript = null; 12 test(() => { 13 const div = document.getElementById("div"); 14 15 // 1. Gets inserted *before* the `<meta>` tag. Cannot observe the meta tag's 16 // effect, because this script runs before the meta tag's post-insertion steps 17 // run, and the meta tag's post-insertion steps is where the default style 18 // sheet actually changes. 19 const preScript = document.createElement("script"); 20 preScript.textContent = ` 21 computedStyleInPreScript = getComputedStyle(div).display; 22 scriptRan = true; 23 `; 24 25 // 2. The `<meta>` tag itself. 26 const meta = document.createElement("meta"); 27 meta.httpEquiv = "default-style"; 28 meta.content = "alternative"; 29 30 // 3. Gets inserted *after* the `<meta>` tag. Observes the meta tag's effect, 31 // because this script runs after the meta tag's post-insertion steps, which 32 // has the script-observable change to the default style sheet. 33 const postScript = document.createElement("script"); 34 postScript.textContent = ` 35 computedStyleInPostScript = getComputedStyle(div).display; 36 scriptRan = true; 37 `; 38 39 const df = document.createDocumentFragment(); 40 df.append(preScript, meta, postScript); 41 42 assert_equals(getComputedStyle(div).display, "block", 43 "div still has block display before meta insertion"); 44 assert_false(scriptRan, "script has not run before insertion"); 45 46 document.head.appendChild(df); 47 assert_true(scriptRan, "script has run after insertion"); 48 assert_equals(computedStyleInPreScript, "block", 49 "display: none; style was NOT applied during DOM insertion steps, " + 50 "before earlier-inserted script post-insertion steps run"); 51 assert_equals(computedStyleInPostScript, "none", 52 "display: none; style WAS applied during DOM post-insertion steps, " + 53 "before later-inserted script runs"); 54 assert_equals(getComputedStyle(div).display, "none", 55 "style remains display: none; after insertion"); 56 57 }, "Inserting <meta> that uses alternate stylesheets, applies the style " + 58 "during DOM post-insertion steps"); 59 </script>