<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<iframe id="frame1" srcdoc="<input id='input'>" ></iframe>
<iframe id="frame2" srcdoc="<div>This is a iframe element</div>"></iframe>
<script>
description('Make sure that moving focus on an inactive frame fires blur event on existing element focus.');
var doc;
var input;
window.onload = function()
{
    var frame1 = document.getElementById('frame1');
    var frame2 = document.getElementById('frame2');
    
    doc = frame1.contentDocument;
    input = doc.querySelector('input');
    input.onblur = function() {
        testPassed('A blur event was dispatched on frame1 input element.');
    }
    input.onfocus = function() {
        testPassed('A focus event was dispatched on frame1 input element.');
    }
    input.focus();
    
    debug('===> Making a first frame with a focused element inactive by focus() for second frame.');    
    frame2.contentWindow.focus();
    shouldBe('frame1.contentDocument.activeElement', 'doc.body');
    debug('===> Making the first frame active again by focus() for first frame.');  
    frame1.contentWindow.focus();
    shouldBe('frame1.contentDocument.activeElement', 'doc.body');
}
</script>
</body>
</html>