Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /domparsing/createContextualFragment-external-scripts-async.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8" />
<title>External scripts from createContextualFragment() execute as async once inserted</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
// In the Fragment scripting mode, the HTML parser does not set force async to
// false on script elements it inserts. Before insertion, script.async is true,
// and once inserted, external scripts without an async attribute execute
// asynchronously rather than in order.
let counter = 0;
function setupEvents(t) {
const id = ++counter;
window.current_test_id = id;
window.events = [];
const slowRan = new Promise((resolve) => { window.on_slow = resolve; });
const fastRan = new Promise((resolve) => { window.resolve_fast = resolve; });
t.add_cleanup(() => {
if (window.current_test_id === id) {
delete window.current_test_id;
}
delete window.on_slow;
delete window.resolve_fast;
});
const markup =
`<script src="resources/slow.js?pipe=trickle(d0.3)&id=${id}"><` + "/script>" +
`<script src="data:text/javascript,if (window.current_test_id === ${id}) { window.events.push('fast'); window.resolve_fast(); }"><` + "/script>" +
`<script>if (window.current_test_id === ${id}) window.events.push('inline');<` + "/script>";
return { markup, slowRan, fastRan };
}
promise_test(async (t) => {
const { markup, slowRan, fastRan } = setupEvents(t);
const range = document.createRange();
range.selectNodeContents(document.body);
const fragment = range.createContextualFragment(markup);
assert_array_equals(window.events, [], "scripts don't run before the fragment is inserted");
for (const script of fragment.querySelectorAll("script")) {
assert_true(script.async, "script.async is true before insertion");
}
const container = document.createElement("div");
container.append(fragment);
document.body.append(container);
t.add_cleanup(() => container.remove());
assert_array_equals(window.events, ["inline"], "the inline script runs synchronously when connected");
await Promise.all([slowRan, fastRan]);
assert_array_equals(window.events, ["inline", "fast", "slow"],
"external scripts without async execute as async");
}, "External scripts from createContextualFragment() have async=true and execute as async once connected");
</script>
</body>