<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<dialog></dialog>
<script>
description("Test that dialog receives a close event upon closing.");
jsTestIsAsync = true;

document.addEventListener('close', function(event) {
    testFailed("The 'close' event unexpectedly bubbled.");
});

closedCount = 0;
dialog = document.querySelector('dialog');
dialog.addEventListener('close', function(event) {
    closedCount++;
    selfDialog = this;
    shouldBe('selfDialog', 'dialog');
    shouldBeFalse('dialog.open');
    shouldBeFalse('event.cancelable');
    event.preventDefault();

    if (closedCount == 1) {
        dialog.show();
        dialog.close();
        // dialog's close event handler shouldn't be called synchronously.
        shouldBe('closedCount', '1');
    } else if (closedCount == 2) {
        finishJSTest();
    }
});

dialog.show();
dialog.close();

// Verify that preventDefault() didn't cancel closing.
shouldBeFalse('dialog.open');

// dialog's close event handler shouldn't be called synchronously.
shouldBe('closedCount', '0');
</script>
</body>
</html>