stream-append-html-unsafe.html (7086B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8" /> 3 <title>HTML partial updates - streamAppendHTMLUnsafe</title> 4 <link rel=help href="https://github.com/WICG/declarative-partial-updates"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style id="style"></style> 8 <p id="target"></p> 9 <script> 10 11 promise_test(async t => { 12 const placeholder = document.createElement("div"); 13 placeholder.innerHTML = "A"; 14 const writable = placeholder.streamAppendHTMLUnsafe(); 15 assert_true(writable instanceof WritableStream, "node.streamAppendHTMLUnsafe() returns a writable stream"); 16 const response = new Response("<span>B</span>", {headers: {"Content-Type": "text/html"}}); 17 await response.body.pipeThrough(new TextDecoderStream()).pipeTo(writable); 18 assert_equals(placeholder.textContent, "AB"); 19 assert_true(response.bodyUsed); 20 }, "piping a response into streamAppendHTMLUnsafe()"); 21 22 promise_test(async t => { 23 const placeholder = document.createElement("div"); 24 placeholder.innerHTML = "<span>A</span>"; 25 const writable = placeholder.streamAppendHTMLUnsafe(); 26 assert_true(writable instanceof WritableStream, "node.streamAppendHTMLUnsafe() returns a writable stream"); 27 const writer = writable.getWriter(); 28 await writer.write("B"); 29 await writer.close(); 30 assert_equals(placeholder.textContent, "AB"); 31 }, "writing a string to streamAppendHTMLUnsafe()"); 32 33 promise_test(async t => { 34 const placeholder = document.createElement("div"); 35 placeholder.innerHTML = "<span>A</span>"; 36 const writable = placeholder.streamAppendHTMLUnsafe(); 37 assert_true(writable instanceof WritableStream, "node.streamAppendHTMLUnsafe() returns a writable stream"); 38 const writer = writable.getWriter(); 39 await writer.write("<span>B</span>"); 40 assert_equals(placeholder.textContent, "AB"); 41 await writer.close(); 42 }, "streamAppendHTMLUnsafe() does not buffer until close()"); 43 44 promise_test(async t => { 45 const placeholder = document.createElement("div"); 46 placeholder.innerHTML = "Before"; 47 const writable = placeholder.streamAppendHTMLUnsafe(); 48 assert_true(writable instanceof WritableStream, "streamAppendHTMLUnsafe() returns a writable stream"); 49 const writer = writable.getWriter(); 50 await promise_rejects_js(t, TypeError, writer.write(Symbol("sym"))); 51 assert_equals(placeholder.textContent, "Before"); 52 }, "writing a Symbol to streamAppendHTMLUnsafe()"); 53 54 promise_test(async t => { 55 const placeholder = document.createElement("div"); 56 placeholder.innerHTML = "12"; 57 const writable = placeholder.streamAppendHTMLUnsafe(); 58 assert_true(writable instanceof WritableStream, "node.streamAppendHTMLUnsafe() returns a writable stream"); 59 const writer = writable.getWriter(); 60 await writer.write(345); 61 await writer.close(); 62 assert_equals(placeholder.textContent, "12345"); 63 assert_equals(placeholder.childNodes.length, 1); 64 assert_equals(placeholder.firstChild.nodeType, Node.TEXT_NODE); 65 assert_equals(placeholder.firstChild.textContent, "12345"); 66 }, "writing numbers to streamAppendHTMLUnsafe()"); 67 68 promise_test(async t => { 69 const placeholder = document.createElement("div"); 70 placeholder.innerHTML = "start "; 71 const writable = placeholder.streamAppendHTMLUnsafe(); 72 assert_true(writable instanceof WritableStream, "node.streamAppendHTMLUnsafe() returns a writable stream"); 73 const writer = writable.getWriter(); 74 await writer.write(null); 75 await writer.write(" "); 76 await writer.write(undefined); 77 await writer.close(); 78 assert_equals(placeholder.textContent, "start null undefined"); 79 }, "writing null or undefined to streamAppendHTMLUnsafe()"); 80 81 promise_test(async t => { 82 const style = document.querySelector("#style"); 83 const writable = style.streamAppendHTMLUnsafe(); 84 assert_true(writable instanceof WritableStream, "node.streamAppendHTMLUnsafe() returns a writable stream"); 85 const writer = await writable.getWriter(); 86 await writer.write("#target { color: rgba(100, 0, 100); }"); 87 await writer.close(); 88 assert_equals(getComputedStyle(document.querySelector("#target")).color, "rgb(100, 0, 100)"); 89 }, "streamAppendHTMLUnsafe() can stream into <style>"); 90 91 promise_test(async t => { 92 const placeholder = document.createElement("div"); 93 placeholder.innerHTML = "start "; 94 const writable = placeholder.streamAppendHTMLUnsafe(); 95 const writer = writable.getWriter(); 96 await writer.write("ABC"); 97 await writer.abort("abort-reason"); 98 await writer.write("DEF").catch(() => {}); 99 assert_equals(placeholder.textContent, "start ABC"); 100 }, "Aborting streamAppendHTMLUnsafe()"); 101 102 promise_test(async t => { 103 const placeholder = document.createElement("div"); 104 const writer1 = placeholder.streamAppendHTMLUnsafe().getWriter(); 105 const writer2 = placeholder.streamAppendHTMLUnsafe().getWriter(); 106 await writer1.write("<span>A</span>"); 107 await writer2.write("<span>B</span>"); 108 await new Promise(resolve => requestAnimationFrame(resolve)); 109 await writer1.write("C"); 110 await writer1.close(); 111 await writer2.close(); 112 assert_equals(placeholder.textContent, "ABC"); 113 }, "Interleaved streamAppendHTMLUnsafe() writes"); 114 115 promise_test(async t => { 116 const element = document.createElement("div"); 117 const shadowRoot = element.attachShadow({mode: "open"}); 118 const writer = shadowRoot.streamAppendHTMLUnsafe().getWriter(); 119 await writer.write("<div id=added>A</div>"); 120 assert_equals(shadowRoot.getElementById("added").textContent, "A"); 121 }, "streamAppendHTMLUnsafe into a ShadowRoot"); 122 123 promise_test(async t => { 124 const element = document.createElement("template"); 125 const writer = element.streamAppendHTMLUnsafe().getWriter(); 126 await writer.write("<div id=added>A</div>"); 127 assert_equals(element.content.getElementById("added").textContent, "A"); 128 }, "streamAppendHTMLUnsafe into a template"); 129 130 promise_test(async t => { 131 const element = document.createElement("div"); 132 document.body.append(element); 133 window.did_eval_script = false; 134 const writer = element.streamAppendHTMLUnsafe().getWriter(); 135 assert_false(window.did_eval_script); 136 await writer.write("<script>window.did_eval_script = true;"); 137 assert_false(window.did_eval_script); 138 await writer.write("<"); 139 assert_false(window.did_eval_script); 140 await writer.write("/script>"); 141 assert_true(window.did_eval_script); 142 }, "streamAppendHTMLUnsafe should execute scripts when connected"); 143 144 promise_test(async t => { 145 const element = document.createElement("div"); 146 window.did_eval_script = false; 147 const writer = element.streamAppendHTMLUnsafe().getWriter(); 148 assert_false(window.did_eval_script); 149 await writer.write("<script>window.did_eval_script = true;"); 150 assert_false(window.did_eval_script); 151 await writer.write("<"); 152 assert_false(window.did_eval_script); 153 await writer.write("/script>"); 154 assert_false(window.did_eval_script); 155 }, "streamAppendHTMLUnsafe should not execute scripts when disconnected"); 156 </script>