<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="../../resources/js-test.js"></script>
<style>
#editor {
    width: 100%;
    height: 100px;
    border: 1px solid tomato;
}
</style>
</head>
<body>
    <input id="copy" value="www.apple.com" />
    <p contenteditable id="editor1">Link 1: <a href="https://webkit.org">webkit.org</a></p>
    <p contenteditable id="editor2">Link 2: <a href="https://webkit.org">webkit.org</a></p>
    <p contenteditable id="editor3">Link 3: <a href="https://webkit.org">webkit.org</a>&nbsp;</p>
</body>
<script>
description("This test verifies that replacing all the text inside of a link by pasting does not leave the link behind with its original href.");

function copyPlainText() {
    document.getElementById("copy").select();
    document.execCommand("Copy", true);
}

function containsLink(element) {
    return !!element.querySelector("a");
}

if (window.testRunner) {
    editor1 = document.getElementById("editor1");
    copyPlainText();
    getSelection().selectAllChildren(editor1.querySelector("a"));
    document.execCommand("Paste", true);
    shouldBeFalse("containsLink(editor1)");

    editor2 = document.getElementById("editor2");
    copyPlainText();
    getSelection().setBaseAndExtent(editor2.childNodes[0], 7, editor2.querySelector("a").childNodes[0], 10);
    document.execCommand("Paste", true);
    shouldBeFalse("containsLink(editor2)");

    editor3 = document.getElementById("editor3");
    copyPlainText();
    getSelection().setBaseAndExtent(editor3.querySelector("a").childNodes[0], 0, editor3, 3);
    document.execCommand("Paste", true);
    shouldBeFalse("containsLink(editor3)");

    [editor1, editor2, editor3].forEach(container => container.remove());
}
</script>
</html>
