insertimage-with-replacing-selection-in-picture-element.html (1649B)
1 <!doctype html> 2 <html class="test-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 @keyframes keyframes0 {} 7 picture { 8 animation: keyframes0 300ms alternate,alternate paused; 9 } 10 ruby { 11 animation: keyframes0 step-start -1.5s normal backwards paused; 12 } 13 </style> 14 <script> 15 document.addEventListener("DOMContentLoaded", () => { 16 find("AAA") 17 const header = document.querySelector("header"); 18 addEventListener("animationend", () => { 19 const imgsrc = 20 "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjIyt5EXfQAAAU5JREFUeF7t07ENACAMxMDA/jsDBTtcY6TUlmx+zcx510MGNuKG/QYKgL9CAQqADWB8CygANoDxLaAA2ADGt4ACYAMY3wIKgA1gfAsoADaA8S2gANgAxreAAmADGN8CCoANYHwLKAA2gPEtoADYAMa3gAJgAxjfAgqADWB8CygANoDxLaAA2ADGt4ACYAMY3wIKgA1gfAsoADaA8S2gANgAxreAAmADGN8CCoANYHwLKAA2gPEtoADYAMa3gAJgAxjfAgqADWB8CygANoDxLaAA2ADGt4ACYAMY3wIKgA1gfAsoADaA8S2gANgAxreAAmADGN8CCoANYHwLKAA2gPEtoADYAMa3gAJgAxjfAgqADWB8CygANoDxLaAA2ADGt4ACYAMY3wIKgA1gfAsoADaA8S2gANgAxreAAmADGN8CCoANYHwLKAA2gPEtAAe4i54BvwLfXFAAAAAASUVORK5CYII="; 21 function doIt() { 22 getSelection().extend(header, 0); 23 document.querySelector("figure").insertAdjacentElement("beforeend", header); 24 document.execCommand("insertImage", false, imgsrc); 25 } 26 doIt(); 27 doIt(); 28 doIt(); 29 document.documentElement.removeAttribute("class"); 30 }, {once: true}); 31 document.designMode = "on"; 32 }, {once:true}); 33 </script> 34 </head> 35 <body> 36 <picture autocapitalize="sentences"> 37 <figure> 38 <figcaption> 39 </figure> 40 <ruby contenteditable="true"> 41 AAA 42 <header> 43 </header> 44 </ruby> 45 </picture> 46 </body> 47 </html>