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