<!DOCTYPE html>
<body>
<script src="../../../resources/js-test.js"></script>
<div id="f1">
<div tabindex="1" id="div1"></div>
</div>
<script type="text/javascript">
description('Making a focused element invisible should make it blur.');
jsTestIsAsync = true;
var focusTarget = document.getElementById('div1');
var testStage = 0;
document.body.onload = function() {
focusTarget.focus();
shouldBe('document.activeElement', 'focusTarget', true);
debug('===> Setting display:none');
f1.style.display = 'none';
setTimeout(function() {
testFailed('Timeout: Didn\'t loose focus.');
finishJSTest();
}, 1000);
};
focusTarget.addEventListener('blur', function() {
debug('Event: blur');
shouldBe('document.activeElement', 'document.body');
testPassed('The focusTarget element lost focus.');
debug('');
if (testStage++ == 0) {
f1.style.display = 'block';
focusTarget.focus();
shouldBe('document.activeElement', 'focusTarget', true);
debug('===> Setting visibility:hidden');
f1.style.visibility = 'hidden';
} else
finishJSTest();
}, false);
</script>
</body>