<!DOCTYPE html>
<body id="body">
<script src="../../../../../resources/js-test.js"></script>
<script src="../../../../../fast/forms/resources/common.js"></script>
<script>
var interactiveElements1 = ['button', 'details', 'embed', 'iframe', 'label', 'select', 'textarea'];
var interactiveElements2 = [
    ['a', 'href'],
    ['audio', 'controls'],
    ['video', 'controls'],
    ['img', 'usemap'],
];

var label = document.createElement('label');
document.body.appendChild(label);
var control = document.createElement('input');
control.id = 'control';
label.appendChild(control);

interactiveElements1.forEach(function(tag) {
    var element = document.createElement(tag);
    element.id = tag;
    element.style.display = 'block';
    element.style.width = '100px';
    element.style.height = '100px';
    label.appendChild(element);
    clickElement(element);
    debug(tag);
    shouldNotBe('document.activeElement.id', '"control"');
    document.activeElement.blur();
    label.removeChild(element);
});
debug('');

interactiveElements2.forEach(function(entry) {
    var element = document.createElement(entry[0]);
    element.id = entry[0];
    element.style.display = 'block';
    element.style.width = '100px';
    element.style.height = '100px';
    label.appendChild(element);
    // Audio elements without controls attribute is always invisible.
    if (entry[0] != 'audio') {
        clickElement(element);
        debug(entry[0]);
        shouldBeEqualToString('document.activeElement.id', 'control');
    }
    document.activeElement.blur();

    element.setAttribute(entry[1], entry[1]);
    // Prevents page transition.
    if (entry[0] == 'a')
        element.addEventListener('click', function(e) { e.preventDefault(); }, false);
    clickElement(element);
    debug(entry[0] + '[' + entry[1] + ']');
    shouldNotBe('document.activeElement.id', '"control"');
    document.activeElement.blur();
    label.removeChild(element);
});

var element = document.createElement('input');
element.id = 'input';
element.type = 'text';
element.style.display = 'block';
element.style.width = '100px';
element.style.height = '100px';
label.appendChild(element);
clickElement(element);
debug('input');
shouldNotBe('document.activeElement.id', '"control"');
document.activeElement.blur();

// Note: It's impossible to click on input[type=hidden].

label.remove();
</script>
</body>
