focus-shadowhost-display-none.html | Explore in Territory

<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#host:focus { display: none; }
</style>
<div id='sandbox'></div>
<script>
'use strict';

// Check if shadow host with display:none CSS rule for :focus works.  crbug.com/482830

var host;
var root;
var input;

function setupShadowDOM(delegatesFocus) {
    sandbox.innerHTML = '';
    host = sandbox.appendChild(document.createElement('div'));
    host.id = 'host';

    root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus});
    input = document.createElement('input');
    root.appendChild(input);

    host.tabIndex = 0;
}

promise_test(() => {
    setupShadowDOM(false);
    return new Promise(
        function(resolve) {
            host.focus();
            assert_equals(window.getComputedStyle(host).display, 'none');
            assert_equals(document.activeElement, host);
            assert_equals(root.activeElement, null);

            function onBlur() {
                assert_equals(window.getComputedStyle(host).display, 'block');
                assert_equals(document.activeElement, document.body);
                assert_equals(root.activeElement, null);
                host.removeEventListener('blur', onBlur);
                resolve();
            }
            host.addEventListener('blur', onBlur);
        });
}, 'when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.');

promise_test(() => {
    setupShadowDOM(true);
    return new Promise(
        function(resolve) {
            input.focus();
            assert_equals(window.getComputedStyle(host).display, 'none');
            assert_equals(document.activeElement, host);
            assert_equals(root.activeElement, input);

            function onBlur() {
                assert_equals(window.getComputedStyle(host).display, 'block');
                assert_equals(document.activeElement, document.body);
                assert_equals(root.activeElement, null);
                input.removeEventListener('blur', onBlur);
                resolve();
            }
            input.addEventListener('blur', onBlur);
        });
}, 'when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.');
</script>
chromium/third_party/blink/web_tests/external/wpt/shadow-dom/focus/focus-shadowhost-display-none.html
