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
60
61
|
<!DOCTYPE HTML>
<meta charset="utf-8" />
<title>HTML partial updates - patch stream</title>
<link rel=help href="https://github.com/WICG/declarative-partial-updates">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="target">Default</div>
<div id="placeholder">
<style id="style"></style>
<p id=text>Hello <span id="content"></span></p>
</div>
<div id="placeholder2">
<span id="target"></span>
</div>
<script>
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
const writable = placeholder.patchAll();
assert_true(writable instanceof WritableStream, "node.patchAll() returns a writable stream");
const response = new Response(`
<div>before </div>
<template patchfor=content>world</template>
after
<template patchfor=style>#content { color: rgb(100, 0, 100); }</template>
`, {headers: {"Content-Type": "text/html"}});
const done = response.body.pipeTo(writable);
const content = placeholder.querySelector("#content");
let did_fire_event = false;
content.addEventListener("patch", () => {
did_fire_event = true;
});
assert_equals(placeholder.currentPatch, null);
await done;
assert_equals(content.textContent, "world");
assert_equals(getComputedStyle(content).color, "rgb(100, 0, 100)");
assert_equals(placeholder.querySelector("#text").textContent, "Hello world");
assert_true(did_fire_event);
}, "Streaming into node.patchAll() updates subtree by ID");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder2");
const writable = placeholder.patchAll();
const response = new Response("<template patchfor=target>content</template>", {headers: {"Content-Type": "text/html"}});
const inner_target = placeholder.querySelector("#target");
const outer_target = document.body.querySelector("#target");
await response.body.pipeTo(writable);
assert_equals(inner_target.textContent, "content");
assert_equals(outer_target.textContent, "Default");
}, "IDs are scoped to the patchAll target");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
placeholder.innerHTML = "before";
const writable = placeholder.patchAll();
const response = new Response("<template patchfor=placeholder>after</template>", {headers: {"Content-Type": "text/html"}});
await response.body.pipeTo(writable);
assert_equals(placeholder.textContent, "before");
}, "ID of the root node itself is ignored");
</script>
|
