stream-append-has-invalidation.html (1443B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>HTML partial updates - :has invalidation with streaming</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> 8 .container { 9 width: 200px; 10 height: 100px; 11 background: green; 12 } 13 14 .container:has(.red) { 15 background: red; 16 } 17 18 .container:has(.blue) { 19 background: blue; 20 } 21 </style> 22 <div class="container"> 23 <div contentname="content"><span class="red">Has red</span></div> 24 </div> 25 26 <script> 27 const container = document.querySelector(".container"); 28 async function update(html) { 29 const writer = container.streamAppendHTMLUnsafe().getWriter(); 30 await writer.write(` 31 <template contentmethod="replace-children"> 32 <div contentname="content">${html}</div> 33 </template>`); 34 await writer.close(); 35 } 36 promise_test(async () => { 37 for (let i = 0; i < 20; ++i) { 38 await update('<span class="blue">Has blue</span>'); 39 await new Promise((resolve) => requestAnimationFrame(resolve)); 40 await update("Green (no span)"); 41 await new Promise((resolve) => requestAnimationFrame(resolve)); 42 assert_equals(container.textContent.trim(), "Green (no span)"); 43 assert_equals( 44 getComputedStyle(container).backgroundColor, 45 "rgb(0, 128, 0)" 46 ); 47 } 48 }, ""); 49 </script>