dynamic-change-with-slotted-text.html (849B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://issues.chromium.org/383593255"> 4 <link rel="match" href="dynamic-change-with-slotted-text-ref.html"> 5 6 <div> 7 $$\text{math}$$ 8 after 9 <p></p> 10 </div> 11 12 <script> 13 14 let div = document.querySelector("div"); 15 let shadow = div.attachShadow({mode: "open"}); 16 shadow.innerHTML = "<slot style='display:block;content-visibility: hidden'></slot>"; 17 let slot = shadow.querySelector("slot"); 18 19 requestAnimationFrame(() => { 20 getComputedStyle(div.querySelector("p")).width; 21 let t1 = div.firstChild; 22 let t2 = t1.splitText(1); 23 let t3 = t2.splitText(15); 24 let d = document.createElement("div"); 25 d.innerText = "math"; 26 t2.replaceWith(d); 27 requestAnimationFrame(() => { 28 slot.style.contentVisibility = ""; 29 document.documentElement.classList.remove("reftest-wait"); 30 }); 31 }); 32 </script>