blob: 0b7ff29b588d29468faf8937e39bd835cfe28341 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
top: 0;
left: 0;
text-shadow: 0 0 1px red;
}
</style>
</head>
<body>
<img src="../resources/green-400x400.png"></img>
<script>
addEventListener("load", () => {
const image = document.querySelector("img");
internals.installImageOverlay(image, [
{
topLeft : new DOMPointReadOnly(0, 0),
topRight : new DOMPointReadOnly(1, 0),
bottomRight : new DOMPointReadOnly(1, 0.5),
bottomLeft : new DOMPointReadOnly(0, 0.5),
children: [
{
text : "foo",
topLeft : new DOMPointReadOnly(0, 0),
topRight : new DOMPointReadOnly(0.5, 0),
bottomRight : new DOMPointReadOnly(0.5, 0.5),
bottomLeft : new DOMPointReadOnly(0, 0.5),
},
{
text : "bar",
topLeft : new DOMPointReadOnly(0.5, 0),
topRight : new DOMPointReadOnly(1, 0),
bottomRight : new DOMPointReadOnly(1, 0.5),
bottomLeft : new DOMPointReadOnly(0.5, 0.5),
}
],
}
]);
getSelection().selectAllChildren(internals.shadowRoot(image).querySelector(".image-overlay-text"));
});
</script>
</body>
</html>