<!DOCTYPE html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<script src="resources/common.js"></script>
</head>
<body>
<p>There are two text fields. The first one should have a validation message bubble, and another should have no validation message.</p>
<form action="validation-message-clone.html">
<div style="height:100px;"><input required></div>
<div style="height:100px;" id=dest></div>
<div><input type=submit id=submit></div>
<div id=console></div>
</form>

<script>
var original = document.getElementsByTagName('input')[0];
var lastInOriginalShadow;
var lastInClonedShadow;
$('submit').click();
setTimeout(cloneElementWithValidationMessage, 0);
if (window.testRunner)
    testRunner.waitUntilDone();

function cloneElementWithValidationMessage() {
    $('dest').appendChild(original.cloneNode());
    setTimeout(confirmNoBubble, 0);
}

function confirmNoBubble() {
    if (!window.testRunner)
        return;

    lastInOriginalShadow = internals.shadowRoot(original).lastChild;
    shouldBeTrue('internals.shadowPseudoId(lastInOriginalShadow) == "-webkit-validation-bubble"');
    lastInClonedShadow = internals.shadowRoot($('dest').firstChild).lastChild;
    shouldBeFalse('internals.shadowPseudoId(lastInClonedShadow) == "-webkit-validation-bubble"');
    testRunner.notifyDone();
}
</script>

</body>