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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<!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="placeholder">
</div>
<style id="style"></style>
<p id="target"></p>
<script>
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
const writable = placeholder.patchSelf();
assert_true(writable instanceof WritableStream, "node.patchSelf() returns a writable stream");
const response = new Response("Content", {headers: {"Content-Type": "text/html"}});
response.body.pipeTo(writable);
assert_true(placeholder.currentPatch instanceof Patch, "currentPatch should be a Patch right after connecting a stream");
await placeholder.currentPatch.finished;
assert_equals(placeholder.textContent, "Content");
assert_equals(placeholder.currentPatch, null);
assert_true(response.bodyUsed);
}, "streaming a response into node.patchSelf()");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
const writable = placeholder.patchSelf();
assert_true(writable instanceof WritableStream, "node.patchSelf() returns a writable stream");
const writer = writable.getWriter();
await writer.write("Text");
const {currentPatch} = placeholder;
assert_true(currentPatch instanceof Patch, "currentPatch should be a Patch right after connecting a stream");
writer.close();
await currentPatch.finished;
assert_equals(placeholder.textContent, "Text");
assert_equals(placeholder.currentPatch, null);
}, "streaming text directly into node.patchSelf()");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
placeholder.innerHTML = "Before";
const writable = placeholder.patchSelf();
assert_true(writable instanceof WritableStream, "node.patchSelf() returns a writable stream");
const writer = writable.getWriter();
const {currentPatch} = placeholder;
const reason = await writer.write(Symbol("sym")).catch(e => Promise.resolve(e));
const result = await currentPatch.finished.then(() => Promise.resolve("ok")).catch(e => Promise.resolve(e));
assert_true(result instanceof DOMException, `Expected a DOMException and received ${result}`);
assert_equals(result.name, "DataError");
assert_equals(result, reason);
assert_equals(placeholder.textContent, "");
assert_equals(placeholder.currentPatch, null);
}, "streaming a Symbol directly into node.patchSelf()");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
const writable = placeholder.patchSelf();
assert_true(writable instanceof WritableStream, "node.patchSelf() returns a writable stream");
const writer = writable.getWriter();
await writer.write(12345);
const {currentPatch} = placeholder;
writer.close();
await currentPatch.finished;
assert_equals(placeholder.textContent, "12345");
assert_equals(placeholder.currentPatch, null);
}, "streaming numbers directly into node.patchSelf()");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
const writable = placeholder.patchSelf();
assert_true(writable instanceof WritableStream, "node.patchSelf() returns a writable stream");
const writer = writable.getWriter();
await writer.write(null);
await writer.write(" ");
await writer.write(undefined);
const {currentPatch} = placeholder;
writer.close();
await currentPatch.finished;
assert_equals(placeholder.textContent, "null undefined");
assert_equals(placeholder.currentPatch, null);
}, "streaming null or undefined directly into node.patchSelf()");
promise_test(async t => {
const style = document.querySelector("#style");
const writable = style.patchSelf();
const response = new Response("#target { color: rgba(100, 0, 100); }", {headers: {"Content-Type": "text/css"}});
await response.body.pipeTo(writable);
assert_equals(getComputedStyle(document.querySelector("#target")).color, "rgb(100, 0, 100)");
}, "patchSelf() can stream into elements that receive raw text like <style>");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
const writable = placeholder.patchSelf();
const writer = writable.getWriter();
const encoder = new TextEncoder();
await writer.write(encoder.encode("ABC"));
const patch = placeholder.currentPatch;
await writer.abort("abort-reason");
await writer.write(encoder.encode("DEF")).catch(() => {});
const result = await patch.finished.then(() =>
Promise.resolve("success")).catch(e => Promise.resolve(e));
assert_equals(placeholder.textContent, "ABC");
assert_equals(result, "abort-reason");
}, "Aborting A node.patchSelf() stream");
promise_test(async t => {
const placeholder = document.querySelector("#placeholder");
let writable = placeholder.patchSelf();
assert_true(writable instanceof WritableStream, "node.patchSelf() returns a writable stream");
const response1 = new Response("content1", {headers: {"Content-Type": "text/html"}});
const response2 = new Response("content2", {headers: {"Content-Type": "text/html"}});
response1.body.pipeTo(writable);
const first_patch = placeholder.currentPatch;
writable = placeholder.patchSelf();
const {currentPatch} = placeholder;
response2.body.pipeTo(writable);
await promise_rejects_dom(t, "AbortError", first_patch.finished);
await currentPatch.finished;
assert_equals(placeholder.textContent, "content2");
assert_equals(placeholder.currentPatch, null);
}, "A newer patch aborts the old one with an AbortError");
</script>
|
