<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" style="font: 24px monospace"> <!-- We need these two rects so that getBoundingClientRect of the <svg> does not just return the region covered by the <text>, which would result in the synthesizeMouse calls using the wrong positions. We don't use one big rect because that could interfere with text selection when dragging outside the bounds of text elements. --> <rect width="10" height="10" fill="white"/> <rect x="350" y="250" width="10" height="10" fill="white"/> <text x="100" y="50">hello there</text> <text x="100" y="100">to you all!</text> <text x="200" y="150">abc<tspan x="100" dy="10 -10">def</tspan></text> <text x="100" y="200">אבגabc</text> <text x="100" y="250" transform="scale(0.5,1)translate(100)">squashed</text> <!-- These two circles are just used for debugging the test; passing true as the last argument to drag() will place these circles at the drag start and end points. --> <circle id="dragstart" fill="blue"/> <circle id="dragend" fill="red"/> </svg>