focus-shadowhost-display-none.html (2399B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 #host:focus { display: none; } 6 </style> 7 <div id='sandbox'></div> 8 <script> 9 'use strict'; 10 11 // Check if shadow host with display:none CSS rule for :focus works. crbug.com/482830 12 13 var host; 14 var root; 15 var input; 16 17 function setupShadowDOM(delegatesFocus) { 18 sandbox.innerHTML = ''; 19 host = sandbox.appendChild(document.createElement('div')); 20 host.id = 'host'; 21 22 root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus}); 23 input = document.createElement('input'); 24 root.appendChild(input); 25 26 host.tabIndex = 0; 27 } 28 29 promise_test(() => { 30 setupShadowDOM(false); 31 return new Promise( 32 function(resolve) { 33 host.focus(); 34 assert_equals(window.getComputedStyle(host).display, 'none'); 35 assert_equals(document.activeElement, host); 36 assert_equals(root.activeElement, null); 37 38 function onBlur() { 39 assert_equals(window.getComputedStyle(host).display, 'block'); 40 assert_equals(document.activeElement, document.body); 41 assert_equals(root.activeElement, null); 42 host.removeEventListener('blur', onBlur); 43 resolve(); 44 } 45 host.addEventListener('blur', onBlur); 46 }); 47 }, 'when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.'); 48 49 promise_test(() => { 50 setupShadowDOM(true); 51 return new Promise( 52 function(resolve) { 53 input.focus(); 54 assert_equals(window.getComputedStyle(host).display, 'none'); 55 assert_equals(document.activeElement, host); 56 assert_equals(root.activeElement, input); 57 58 function onBlur() { 59 assert_equals(window.getComputedStyle(host).display, 'block'); 60 assert_equals(document.activeElement, document.body); 61 assert_equals(root.activeElement, null); 62 input.removeEventListener('blur', onBlur); 63 resolve(); 64 } 65 input.addEventListener('blur', onBlur); 66 }); 67 }, '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.'); 68 </script>