|
7 | 7 | <div id="div">hello</div>
|
8 | 8 | <script>
|
9 | 9 | let scriptRan = false;
|
10 |
| -let computedStyleDuringInsertion = null; |
| 10 | +let computedStyleInPreScript = null; |
| 11 | +let computedStyleInPostScript = null; |
11 | 12 | test(() => {
|
12 | 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. |
13 | 26 | const meta = document.createElement("meta");
|
14 | 27 | meta.httpEquiv = "default-style";
|
15 | 28 | meta.content = "alternative";
|
16 |
| - const script = document.createElement("script"); |
17 |
| - script.textContent = ` |
18 |
| - computedStyleDuringInsertion = getComputedStyle(div).display; |
| 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; |
19 | 36 | scriptRan = true;
|
20 | 37 | `;
|
| 38 | + |
21 | 39 | const df = document.createDocumentFragment();
|
22 |
| - df.appendChild(script); |
23 |
| - df.appendChild(meta); |
24 |
| - assert_equals(getComputedStyle(div).display, "block", "div has block display"); |
| 40 | + df.append(preScript, meta, postScript); |
| 41 | + |
| 42 | + assert_equals(getComputedStyle(div).display, "block", |
| 43 | + "div still has block display before meta insertion"); |
25 | 44 | assert_false(scriptRan, "script has not run before insertion");
|
| 45 | + |
26 | 46 | document.head.appendChild(df);
|
27 | 47 | assert_true(scriptRan, "script has run after insertion");
|
28 |
| - assert_equals(computedStyleDuringInsertion, "none", |
29 |
| - "display: none; style was applied during DOM insertion, before " + |
30 |
| - "later-inserted script runs"); |
| 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"); |
31 | 54 | assert_equals(getComputedStyle(div).display, "none",
|
32 | 55 | "style remains display: none; after insertion");
|
| 56 | + |
33 | 57 | }, "Inserting <meta> that uses alternate stylesheets, applies the style " +
|
34 |
| - "during DOM insertion, and before script runs as a result of any atomic insertions"); |
| 58 | + "during DOM post-insertion steps"); |
35 | 59 | </script>
|
0 commit comments